All Products
Search
Document Center

Mobile Platform as a Service:Segment component

Last Updated:Jul 19, 2023

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.

Dependency

The dependency of AUSegment is as follows:

import "AUSegmentedControlItem.h"

API description

@protocol AUSegmentedControlDelegate <UIScrollViewDelegate>
// The AUSegment clicking event callback.
@optional

- (void)didSegmentValueChanged:(AUSegment*)segmentControl;

- (void)didSelectSegmentItemModel:(AUSegmentItemModel*)selectedItemModel;//

@end

// The default segment height.
#define     AUSegmentHeight     AU_SPACE13

/**
    The AUSegment component.
 */
@interface AUSegment : UIScrollView

/**
 The initialization function.

 @param frame   The frame.
 @param titles  The array that contains all title strings.

 @return Return the AUSegment instance.
 */
- (instancetype)initWithFrame:(CGRect)frame titles:(NSArray<NSString*> *)titles;

/**
 Disable the init method.
 */
- (instancetype)init NS_UNAVAILABLE;

/**
 Disable the initWithFrame method.
 */
- (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;

/**
 AUSegmentedControlDelegate
 */
@property (nonatomic, weak)     id <AUSegmentedControlDelegate> delegate;

/**/

/**
 The title array.
 */
@property (nonatomic, strong)   NSMutableArray *titles;

/**
 * The title font.
 */
@property (nonatomic, copy) UIFont *titleFont;

/**
 The selected segment index.
 */
@property (nonatomic, assign)   NSInteger selectedSegmentIndex;


/**
 The color of the selected item (including the text and slider).
 */
@property (nonatomic, copy)     UIColor *selecedColor;

/**
 * The left and right margins of each text menu in the horizontal direction.
 * The default value is 21 px.
 * When a menu contains a red dot, the value of fixedItemWidth is invalid and the menu width is not fixed.
 */
@property(nonatomic, assign)    NSInteger textHorizontalPadding;

/**
 * Whether to use a fixed menu width.
 * The default value is YES, for compatibility with old menu styles.
 * When the value is YES, the value of textHorizontalPadding is invalid, and all menus are in fixed width.
 */
@property (nonatomic, assign) BOOL fixedItemWidth;

/**
 * Whether to automatically scroll the selected menu to an appropriate position (middle position preferred, and displayed to the side when the space is insufficient).
 * The default value is NO.
 */
@property (nonatomic, assign) BOOL autoScroll;

/**
 * Whether to automatically move the indicator bar below the index of the selected item after clicked.
 * The default value is YES.
 */
@property (nonatomic, assign) BOOL autoChangeSelectedIndex;

/*
 * The model array.
 */
@property(nonatomic, strong) NSMutableArray<AUSegmentItemModel *> *itemModels;

/**
 Multiple items can be inserted in the middle.

 @param array The inserted title array.
 @param indexes The inserted indexes.
 */
- (void)insertTitleArray:(NSArray<NSString*> *)array atIndexes:(NSIndexSet *)indexes;


/**
 Multiple items can be added to the end.

 @param array The added title array.
 */
- (void)addTitleArray:(NSArray<NSString*>*)array;

/**
 * Set automatic scrolling to the specified subscript position. Note: Items are displayed in scrolling mode, and the indicator bar stays in the same position.
 * The value is the same as that of selectedSegmentIndex (indicating the index of the selected segment) by default.
 */
- (void)autoScrollToIndex:(NSInteger)index;

- (BOOL)segmentItemIsInVisualAear:(NSInteger)index;

@end


@interface AUSegmentItemModel : NSObject

@property(nonatomic, copy) NSString *title;
@property(nonatomic, copy) UIImage *img;
@property(nonatomic, copy) NSString *imgId;
@property(nonatomic, copy) NSString *badgeNumber;
@property(nonatomic, copy) NSString *badgeWidgetId;
@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.
@property(nonatomic, strong) NSDictionary *extendInfo; // The extended field.

@end


@interface AUSegment (ItemModel)



/**
 * The initialization function for version 2.
 * @param frame     The frame.
 * @param menus     The item array.
 */
- (instancetype) initWithFrame:(CGRect)frame menus:(NSArray<AUSegmentItemModel *>*)menus;

/**
 Control items can be updated.

 @param items   The array of items that need to be updated, mainly for adding or deleting model data or updating all existing model data.
 */
- (void)updateItems:(NSArray<AUSegmentItemModel *>*)items;

/**
 Control items can be updated.

 @param items   Delete existing item data and replace it with new item data.
 */
- (void)updateItemModel:(AUSegmentItemModel *)model
                atIndex:(NSInteger)index;

@end


// The action button, plus sign (+) by default, is displayed on the right.
@interface AUSegment (AUActionIcon)

- (void)showActionIcon:(BOOL)showIcon target:(id)target action:(SEL)action;

@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:

      NSArray *testArray1 = @[@"tab1",@"tab2",@"tab3",@"tab4",@"tab5",@"tab6",@"tab7",@"tab8"];
          AUSegment *segment = [[AUSegment alloc] initWithFrame:CGRectMake(0, 300, self.view.width, 44) titles:testArray1];
          segment.delegate = self;
          [self.view addSubview:segment];
    
              // The callback.
              - (void)didSegmentValueChanged:(AUSegment*)segmentControl {
          NSLog(@"AUSegmented switched");
      }
  • Segment controls with red dot:

      NSMutableArray *array = [[NSMutableArray alloc] init];
      for (int i=0; i<7; i++)
      {
          AUSegmentItemModel *model = [[AUSegmentItemModel alloc] init];
          model.title = [NSString stringWithFormat:@"Option %d", i];
          if (i == 0)
          {
              model.badgeNumber = @".";
          }
          if (i == 1)
          {
              model.badgeNumber = @"new";
          }
          if (i == 6)
          {
              model.badgeNumber = @"6";
          }
          model.badgeReserved = YES;
          [array addObject:model];
      }
      AUSegment *segment2 = [[AUSegment alloc] initWithFrame:CGRectMake(0, topMargin, self.view.width, 44) menus:array];
      [self.view addSubview:segment2];
      [segment2 autoScrollToIndex:6];
      segment2.backgroundColor = [UIColor whiteColor];
      [segment2 showActionIcon:YES target:self action:@selector(clickActionIcon:)];