前言

NS_CLASS_AVAILABLE_IOS(2_0) @interface UIPageControl : UIControl 
    @available(iOS 2.0, *)       public class UIPageControl : UIControl
    NS_CLASS_AVAILABLE_IOS(2_0) @interface UIPageControl : UIControl 
    @available(iOS 2.0, *)       public class UIPageControl : UIControl
  • iPhone 和 iPad 都是通过页控件来展示多个桌面，很多 App 在第一次使用时也会使用页控件来介绍自己的功能，页控件的交互效果非常好，适用于把几个简单的页面充分展示出来。

1、UIPageControl 的创建

  • Objective-C
// 实例化页控制器
    UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 0,  300, 30)];

    // 添加到窗口中
    [self.view addSubview:pageControl];

    // 设置位置
    pageControl.center = CGPointMake(self.view.bounds.size.width / 2, 
                                     self.view.bounds.size.height - 50);            
    // 设置个数
    pageControl.numberOfPages = 15;
    // 实例化页控制器
    UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 0,  300, 30)];

    // 添加到窗口中
    [self.view addSubview:pageControl];

    // 设置位置
    pageControl.center = CGPointMake(self.view.bounds.size.width / 2, 
                                     self.view.bounds.size.height - 50);            
    // 设置个数
    pageControl.numberOfPages = 15;
  • Swift
// 实例化页控制器
    let pageControl = UIPageControl(frame: CGRectMake(0, 0,  300, 30))

    // 添加到窗口中
    self.view.addSubview(pageControl)

    // 设置位置
    pageControl.center = CGPointMake(self.view.bounds.size.width / 2, 
                                     self.view.bounds.size.height - 50)

    // 设置个数
    pageControl.numberOfPages = 15
    // 实例化页控制器
    let pageControl = UIPageControl(frame: CGRectMake(0, 0,  300, 30))

    // 添加到窗口中
    self.view.addSubview(pageControl)

    // 设置位置
    pageControl.center = CGPointMake(self.view.bounds.size.width / 2, 
                                     self.view.bounds.size.height - 50)

    // 设置个数
    pageControl.numberOfPages = 15

2、UIPageControl 的设置

  • Objective-C
// 设置 frame
    /*
        高度设置无效
    */
    pageControl.frame = CGRectMake(10, 200, 10, 0);

    // 设置位置
    pageControl.center = CGPointMake(self.view.bounds.size.width / 2, 
                                     self.view.bounds.size.height - 50);

    // 设置个数
    pageControl.numberOfPages = 15;

    // 设置颜色

        // 当前页面小圆点的颜色
        pageControl.currentPageIndicatorTintColor = [UIColor greenColor];

        // 其它页面小圆点的颜色
        pageControl.pageIndicatorTintColor = [UIColor redColor];

    // 设置当前页
    /*
        设置高亮显示点
    */
    pageControl.currentPage = 0;

    // 设置只有一页时是否隐藏页码指示器
    /*
        default is NO
    */
    pageControl.hidesForSinglePage = YES;

    // 设置是否可点击
    /*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    pageControl.userInteractionEnabled = YES;

    // 添加点击触发事件 
    /*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    [pageControl addTarget:self action:@selector(pageControlClick:) 
                      forControlEvents:UIControlEventValueChanged];
    // 设置 frame
    /*
        高度设置无效
    */
    pageControl.frame = CGRectMake(10, 200, 10, 0);

    // 设置位置
    pageControl.center = CGPointMake(self.view.bounds.size.width / 2, 
                                     self.view.bounds.size.height - 50);

    // 设置个数
    pageControl.numberOfPages = 15;

    // 设置颜色

        // 当前页面小圆点的颜色
        pageControl.currentPageIndicatorTintColor = [UIColor greenColor];

        // 其它页面小圆点的颜色
        pageControl.pageIndicatorTintColor = [UIColor redColor];

    // 设置当前页
    /*
        设置高亮显示点
    */
    pageControl.currentPage = 0;

    // 设置只有一页时是否隐藏页码指示器
    /*
        default is NO
    */
    pageControl.hidesForSinglePage = YES;

    // 设置是否可点击
    /*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    pageControl.userInteractionEnabled = YES;

    // 添加点击触发事件 
    /*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    [pageControl addTarget:self action:@selector(pageControlClick:) 
                      forControlEvents:UIControlEventValueChanged];
  • Swift
// 设置 frame
    /*
        高度设置无效
    */
    pageControl.frame = CGRectMake(10, 200, 10, 0)

    // 设置位置
    pageControl.center = CGPointMake(self.view.bounds.size.width / 2, 
                                     self.view.bounds.size.height - 50)

    // 设置个数
    pageControl.numberOfPages = 15

    // 设置颜色

        // 当前页面小圆点的颜色
        pageControl.currentPageIndicatorTintColor = UIColor.greenColor()

        // 其它页面小圆点的颜色
        pageControl.pageIndicatorTintColor = UIColor.redColor()

    // 设置当前页
    /*
        设置高亮显示点
    */
    pageControl.currentPage = 0

    // 设置只有一页时是否隐藏页码指示器
    /*
        default is false
    */
    pageControl.hidesForSinglePage = true

    // 设置是否可点击
    /*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    pageControl.userInteractionEnabled = true

    // 添加点击触发事件
    /*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    pageControl.addTarget(self, action: #selector(UiPageViewController1.pageControlClick(_:)), 
                      forControlEvents: .ValueChanged)
    // 设置 frame
    /*
        高度设置无效
    */
    pageControl.frame = CGRectMake(10, 200, 10, 0)

    // 设置位置
    pageControl.center = CGPointMake(self.view.bounds.size.width / 2, 
                                     self.view.bounds.size.height - 50)

    // 设置个数
    pageControl.numberOfPages = 15

    // 设置颜色

        // 当前页面小圆点的颜色
        pageControl.currentPageIndicatorTintColor = UIColor.greenColor()

        // 其它页面小圆点的颜色
        pageControl.pageIndicatorTintColor = UIColor.redColor()

    // 设置当前页
    /*
        设置高亮显示点
    */
    pageControl.currentPage = 0

    // 设置只有一页时是否隐藏页码指示器
    /*
        default is false
    */
    pageControl.hidesForSinglePage = true

    // 设置是否可点击
    /*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    pageControl.userInteractionEnabled = true

    // 添加点击触发事件
    /*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    pageControl.addTarget(self, action: #selector(UiPageViewController1.pageControlClick(_:)), 
                      forControlEvents: .ValueChanged)

3、页控制器小圆点随视图滚动

  • Objective-C
  • 页控制器小圆点随视图滚动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

        UIPageControl *pageControl = (id)[self.view viewWithTag:200];

        // 计算当前页数
        /*
            小数四舍五入为整数：(int)(小数 + 0.5)
                0.3 > (int)(0.3 + 0.5) > 0
                0.6 > (int)(0.6 + 0.5) > 1
        */
        int pageNum = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);

        // 设置当前页
        pageControl.currentPage = pageNum;
    }
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {

        UIPageControl *pageControl = (id)[self.view viewWithTag:200];

        // 计算当前页数
        /*
            小数四舍五入为整数：(int)(小数 + 0.5)
                0.3 > (int)(0.3 + 0.5) > 0
                0.6 > (int)(0.6 + 0.5) > 1
        */
        int pageNum = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);

        // 设置当前页
        pageControl.currentPage = pageNum;
    }
  • 视图随页控制器小圆点滚动
/*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    - (void)pageControlClick:(UIPageControl *)pageControl {

        UIScrollView *scrollView = (id)[self.view viewWithTag:100];

        // 计算点击的页面
        CGFloat pageOffsetX = scrollView.frame.size.width * pageControl.currentPage;

        // 设置 scrollView 的偏移量
        scrollView.contentOffset = CGPointMake(pageOffsetX, 0);
    }
    /*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    - (void)pageControlClick:(UIPageControl *)pageControl {

        UIScrollView *scrollView = (id)[self.view viewWithTag:100];

        // 计算点击的页面
        CGFloat pageOffsetX = scrollView.frame.size.width * pageControl.currentPage;

        // 设置 scrollView 的偏移量
        scrollView.contentOffset = CGPointMake(pageOffsetX, 0);
    }
  • Swift
  • 页控制器小圆点随视图滚动
func scrollViewDidScroll(scrollView: UIScrollView) {

        let pageControl = self.view.viewWithTag(200) as! UIPageControl

        // 计算当前页数
        /*
            小数四舍五入为整数：Int(小数 + 0.5)
                0.3 > (int)(0.3 + 0.5) > 0
                0.6 > (int)(0.6 + 0.5) > 1
        */
        let pageNum = Int(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5)

        // 设置当前页
        pageControl.currentPage = pageNum
    }
    func scrollViewDidScroll(scrollView: UIScrollView) {

        let pageControl = self.view.viewWithTag(200) as! UIPageControl

        // 计算当前页数
        /*
            小数四舍五入为整数：Int(小数 + 0.5)
                0.3 > (int)(0.3 + 0.5) > 0
                0.6 > (int)(0.6 + 0.5) > 1
        */
        let pageNum = Int(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5)

        // 设置当前页
        pageControl.currentPage = pageNum
    }
  • 视图随页控制器小圆点滚动
/*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    func pageControlClick(pageControl:UIPageControl) {

        let scrollView = self.view.viewWithTag(100) as! UIScrollView

        // 计算点击的页面
        let pageOffsetX = scrollView.frame.size.width * CGFloat(pageControl.currentPage)

        // 设置 scrollView 的偏移量
        scrollView.contentOffset = CGPointMake(pageOffsetX, 0)
    }
    /*
        点击的是页控制器的左边或右边，依次左移或右移，具体点击某个点时没有反应
    */
    func pageControlClick(pageControl:UIPageControl) {

        let scrollView = self.view.viewWithTag(100) as! UIScrollView

        // 计算点击的页面
        let pageOffsetX = scrollView.frame.size.width * CGFloat(pageControl.currentPage)

        // 设置 scrollView 的偏移量
        scrollView.contentOffset = CGPointMake(pageOffsetX, 0)
    }

4、Storyboard 中设置

  • 在 Storyboard 场景中设置
  • Page View Controller 设置

Navigation

分页的方向，水平或垂直

Transition Style

翻页的样式，书卷翻页或滑动翻页

Page Spacing

页面间距，只有滑动翻页样式有效

Spine Location

书脊位置，只有书卷翻页样式有效

-- Double Sided

  • Page Control 设置

Pages

页面数和当前页

Behavior

-- Hides for Single Page

单页面时隐藏

-- Defers Page Display

延缓页面显示

Tint Color

页面指示器的颜色

Current Page

当前页面的指示器的颜色

  • 在 Storyboard 场景绑定的 Controller 中设置
  • pageViewController 的实例化与要显示的页面（ViewControllers）都需在代码中实现。
// 页面指示器默认为白色，不设置颜色显示不出来
    UIPageControl *pageControl = [UIPageControl appearance];
    // 页面指示器默认为白色，不设置颜色显示不出来
    UIPageControl *pageControl = [UIPageControl appearance];