UIPageControl

UIPageControl 是一个页面控制器，会在页面上显示为几个小圆点，常常和 UIScrollView 配合使用，实现轮播器之类的效果。

下面会展示一个 UIPageControl 的使用示例。

目录结构

• PageViewController
  PageViewController 的父类是 UIViewController，它是一个容器视图控制器，用于处理两个子视图之间的切换。
• FirstSubViewController
  FirstSubViewController 的父类也是 UIViewController，褐色子视图。
• SecondSubViewController
  SecondSubViewController 的父类也是 UIViewController，紫色子视图。

视图层次结构

各模块代码

两个子视图只是简单地设置了一下背景颜色方便识别。

PageViewController

PageControllerViewController.m 文件代码如下。

每一行都有很详细的注释。

#import "PageViewController.h"

// Framework
#import <YYKit.h>

// Controller
#import "FirstSubViewController.h"
#import "SecondSubViewController.h"


@interface PageViewController () <UIScrollViewDelegate>

// 滚动视图，作为容器视图
@property (nonatomic, strong) UIScrollView *scrollerView;
@property (nonatomic, strong) FirstSubViewController *firstVC;
@property (nonatomic, strong) SecondSubViewController *secondVC;

// 控制翻页的属性，使用它来控制滚动视图的翻页。通过该组件中的小白点，来观察当前页面的位置
@property (nonatomic, strong) UIPageControl *pageControl;

// 状态属性，用来标志页面拖动状态
@property (nonatomic, assign) BOOL isPageControlUsed;

@end

@implementation PageViewController


#pragma mark - Lifecycle

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 添加容器视图
    [self.view addSubview:self.scrollerView];
    // 添加页面控制小圆点
    [self.view addSubview:self.pageControl];
    
    // 首先获取当前屏幕的尺寸
    CGRect screenFrame = [[UIScreen mainScreen] bounds];

    // 创建第一个视图控制器对象的实例
    _firstVC = [[FirstSubViewController alloc] init];
    // 设置坐标原点的纵向值为0
    screenFrame.origin.y = 0;
    // 设置第一个视图控制器对象的显示区域
    _firstVC.view.frame = screenFrame;
    
    // 创建第二个视图控制器对象的实例
    _secondVC = [[SecondSubViewController alloc] init];
    // 设置坐标原点的X值为屏幕宽度，即第二个视图控制器对象显示在屏幕之外(右侧)
    screenFrame.origin.x = screenFrame.size.width;
    // 设置第二个视图控制器对象的显示区域
    _secondVC.view.frame = screenFrame;
    
    // 将两个视图添加到滚动视图对象里
    [self.scrollerView addSubview:_firstVC.view];
    [self.scrollerView addSubview:_secondVC.view];
}


#pragma mark - Custom Accessors

- (UIScrollView *)scrollerView {
    if (!_scrollerView) {
        // 初始化滚动视图对象，并设置滚动视图的尺寸信息
        _scrollerView = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
        // 设置滚动视图为分页模式，即每滚动一次就是一页
        _scrollerView.pagingEnabled = YES;
        // 我们有两个页面，所以将滚动视图的“取景范围”的宽度，设置为两倍页面宽度
        _scrollerView.contentSize = CGSizeMake(kScreenWidth * 2, kScreenHeight);
        // 设置滚动视图的背景色为白色
        _scrollerView.backgroundColor = [UIColor whiteColor];
        // 设置滚动视图对象的代理为当前类，这样就可以在当前文件中，编写代理方法，以捕捉滚动视图的相关动作
        _scrollerView.delegate = self;
    }
    return _scrollerView;
}

- (UIPageControl *)pageControl {
    if (!_pageControl) {
        // 创建一个区域，显示页面控制器对象
        int pcHeight = 50;
        // 设置页面控制器对象的显示区域
        CGRect rect = CGRectMake(0, kScreenHeight - pcHeight * 2, kScreenWidth, pcHeight);
        
        // 初始化页面控制器对象
        _pageControl = [[UIPageControl alloc] initWithFrame:rect];
        // 设置总页数
        _pageControl.numberOfPages = 2;
        // 设置当前页编号
        _pageControl.currentPage = 0;
        // 设置页面控制器对象的背景颜色为透明色
        _pageControl.backgroundColor = [UIColor clearColor];
        // 给页面控制器对象，添加监听页面切换事件的方法
        [_pageControl addTarget:self
                         action:@selector(pageControlDidChanged:)
                    forControlEvents:UIControlEventValueChanged];
    }
    return _pageControl;
}


#pragma mark - IBActions

// 创建监听页面切换事件的方法
- (void)pageControlDidChanged:(id)sender {
    // 获得当前页面控制器对象的显示页码
    NSInteger currentPage = self.pageControl.currentPage;
    // 获得滚动视图当前显示区域
    CGRect frame = self.scrollerView.frame;
    // 根据页面控制器对象的当前页码，计算滚动视图在下一页的显示区域
    frame.origin.x = frame.size.width * currentPage;
    frame.origin.y = 0;
    
    // 滚动视图到目标位置
    [self.scrollerView scrollRectToVisible:frame animated:YES];
    // 设置通过页面控制器对象切换页面
    _isPageControlUsed = YES;
}


#pragma mark - UIScrollViewDelegate

// 创建监听滚动视图的滚动事件的代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    // 如果是通过【页面控制器对象切换】，则不执行后面的代码
    if (_isPageControlUsed) {
        return;
    }
    
    // 如果是【手指滑动切换】，要同步当前视图所对应的页面控制器页码值
    // 获得滚动视图的宽度值
    CGFloat pageWidth = self.scrollerView.frame.size.width;
    // 根据滚动视图的宽度值和横向位移量，计算当前页码
    // floor() 向下取整，得出 0 或者 1
    int page = floor((self.scrollerView.contentOffset.x - pageWidth/2) / pageWidth) + 1;
    // 设置页面控制器的显示页码，为通过计算所得的页码
    self.pageControl.currentPage = page;
}

// 创建监听滚动视图的滚动减速事件的代理方法。
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    // 重置标识变量的默认值
    _isPageControlUsed = NO;
}

@end

示例效果