All Products
Search
Document Center

Segment component

Last Updated: May 25, 2021

AUSegment provides a switching bar style that supports scrolling.

AUSegment is provided based on the latest UED requirements. It cannot be used interchangeably with APSegmentedControl in APCommonUI because APSegmentedControl encapsulates the system component UISegmentedControl but does not provide any other functions.

Sample image

Dependency

The dependency of AUSegment is as follows:

 
  1. import "AUSegmentedControlItem.h"

API description

 
  1. @protocol AUSegmentedControlDelegate <UIScrollViewDelegate>
  2. // The AUSegment clicking event callback.
  3. @optional
  4. - (void)didSegmentValueChanged:(AUSegment*)segmentControl;
  5. - (void)didSelectSegmentItemModel:(AUSegmentItemModel*)selectedItemModel;//
  6. @end
  7. // The default segment height.
  8. #define AUSegmentHeight AU_SPACE13
  9. /**
  10. The AUSegment component.
  11. */
  12. @interface AUSegment : UIScrollView
  13. /**
  14. The initialization function.
  15. @param frame The frame.
  16. @param titles The array that contains all title strings.
  17. @return Return the AUSegment instance.
  18. */
  19. - (instancetype)initWithFrame:(CGRect)frame titles:(NSArray<NSString*> *)titles;
  20. /**
  21. Disable the init method.
  22. */
  23. - (instancetype)init NS_UNAVAILABLE;
  24. /**
  25. Disable the initWithFrame method.
  26. */
  27. - (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
  28. /**
  29. AUSegmentedControlDelegate
  30. */
  31. @property (nonatomic, weak) id <AUSegmentedControlDelegate> delegate;
  32. /**/
  33. /**
  34. The title array.
  35. */
  36. @property (nonatomic, strong) NSMutableArray *titles;
  37. /**
  38. * The title font.
  39. */
  40. @property (nonatomic, copy) UIFont *titleFont;
  41. /**
  42. The selected segment index.
  43. */
  44. @property (nonatomic, assign) NSInteger selectedSegmentIndex;
  45. /**
  46. The color of the selected item (including the text and slider).
  47. */
  48. @property (nonatomic, copy) UIColor *selecedColor;
  49. /**
  50. * The left and right margins of each text menu in the horizontal direction.
  51. * The default value is 21 px.
  52. * When a menu contains a red dot, the value of fixedItemWidth is invalid and the menu width is not fixed.
  53. */
  54. @property(nonatomic, assign) NSInteger textHorizontalPadding;
  55. /**
  56. * Whether to use a fixed menu width.
  57. * The default value is YES, for compatibility with old menu styles.
  58. * When the value is YES, the value of textHorizontalPadding is invalid, and all menus are in fixed width.
  59. */
  60. @property (nonatomic, assign) BOOL fixedItemWidth;
  61. /**
  62. * Whether to automatically scroll the selected menu to an appropriate position (middle position preferred, and displayed to the side when the space is insufficient).
  63. * The default value is NO.
  64. */
  65. @property (nonatomic, assign) BOOL autoScroll;
  66. /**
  67. * Whether to automatically move the indicator bar below the index of the selected item after clicked.
  68. * The default value is YES.
  69. */
  70. @property (nonatomic, assign) BOOL autoChangeSelectedIndex;
  71. /*
  72. * The model array.
  73. */
  74. @property(nonatomic, strong) NSMutableArray<AUSegmentItemModel *> *itemModels;
  75. /**
  76. Multiple items can be inserted in the middle.
  77. @param array The inserted title array.
  78. @param indexes The inserted indexes.
  79. */
  80. - (void)insertTitleArray:(NSArray<NSString*> *)array atIndexes:(NSIndexSet *)indexes;
  81. /**
  82. Multiple items can be added to the end.
  83. @param array The added title array.
  84. */
  85. - (void)addTitleArray:(NSArray<NSString*>*)array;
  86. /**
  87. * Set automatic scrolling to the specified subscript position. Note: Items are displayed in scrolling mode, and the indicator bar stays in the same position.
  88. * The value is the same as that of selectedSegmentIndex (indicating the index of the selected segment) by default.
  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; // Whether to reserve a red dot position for the current item. If no red dot position is reserved, the item may flicker when containing a red dot.
  100. @property(nonatomic, strong) NSDictionary *extendInfo; // The extended field.
  101. @end
  102. @interface AUSegment (ItemModel)
  103. /**
  104. * The initialization function for version 2.
  105. * @param frame The frame.
  106. * @param menus The item array.
  107. */
  108. - (instancetype) initWithFrame:(CGRect)frame menus:(NSArray<AUSegmentItemModel *>*)menus;
  109. /**
  110. Control items can be updated.
  111. @param items The array of items that need to be updated, mainly for adding or deleting model data or updating all existing model data.
  112. */
  113. - (void)updateItems:(NSArray<AUSegmentItemModel *>*)items;
  114. /**
  115. Control items can be updated.
  116. @param items Delete existing item data and replace it with new item data.
  117. */
  118. - (void)updateItemModel:(AUSegmentItemModel *)model
  119. atIndex:(NSInteger)index;
  120. @end
  121. // The action button, plus sign (+) by default, is displayed on the right.
  122. @interface AUSegment (AUActionIcon)
  123. - (void)showActionIcon:(BOOL)showIcon target:(id)target action:(SEL)action;
  124. @end

Custom properties

Property Purpose Type
titles The segment title array. NSArray
selectedSegmentIndex The selected segment index. NSInteger
delegate Implement AUSegmentedControlDelegate. ID
autoScroll Whether to automatically scroll the selected item to an appropriate position (middle position preferred, and displayed the side when the space is insufficient). BOOL
fixedItemWidth Whether to use a fixed menu width. BOOL
textHorizontalPadding The left and right margins of each text menu in the horizontal direction.’ BOOL
titleFont The custom title font. UIFont

Sample code

  • Segment controls without red dot:

       
    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. // The callback.
    6. - (void)didSegmentValueChanged:(AUSegment*)segmentControl {
    7. NSLog(@"AUSegmented switched");
    8. }
  • Segment controls with red dot:

       
    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:@"Option %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:)];