SegmentControl 那些令人烦恼的事儿

每个人的曾经都很苦逼。我知道我很卑微，但我不曾放慢脚步，在这条路上至死不悔。愿与你同行。

UISegmentControl

• 概述
  • UISegmentControl 是系统的段选择控件，具有简洁大方的外观，但是通常不能满足产品设计的需求。用户（ developer ）对 UISegmentControl 的外观的可控性是比较差的，为了满足我们完美的产品设计需求，我们通常需要绞尽脑汁的思考如何去改变 UISegmentControl 的外观，但结果却不那么令人满意。最终你会发现 UISegmentControl 满足需求需要花费很多的时间（或者说初学者根本无法完成需求）。在此，首先简单叙述 UISegmentControl 的实现原理，和事件处理；然后，详细介绍如何自定义 IDSegmentControl，并与 UISegmentControl 对比。
  • 大家在能使用系统控件的情况下，尽量使用系统控件。本 Blog 自定义 IDSegmentControl 只是向大家提供一种解决问题的方式。

• 效果图

  

  注: 上边的是 UISegmentControl 实现的效果，下边是 IDSegmentControl 实现的效果

• UISegmentControl（下面以 UISegmentControl 的示例，来叙述其使用细节）

  • 初始化 UISegmentControl 实例，并设置标题（默认状态下，UISegmentControl不选中任何一个 segment）

    self.segmentControl = [[UISegmentedControl alloc] initWithItems:@[@"全部分类", @"智能排序"]];

    • 效果

      

  • 设置标题的字体和颜色（选中第一个 segment，此时的背景色为蓝色）

    NSMutableDictionary *dictionary = [NSMutableDictionary dictionary];dictionary[NSForegroundColorAttributeName] = [UIColor blackColor];dictionary[NSFontAttributeName] = [UIFont systemFontOfSize:18];[self.segmentControl setTitleTextAttributes:dictionary forState:UIControlStateNormal];

    • 效果

      

  • 设置 segment 三个状态（不要问那三个状态哦）下的图片

    [self.segmentControl setBackgroundImage:[UIImage imageNamed:@"unselected"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];[self.segmentControl setBackgroundImage:[UIImage imageNamed:@"selected"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];[self.segmentControl setBackgroundImage:[UIImage imageNamed:@"unselected"] forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];

    • 效果

      

      注：此时我们会看到，当选中 segment 时，文字会被遮挡（你可以让美工给你切个图哦，如果美工说：“你长的太丑了，不给切”。那你可以联系我，我会告诉你怎么做。`代码能解决的问题，就不用去找美工喽`）。

  • 改变分割线

    • 使用 tintColor

      [self.segmentControl setTintColor:[UIColor whiteColor]];

      • 效果

        

    • 使用 dividerImage（设置一张图片即可）

      - (void)setDividerImage:(nullable UIImage *)dividerImage forLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState barMetrics:(UIBarMetrics)barMetrics

  • 默认选中第一个 segment

    self.segmentControl.selectedSegmentIndex = 0;

    • 效果

      

  • 为 UISegmentControl 添加事件

    [self.segmentControl addTarget:self action:@selector(segmentControlselectedSegmentIndexChange:) forControlEvents:UIControlEventValueChanged];

  • 至此，UISegmentControl 的使用已经简单介绍到此。接下来，会介绍如何实现自己的 segmentControl，如：IDSegmentControl。若你觉得没有必要，那就可以不要往下看了，你不会损失很多。但还是建议你看一下，因为我相信你会收获很多。

IDSegmentControl

• 概述
  • 之所以自定义 IDSegmentControl，是为了增加其可控性，使其用起来更得心应手。同时也是一种技术的积淀。
• 设计思路
  • 使用 UIView 的子类来实现 IDSegmentControl，每个 Item 是一个 Button，通过控制 Button 来控制 segment 的外观和事件

  • 使用代理模式来实现 IDSegmentControl 的事件处理（继承自 UIControl 的版本，会使用 addTarget 实现）

    注：或许你的自定控件，通常是继承自 UIView，但是你是否想过让它继承自 UIControl 呢！！！若你有兴趣，那么请联系我，感谢您的支持

• 具体实现
  • 设计接口

    • 设置 IDSegmentControl 的 items 的 title（IDSegmentControl 中 item 和 indicator 的布局需要基于 items 的 count）

      /** 所有segment的标题 */@property (nonatomic, strong) NSArray *titlesOfSegments;#pragma mark - overided setter, update the appreance of the segmentControl- (void)setTitlesOfSegments:(NSArray *)titlesOfSegments {    _titlesOfSegments = titlesOfSegments;    // 根据 _titlesOfSegments 向 IDSegmentControl 中添加 items（button）    for (NSInteger i = 0; i < _titlesOfSegments.count; i++) {        UIButton *segmentButton = [[UIButton alloc] init];        [segmentButton.titleLabel setFont:[UIFont systemFontOfSize:18]];        [segmentButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];        [segmentButton setTitle:_titlesOfSegments[i] forState:UIControlStateNormal];        [segmentButton addTarget:self action:@selector(segmentButtonClick:) forControlEvents:UIControlEventTouchUpInside];        [self.segmentArray addObject:segmentButton];        [self addSubview:segmentButton];    }}

  • 搭建 IDSegmentControl 的界面

    • 添加分割线和指示器

      #pragma mark - initializer- (instancetype)initWithFrame:(CGRect)frame {    if (self = [super initWithFrame:frame]) {        [self addSubview:self.seperatorView];        [self addSubview:self.indicatorView];    }    return self;}

    • 布局所有的子控件（为什么在 layoutSubviews 布局子控件，原因想必大家都知道的）

      /** 布局所有的子控件 */- (void)layoutSubviews {    [super layoutSubviews];    // 底部的分割线    self.seperatorView.frame = CGRectMake(0, self.bounds.size.height - SeperatorHeight, self.bounds.size.width, SeperatorHeight);    // 指示器    self.indicatorView.frame = CGRectMake(0, self.bounds.size.height - SeperatorHeight, self.bounds.size.width / (CGFloat)self.titlesOfSegments.count, SeperatorHeight);    // 所有的 segment    CGFloat segmentWith = self.bounds.size.width / (CGFloat)self.titlesOfSegments.count;    CGFloat segmentHeight = self.bounds.size.height;    for (NSInteger i = 0; i < self.segmentArray.count; i++) {        self.segmentArray[i].frame = CGRectMake(i * segmentWith, 0, segmentWith, segmentHeight - 1);    }}

  • 为 IDSegmentControl 添加协议

    @protocol IDSegementControlDelegate <NSObject>@optional- (void)segmentControlDidSelectItem:(UIButton *)selectedItem atIndex:(NSInteger)selectedIndex;@end

  • 为 IDSegmentControl 添加接口

    /** 代理 */@property (nonatomic, weak) id<ZBSegementControlDelegate> delegate;/** 选中的segment的索引 */@property (nonatomic, assign) NSInteger selectedIndex;/** 指示器的偏移量 */@property (nonatomic, assign) CGFloat indicatorOffsetX;

  • 处理按钮事件

    #pragma mark - 按钮点击事件- (void)segmentButtonClick:(UIButton *)segmentButton {    // 处理选中 segment 的逻辑    if (![self.lastSegmentButton isEqual:segmentButton]) {        self.lastSegmentButton.selected = NO;    }    segmentButton.selected = !segmentButton.selected;    // 改变 indicator 的位置    CGFloat segmentWidth = self.bounds.size.width / (CGFloat)self.titlesOfSegments.count;    // 同样是 segmentButton，你知道为什么可以找到对应的 segmentButton 吗？    NSInteger selectedIndex = [self.segmentArray indexOfObject:segmentButton];    [UIView animateWithDuration:0.25 animations:^{        [self setIndicatorOffsetX:selectedIndex * segmentWidth];    }];    // 通知代理，选中的 segment 已经改变    if ([self.delegate respondsToSelector:@selector(segmentControlDidSelectItem:atIndex:)]) {        [self.delegate segmentControlDidSelectItem:segmentButton atIndex:selectedIndex];    }    // 更新上一次选中的 segment（当前的 segment 是下一次选中新的 segment 时的 lastSegmentButton。好好理解吧）    if (self.lastSegmentButton == nil) {        self.lastSegmentButton = segmentButton;    } else {        if (![self.lastSegmentButton isEqual:segmentButton]) {            self.lastSegmentButton = segmentButton;        }    }}

  • viewController 使用示例

    • 添加 segmentControl

      /** UISegmentedControl */- (void)setupSystemSegmentControl {    // titles    self.segmentControl = [[UISegmentedControl alloc] initWithItems:@[@"全部分类", @"智能排序"]];    // titleAttributes    NSMutableDictionary *dictionary = [NSMutableDictionary dictionary];    dictionary[NSForegroundColorAttributeName] = [UIColor blackColor];    dictionary[NSFontAttributeName] = [UIFont systemFontOfSize:18];    [self.segmentControl setTitleTextAttributes:dictionary forState:UIControlStateNormal];    // backgroundImage    [self.segmentControl setBackgroundImage:[UIImage imageNamed:@"unselected"] forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];    [self.segmentControl setBackgroundImage:[UIImage imageNamed:@"unselected"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];    [self.segmentControl setBackgroundImage:[UIImage imageNamed:@"selected"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];    // tintColor    [self.segmentControl setTintColor:[UIColor whiteColor]];    // 选中第一个 segment    self.segmentControl.selectedSegmentIndex = 0;    // action    [self.segmentControl addTarget:self action:@selector(systemSegmentControlselectedSegmentIndexChange:) forControlEvents:UIControlEventValueChanged];    [self.view addSubview:self.segmentControl];}/** IDSegmentControl */- (void)setupIDSegmentControl {    self.customSegmentControl = [[IDSegmentControl alloc] init];    self.customSegmentControl.delegate = self;    self.customSegmentControl.titlesOfSegments = @[@"全部分类", @"智能排序"];    [self.view addSubview:self.customSegmentControl];}

    • 布局子控件

      - (void)viewDidLayoutSubviews {    [super viewDidLayoutSubviews];    self.segmentControl.frame = CGRectMake(0, 64, self.view.bounds.size.width, 35);    self.customSegmentControl.frame = CGRectMake(0, 104, self.view.bounds.size.width, 35);}

    • 处理 segmentControl 事件

      // UISegmentControl- (void)systemSegmentControlselectedSegmentIndexChange:(UISegmentedControl *)segmentControl {    NSLog(@"%zd", segmentControl.selectedSegmentIndex);}// IDSegmentControl- (void)segmentControlDidSelectItem:(UIButton *)selectedItem atIndex:(NSInteger)selectedIndex {    NSLog(@"%zd", selectedIndex);}

  声明：若你需要工程文件，请@我喽。若您觉得 Blog 还可以，那么请点赞喽。非常感谢您的支持