前言

    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;

• 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

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];

• 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)

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

• Objective-C

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

        - (void)scrollViewDidScroll:(UIScrollView *)scrollView {UIPageControl *pageControl = (id)[self.view viewWithTag:200];// 计算当前页数/*小数四舍五入为整数：(int)(小数 + 0.5)0.3 > (int)(0.3 + 0.5) > 00.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);}

• Swift

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

        func scrollViewDidScroll(scrollView: UIScrollView) {let pageControl = self.view.viewWithTag(200) as! UIPageControl// 计算当前页数/*小数四舍五入为整数：Int(小数 + 0.5)0.3 > (int)(0.3 + 0.5) > 00.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)}

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];