全部产品
云市场

切换栏组件

更新时间:2019-09-26 18:40:10

AUSegment 遵照新的 UED 需求完成,与 APCommonUI 中的 APSegmentedControl 并不能完全互通,因为 APSegmentedControl 只是封装了系统 UISegmentedControl 而没有其余功能。

效果图

依赖

AUSegment 的依赖为:

  1. import "AUSegmentedControlItem.h"

接口说明

  1. @protocol AUSegmentedControlDelegate <UIScrollViewDelegate>
  2. //AUSegment 点击事件回调
  3. @optional
  4. - (void)didSegmentValueChanged:(AUSegment*)segmentControl;
  5. - (void)didSelectSegmentItemModel:(AUSegmentItemModel*)selectedItemModel;//
  6. @end
  7. // segment 默认高度
  8. #define AUSegmentHeight AU_SPACE13
  9. /**
  10. 分段切换组件
  11. */
  12. @interface AUSegment : UIScrollView
  13. /**
  14. 初始化函数
  15. @param frame frame
  16. @param titles 数组:包含所有标题字符串
  17. @return 返回 AUSegment 实例
  18. */
  19. - (instancetype)initWithFrame:(CGRect)frame titles:(NSArray<NSString*> *)titles;
  20. /**
  21. 禁用 init 方法
  22. */
  23. - (instancetype)init NS_UNAVAILABLE;
  24. /**
  25. 禁用 initWithFrame 方法
  26. */
  27. - (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
  28. /**
  29. AUSegmentedControlDelegate
  30. */
  31. @property (nonatomic, weak) id <AUSegmentedControlDelegate> delegate;
  32. /**/
  33. /**
  34. 标题数组
  35. */
  36. @property (nonatomic, strong) NSMutableArray *titles;
  37. /**
  38. * 菜单字体
  39. */
  40. @property (nonatomic, copy) UIFont *titleFont;
  41. /**
  42. 当前选中的 segment
  43. */
  44. @property (nonatomic, assign) NSInteger selectedSegmentIndex;
  45. /**
  46. 选中项的颜色(包括文字和滑块)
  47. */
  48. @property (nonatomic, copy) UIColor *selecedColor;
  49. /**
  50. * 每个文字菜单水平方向的左右边距
  51. * 默认为 21 像素
  52. * 当为红点样式时,则 fixedItemWidth 不起作用,所有菜单不是固定宽度
  53. */
  54. @property(nonatomic, assign) NSInteger textHorizontalPadding;
  55. /**
  56. * 是否使用固定菜单宽度
  57. * 默认 YES,方便兼容老的菜单样式
  58. * 当为 YES 时,则 horizontalPadding 不起作用,所有菜单固定同一宽度
  59. */
  60. @property (nonatomic, assign) BOOL fixedItemWidth;
  61. /**
  62. * 是否自动滚动选中菜单项到合适位置(优先中间位置,不够位置时再靠边显示)
  63. * 默认为 NO
  64. */
  65. @property (nonatomic, assign) BOOL autoScroll;
  66. /**
  67. * 点击后是否自动更新指示条到当前选中 item 的下标
  68. * 默认为 YES
  69. */
  70. @property (nonatomic, assign) BOOL autoChangeSelectedIndex;
  71. /*
  72. * model 数组
  73. */
  74. @property(nonatomic, strong) NSMutableArray<AUSegmentItemModel *> *itemModels;
  75. /**
  76. 支持中间插入多项
  77. @param array 插入的标题数组
  78. @param indexes 插入的 indexs
  79. */
  80. - (void)insertTitleArray:(NSArray<NSString*> *)array atIndexes:(NSIndexSet *)indexes;
  81. /**
  82. 支持在末尾新增多项
  83. @param array 新增的标题数组
  84. */
  85. - (void)addTitleArray:(NSArray<NSString*>*)array;
  86. /**
  87. * 设置自动滚动到指定下标位置,注意:只滚动展示 item,选中指示条保持不变
  88. * 默认与 selectedSegmentIndex(即选中项保持一致)
  89. */
  90. - (void)autoScrollToIndex:(NSInteger)index;
  91. - (BOOL)segmentItemIsInVisualAear:(NSInteger)index;
  92. @end
  93. @interface AUSegmentItemModel : NSObject
  94. @property(nonatomic, copy) NSString *title;
  95. @property(nonatomic, copy) UIImage *img;
  96. @property(nonatomic, copy) NSString *imgId;
  97. @property(nonatomic, copy) NSString *badgeNumber;
  98. @property(nonatomic, copy) NSString *badgeWidgetId;
  99. @property(nonatomic, assign) BOOL badgeReserved; // 设置当前 item 是否要预留红点位置,如果不预留则红点展示时界面可能有跳动感
  100. @property(nonatomic, strong) NSDictionary *extendInfo; // 扩展字段
  101. @end
  102. @interface AUSegment (ItemModel)
  103. /**
  104. * 第二版的初始化函数
  105. * @param frame frame
  106. * @param menus item 数组
  107. */
  108. - (instancetype) initWithFrame:(CGRect)frame menus:(NSArray<AUSegmentItemModel *>*)menus;
  109. /**
  110. 支持更新控件 item 项
  111. @param items 需要更新的 item 数组,主要用于增删或者全部更新已有 model 数据
  112. */
  113. - (void)updateItems:(NSArray<AUSegmentItemModel *>*)items;
  114. /**
  115. 支持更新控件item项
  116. @param items 删除已有数据,重新替换为新的 item 数据
  117. */
  118. - (void)updateItemModel:(AUSegmentItemModel *)model
  119. atIndex:(NSInteger)index;
  120. @end
  121. // 右边显示行动点按钮,默认显示加号 +
  122. @interface AUSegment (AUActionIcon)
  123. - (void)showActionIcon:(BOOL)showIcon target:(id)target action:(SEL)action;
  124. @end

自定义属性

属性名 用途 类型
titles segment 的标题数组 NSArray
selectedSegmentIndex 当前选中的 segment NSInteger
delegate 实现 AUSegmentedControlDelegate id
autoScroll 是否自动滚动选中菜单项到合适位置(优先中间位置,不够位置时再靠边显示) BOOL
fixedItemWidth 是否使用固定菜单宽度 BOOL
textHorizontalPadding 每个文字菜单水平方向的左右边距 BOOL
titleFont 自定义菜单字体 UIFont

代码示例

  • 不带红点的分段控件:

    1. NSArray *testArray1 = @[@"tab1",@"tab2",@"tab3",@"tab4",@"tab5",@"tab6",@"tab7",@"tab8"];
    2. AUSegment *segment = [[AUSegment alloc] initWithFrame:CGRectMake(0, 300, self.view.width, 44) titles:testArray1];
    3. segment.delegate = self;
    4. [self.view addSubview:segment];
    5. //回调
    6. - (void)didSegmentValueChanged:(AUSegment*)segmentControl {
    7. NSLog(@"AUSegmented切换了");
    8. }
  • 带红点的分段控件:

    1. NSMutableArray *array = [[NSMutableArray alloc] init];
    2. for (int i=0; i<7; i++)
    3. {
    4. AUSegmentItemModel *model = [[AUSegmentItemModel alloc] init];
    5. model.title = [NSString stringWithFormat:@"选项 %d", i];
    6. if (i == 0)
    7. {
    8. model.badgeNumber = @".";
    9. }
    10. if (i == 1)
    11. {
    12. model.badgeNumber = @"new";
    13. }
    14. if (i == 6)
    15. {
    16. model.badgeNumber = @"6";
    17. }
    18. model.badgeReserved = YES;
    19. [array addObject:model];
    20. }
    21. AUSegment *segment2 = [[AUSegment alloc] initWithFrame:CGRectMake(0, topMargin, self.view.width, 44) menus:array];
    22. [self.view addSubview:segment2];
    23. [segment2 autoScrollToIndex:6];
    24. segment2.backgroundColor = [UIColor whiteColor];
    25. [segment2 showActionIcon:YES target:self action:@selector(clickActionIcon:)];