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 还可以，那么请点赞喽。非常感谢您的支持