How to realize the self-defined column effect in iOS UISegmentControl

Editor to share with you how iOS UISegmentControl to achieve custom column effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

The details are as follows

The UISegmentControl that comes with iOS implements an effect similar to that shown above.

But there are many usefuls. generally, these two columns are two tableView, which need to slide left and right to respond to the column.

Let's talk about how this effect is achieved.

There is mainly a short red line that needs to slide to switch tableView.

Customize a SegmentView first

.h

/ define block, which is used to pass the button typedef void (^ PassValueBlock) (NSInteger index) clicked; @ interface BCLCommunitySegmentView: UIView// defines block@property (nonatomic, strong) PassValueBlock returnBlock;@property (nonatomic, strong) UIImageView * selectImage;//. This is the short red line / / initialization array, passing in frame and the name-(id) initWithFrame: (CGRect) frame withTitleArray: (NSArray *) array;//block passing value method-(void) setReturnBlock: (PassValueBlock) returnBlock;@end.

In SegmentView.m

Loop to create buttons, several columns to create several buttons

-(void) creatSegmentView {/ / set the width of the button _ itemWidth = self.frame.size.width / _ itemCounts; / / Loop create button for (int I = 0; I

< _itemCounts; i++) { UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake((i + 1) *_itemWidth/2, 0, _itemWidth/2, self.frame.size.height)]; [self addSubview:button]; //设置button的字 [button setTitle:_titleArray[i] forState:UIControlStateNormal]; //设置button的字颜色 [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; //设置字体大小 button.titleLabel.font = [UIFont systemFontOfSize:20]; //设置居中显示 button.titleLabel.textAlignment = NSTextAlignmentCenter; //设置tag值 button.tag = 1000 + i; //添加点击事件 [button addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside]; //如果是第一个，默认被选中 if (i == 0) { button.selected = YES; } } //添加一个select _selectImage = [[UIImageView alloc]initWithFrame:CGRectMake(_itemWidth / 2, self.frame.size.height - 2, _itemWidth / 2, 2)]; _selectImage.image = [UIImage imageNamed:@"bcl_bg_community_segment_color_line"]; [self addSubview:_selectImage];} 然后设置按钮的点击事件，将点击到哪个按钮 回调过去 -(void)buttonAction:(UIButton *)button{ //当button被点击，所有的button都设为未选中状态 for (UIView *view in self.subviews) { if ([view isKindOfClass:[UIButton class]]) { UIButton *subButton = (UIButton*)view; subButton.selected = NO; subButton.titleLabel.font = [UIFont systemFontOfSize:20]; } } //然后将选中的这个button变为选中状态 button.selected = YES; //通过当前的tag值设置select的位置 NSInteger index = button.tag - 1000; [UIView animateWithDuration:0.3 animations:^{ self->

_ selectImage.frame = CGRectMake ((1 + index) * _ itemWidth/2, _ selectImage.frame.origin.y, self- > _ selectImage.frame.size.width, _ selectImage.frame.size.height);}]; _ returnBlock (index);}

In the controller that needs to be shown

.h

Interface BCLCommunityView: UIView@property (nonatomic, strong) UIScrollView * scrollerView;@property (nonatomic, strong) UITableView * circleTableView;@property (nonatomic, strong) UITableView * squreTableView;@property (nonatomic, strong) BCLCommunitySegmentView * segmentView;@end

Using scrollView to realize the sliding of two tableView in .m

-(instancetype) initWithFrame: (CGRect) frame {if (self = [super initWithFrame:frame]) {[self setSegmentView]; _ circleTableView = [self loadTableView]; _ squreTableView = [self loadTableView]; _ circleTableView.tag = 1; _ squreTableView.tag = 2; _ scrollerView = [[UIScrollView alloc] init]; _ scrollerView.frame = CGRectMake (0104, KScreenW, KScreenH) _ scrollerView.pagingEnabled = YES; _ scrollerView.scrollEnabled = YES; _ scrollerView.contentSize = CGSizeMake (KScreenW * 2, KScreenH); _ scrollerView.bounces = YES; _ scrollerView.delegate = self; [_ scrollerView addSubview:_circleTableView]; [_ scrollerView addSubview:_squreTableView]; _ circleTableView.frame = CGRectMake (0,0, KScreenW, KScreenH) _ squreTableView.frame = CGRectMake (KScreenW, 0, KScreenW, KScreenH); [self addSubview:_scrollerView];} return self;}-(UITableView *) loadTableView {UITableView * tableView = [[UITableView alloc] initWithFrame:CGRectMake (0,0, KScreenW, KScreenH) style:UITableViewStyleGrouped]; tableView.showsVerticalScrollIndicator = NO; [tableView registerClass: [UITableViewCell class] forCellReuseIdentifier:@ "cell]; tableView.dataSource = self; [self addSubview:tableView]; return tableView }-(NSInteger) numberOfSectionsInTableView: (UITableView *) tableView {if (tableView.tag = = 1) {return 3;} else {return 2;}}-(NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section {return 1;}-(UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath {if (tableView.tag = = 1) {UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@ "cell" forIndexPath:indexPath] If (! cell) {cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@ "cell"];} cell.backgroundColor = [UIColor redColor]; cell.textLabel.text = @ "11111"; return cell;} else {UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@ "cell" forIndexPath:indexPath] If (! cell) {cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@ "cell"];} return cell;}}

ScrollView Agent sliding scrollerView to realize the sliding of Little Red Bar

-(void) scrollViewDidEndDecelerating: (UIScrollView *) scrollView {CGRect frame = _ segmentView.selectImage.frame; if (scrollView.contentOffset.x / KScreenW = = 0) {[UIView animateWithDuration:0.1 animations: ^ {_ segmentView.selectImage.frame = CGRectMake (KScreenW / 4, frame.origin.y, frame.size.width, frame.size.height);}] } else if (scrollView.contentOffset.x / KScreenW = = 1) {[UIView animateWithDuration:0.1 animations: ^ {_ segmentView.selectImage.frame = CGRectMake (KScreenW / 2, frame.origin.y, frame.size.width, frame.size.height);}];}} above is all the content of the article "how to achieve custom column effect in iOS UISegmentControl". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!