UIPageViewController 页视图控制器

前言

  • Objective-C

    1
    NS_CLASS_AVAILABLE_IOS(2_0) @interface UIPageControl : UIControl
  • Swift

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

1、UIPageControl 的创建

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 实例化页控制器
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 实例化页控制器
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    // 设置 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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    // 设置 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

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      - (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;
      }
    • 视图随页控制器小圆点滚动

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      /*
      点击的是页控制器的左边或右边,依次左移或右移,具体点击某个点时没有反应
      */
      - (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

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      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
      }
    • 视图随页控制器小圆点滚动

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      /*
      点击的是页控制器的左边或右边,依次左移或右移,具体点击某个点时没有反应
      */
      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 中设置

4.1 在 Storyboard 场景中设置

4.1.1 Page View Controller 设置

PageView1

Navigation 分页的方向,水平或垂直
Transition Style 翻页的样式,书卷翻页或滑动翻页
Page Spacing 页面间距,只有滑动翻页样式有效
Spine Location 书脊位置,只有书卷翻页样式有效
– Double Sided

4.1.2 Page Control 设置

PageView2

Pages 页面数和当前页
Behavior
– Hides for Single Page 单页面时隐藏
– Defers Page Display 延缓页面显示
Tint Color 页面指示器的颜色
Current Page 当前页面的指示器的颜色

4.2 在 Storyboard 场景绑定的 Controller 中设置

  • pageViewController 的实例化与要显示的页面(ViewControllers)都需在代码中实现。

    1
    2
    // 页面指示器默认为白色,不设置颜色显示不出来
    UIPageControl *pageControl = [UIPageControl appearance];
文章目录
  1. 1. 前言
  2. 2. 1、UIPageControl 的创建
  3. 3. 2、UIPageControl 的设置
  4. 4. 3、页控制器小圆点随视图滚动
  5. 5. 4、Storyboard 中设置
    1. 5.1. 4.1 在 Storyboard 场景中设置
      1. 5.1.1. 4.1.1 Page View Controller 设置
      2. 5.1.2. 4.1.2 Page Control 设置
    2. 5.2. 4.2 在 Storyboard 场景绑定的 Controller 中设置
隐藏目录