分享一个第三方 UISegmentedControl

2,890 阅读3分钟
原文链接: afishhhhh.github.io

Github: YUSegment

demo

Features

  • 可以显示文字与图片,文字以 NSAttributedString 类的形式展现
  • 支持显示分割线
  • 可以隐藏指示器,或者将指示器显示在顶部或者底部
  • 需要 iOS8+,支持 ARC

Installation

CocoaPods

  1. Podfile 中添加 pod 'YUSegment'
  2. 执行 pod install 命令
  3. 在需要的文件中 #import <YUSegment/YUSegment.h>

Carthage

在 Cartfile 中写入:

github "afishhhhh/YUSegment"

Usage

YUSegmentedControl 继承自 UIControl,即可以使用 Target-Action 进行事件响应。

YUSegmentedControl *segmentedControl = [[YUSegmentedControl alloc] initWithTitles:@[@"健身", @"摄影", @"科技", @"美食", @"旅行"]];
[self.view addSubview:segmentedControl];
[segmentedControl addTarget:self action:@selector(segmentedControlTapped:) forControlEvents:UIControlEventValueChanged];

默认情况下背景颜色值为 whiteColor,指示器的颜色值为 darkGrayColor,高度为 3.0,分割线的颜色值为 #e7e7e7,当前被选中的 segment 为第 1 个。

APIs

方法

- (instancetype)initWithTitles:(NSArray  *)titles;
- (instancetype)initWithImages:(NSArray  *)images;
- (instancetype)initWithImages:(NSArray  *)images
                selectedImages:(nullable NSArray  *)selectedImages;
  1. 以上初始化方法中,参数 titles 以及 images 都不能为 nil
  2. 在第三个方法中额外传递一个 selectedImages 数组(可以为 nil),这个数组中保存了选中状态下需要显示的图片,images 则为正常状态下需要显示的图片。


- (nullable NSString *)titleAtIndex:(NSUInteger)index;
- (nullable UIImage *)imageAtIndex:(NSUInteger)index;
  1. 这两个方法根据索引获取到相应的 title 或者 image
  2. index 的值应该在一定的范围内。


- (void)setTitle:(NSString *)title atIndex:(NSUInteger)index;
- (void)setImage:(UIImage *)image atIndex:(NSUInteger)index;
- (void)setImage:(UIImage *)image selectedImage:(nullable UIImage *)selectedImage 
                                        atIndex:(NSUInteger)index;
  1. 以上三个方法根据索引修改某一个 segment 的 title 或者 image
  2. index 的值应该在一定的范围内。


- (void)showBadgeAtIndexes:(NSArray  *)indexes;
- (void)hideBadgeAtIndex:(NSUInteger)index;
  1. 以上两个方法可以用于显示或者隐藏 badge。
  2. badge 仅仅是一个小红点,目前不能显示某一个数字等等。
  3. 可以指定多个 index,使多个 segment 同时显示 badge,但是每一次只能隐藏一个 badge。
  4. index 的值应该在一定范围内。
  5. 例如:

    [segmentedControl show BadgeAtIndexes:@[@1, @2]];


- (void)setTextAttributes:(nullable NSDictionary *)attributes 
                 forState:(YUSegmentedControlState)state;
  1. 这个方法给特定状态下的文字指定样式。
  2. attributes 字典中可以使用的 key 详见 Character Attributes
  3. state 可以使用的值为 YUSegmentedControlNormal 以及 YUSegmentedControlSelected
  4. 例如:

    [segmentedControl setTextAttributes:@{
      NSFontAttributeName: [UIFont systemFontOfSize:20.0 weight:UIFontWeightLight],
      NSForegroundColorAttributeName: [UIColor blackColor]
    } forState:YUSegmentedControlNormal];
    

属性

  • numberOfSegments

    这是一个 NSUInteger 类型的只读属性,返回 YUSegmentedControl 实例中 segment 的个数。

  • selectedSegmentIndex

    是一个 NSUInteger 类型的只读属性,返回当前被选中的 segment 的索引。默认的索引值为 0。

  • horizontalPadding

    水平方向上的 padding 值,默认值为 0。

    padding-0

    如果将该值设置为 32.0。

    padding-32
  • showsTopSeparator

    一个 BOOL 值用于指定是否显示位于顶部的分隔线,默认值为 YES

  • showsBottomSeparator

    一个 BOOL 值用于指定是否显示位于底部的分隔线,默认值为 YES

  • showsVerticalDivider

    一个 BOOL 值用于指定是否显示位于 segment 之间的垂直分割线,默认值为 NO

  • showsIndicator

    一个 BOOL 值用于指定是否显示指示器,默认值为 YES

  • backgroundColor(YUSegmentedControl)

    YUSegmentedControl 实例的背景颜色,默认是白色。

  • height(YUSegmentedControlIndicator)

    指示器的高度,默认值为 3.0。需要通过以下方式设值:

    segment.indicator.height = 3.0;
  • locate(YUSegmentedControlIndicator)

    用于设置指示器的方位,默认值为 YUSegmentedControlIndicatorLocateBottom,即显示在底部,也可以设置为 YUSegmentedControlIndicatorLocateTop。需要通过以下方式设值:

    segment.indicator.locate = YUSegmentedControlIndicatorLocateTop;
  • backgroundColor(YUSegmentedControlIndicator)

    指示器的背景颜色,默认值为 darkGrayColor。需要通过以下方式设值:

    segment.indicator.backgroundColor = [UIColor whiteColor];