iOS UIPageControl和UISegmentedControl控件

1. UIPageControl控件

UIPageControl控件提供一行点来提示当前显示的多个页面中的哪一页。

1.1 主要属性

// 小白点的数量
@property (nonatomic, assign) NSInteger numberOfPages;
// 当前选中的点
@property (nonatomic, assign) NSInteger currentPage;

// 未选中小白点的颜色
@property (nullable, nonatomic, strong) UIColor *pageIndicatorTintColor;
// 当前选中小白点的颜色
@property (nullable, nonatomic, strong) UIColor *currentPageIndicatorTintColor;

// 只有一个页面时隐藏控件，默认是NO
@property (nonatomic) BOOL hidesForSinglePage;

设置点的数量和颜色，

UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:rect];
pageControl.pageIndicatorTintColor = [UIColor grayColor];
pageControl.currentPageIndicatorTintColor = [UIColor magentaColor];
pageControl.numberOfPages = 6;
pageControl.currentPage = 2;

显示如下

1.2 iOS14新特性

背景样式UIPageControlBackgroundStyle

typedef NS_ENUM(NSInteger, UIPageControlBackgroundStyle) {
    /// The default background style that adapts based on the current interaction state.
    UIPageControlBackgroundStyleAutomatic  = 0,
    /// The background style that shows a full background regardless of the interaction
    UIPageControlBackgroundStyleProminent  = 1,
    /// The background style that shows a minimal background regardless of the interaction
    UIPageControlBackgroundStyleMinimal    = 2,
}

UIPageControlBackgroundStyleProminent为控件添加背景，显示如下

交互方式UIPageControlInteractionState

typedef NS_ENUM(NSInteger, UIPageControlInteractionState) {
    /// The default interaction state, where no interaction has occured.
    UIPageControlInteractionStateNone        = 0,
    /// The interaction state for which the page was changed via a single, discrete interaction.
    UIPageControlInteractionStateDiscrete    = 1,
    /// The interaction state for which the page was changed via a continuous interaction.
    UIPageControlInteractionStateContinuous  = 2,
}

交互方式有两种离散和连续,通过设置属性allowsContinuousInteraction修改，默认是YES

离散（UIPageControlInteractionStateDiscrete），每次只能移动一格

连续（UIPageControlInteractionStateContinuous），可以通过拖拽快速移动

自定义样式

UIPageControl还可以自定义小圆点，使用图片替代

属性preferredIndicatorImage可以自定义图片

或者通过setIndicatorImage: forPage:方法对不同位置的自定义图片

1.3 监听点击事件

[PageControl addTarget:self action:@selector(onPageControlValueChange:) 
        forControlEvents:UIControlEventValueChanged];

onPageControlValueChange:方法监听

- (void)onPageControlValueChange:(UIPageControl *)sender {
    NSLog(@"currentPage = %ld", sender.currentPage);
}

2. UISegmentedControl控件

UISegmentedControl控件用于界面之间的逻辑切换。

2.1 主要属性

// 默认选择项
@property(nonatomic) NSInteger selectedSegmentIndex;
// 选中项背景色
@property(nullable, nonatomic, strong) UIColor *selectedSegmentTintColor;

// 选中后是否自动释放，默认NO
@property(nonatomic,getter=isMomentary) BOOL momentary; 
// 是否根据内容定分段宽度，默认是NO
@property(nonatomic) BOOL apportionsSegmentWidthsByContent;
// 选项数量
@property(nonatomic,readonly) NSUInteger numberOfSegments;

示例代码

NSArray *titleArray = @[@"东", @"南", @"西", @"北", @"这个选项有点长"];

UISegmentedControl *normalSegmentedControl = [[UISegmentedControl alloc] initWithItems:titleArray];
normalSegmentedControl.frame = CGRectMake(10, 100, [UIScreen mainScreen].bounds.size.width-20 , 44);
normalSegmentedControl.selectedSegmentIndex = 1;
[self.view addSubview:normalSegmentedControl];

UISegmentedControl *selectSegmentedControl = [[UISegmentedControl alloc] initWithItems:titleArray];
selectSegmentedControl.frame = CGRectMake(10, 180, [UIScreen mainScreen].bounds.size.width-20 , 44);
selectSegmentedControl.selectedSegmentIndex = 1;
selectSegmentedControl.selectedSegmentTintColor = [UIColor magentaColor];
[self.view addSubview:selectSegmentedControl];

UISegmentedControl *momentarySegmentedControl = [[UISegmentedControl alloc] initWithItems:titleArray];
momentarySegmentedControl.frame = CGRectMake(10, 260, [UIScreen mainScreen].bounds.size.width-20 , 44);
momentarySegmentedControl.momentary = YES;
[self.view addSubview:momentarySegmentedControl];

UISegmentedControl *apportionsSegmentedControl = [[UISegmentedControl alloc] initWithItems:titleArray];
apportionsSegmentedControl.frame = CGRectMake(10, 340, [UIScreen mainScreen].bounds.size.width-20 , 44);
apportionsSegmentedControl.selectedSegmentIndex = 1;
apportionsSegmentedControl.apportionsSegmentWidthsByContent = YES;
[self.view addSubview:apportionsSegmentedControl];

显示如下

2.2 主要方法

// 在指定索引设置标题
- (void)setTitle:(nullable NSString *)title forSegmentAtIndex:(NSUInteger)segment;
// 在指定索引设置图片
- (void)setImage:(nullable UIImage *)image forSegmentAtIndex:(NSUInteger)segment;
// 在指定索引设置宽度
- (void)setWidth:(CGFloat)width forSegmentAtIndex:(NSUInteger)segment;
// 在指定索引设置偏移
- (void)setContentOffset:(CGSize)offset forSegmentAtIndex:(NSUInteger)segment;

// 设置背景色
- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics;
// 设置分割线
- (void)setDividerImage:(nullable UIImage *)dividerImage forLeftSegmentState:(UIControlState)leftState rightSegmentState:(UIControlState)rightState barMetrics:(UIBarMetrics)barMetrics;

// 设置标题的文本属性
- (void)setTitleTextAttributes:(nullable NSDictionary<NSAttributedStringKey,id> *)attributes forState:(UIControlState)state;

示例代码

NSArray *titleArray = @[@"东", @"南", @"西", @"北", @"这个选项有点长"];

UISegmentedControl *normalSegmentedControl = [[UISegmentedControl alloc] initWithItems:titleArray];
normalSegmentedControl.frame = CGRectMake(10, 100, [UIScreen mainScreen].bounds.size.width-20 , 44);
[self.view addSubview:normalSegmentedControl];

[normalSegmentedControl setTitle:@"选项1" forSegmentAtIndex:0];
[normalSegmentedControl setImage:[UIImage imageNamed:@"icon_money"] forSegmentAtIndex:1];
[normalSegmentedControl setContentOffset:CGSizeMake(10, 10) forSegmentAtIndex:2];
[normalSegmentedControl setWidth:120 forSegmentAtIndex:4];

[normalSegmentedControl setBackgroundImage:[[UIColor whiteColor] colorToImage]
            forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[normalSegmentedControl setBackgroundImage:[[UIColor blueColor] colorToImage]
            forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
[normalSegmentedControl setDividerImage:[[UIColor blueColor] colorToImage]
            forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal
            barMetrics:UIBarMetricsDefault];
[normalSegmentedControl setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor blueColor]}
            forState:UIControlStateNormal];
[normalSegmentedControl setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor]}
            forState:UIControlStateSelected];

normalSegmentedControl.layer.borderWidth = 1;
normalSegmentedControl.layer.borderColor = [UIColor blueColor].CGColor;

normalSegmentedControl.selectedSegmentIndex = 0;

显示如下

添加删除选项

// 在指定索引插入一个选项并设置题目
- (void)insertSegmentWithTitle:(nullable NSString *)title atIndex:(NSUInteger)segment animated:(BOOL)animated;
// 在指定索引插入一个选项并设置图片
- (void)insertSegmentWithImage:(nullable UIImage *)image atIndex:(NSUInteger)segment animated:(BOOL)animated;

// 删除指定索引选项
- (void)removeSegmentAtIndex:(NSUInteger)segment animated:(BOOL)animated;
// 删除所有选项
- (void)removeAllSegments;

2.3 监听点击事件

[UISegmentedControl addTarget:self action:@selector(onSegmentedControlValueChange:) 
        forControlEvents:UIControlEventValueChanged];
}

onSegmentedControlValueChange:方法监听

- (void)onSegmentedControlValueChange:(UISegmentedControl *)sender {
    NSLog(@"selectedSegmentIndex = %ld", sender.selectedSegmentIndex);
}