iOS - UIPageViewController

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

前言

    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) > 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);
          }
  • 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 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 设置

      PageView1

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

      PageView2

      Pages 页面数和当前页
      Behavior
      -- Hides for Single Page 单页面时隐藏
      -- Defers Page Display 延缓页面显示
      Tint Color 页面指示器的颜色
      Current Page 当前页面的指示器的颜色
  • 在 Storyboard 场景绑定的 Controller 中设置

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

          // 页面指示器默认为白色,不设置颜色显示不出来
          UIPageControl *pageControl = [UIPageControl appearance];
目录
相关文章
|
iOS开发
iOS UIPageViewController 翻页背景颜色修改
iOS UIPageViewController 翻页背景颜色修改
57 0
|
iOS开发
iOS翻页视图控制器UIPageViewController的应用(二)
iOS翻页视图控制器UIPageViewController的应用
416 0
iOS翻页视图控制器UIPageViewController的应用(二)
|
iOS开发 容器
iOS翻页视图控制器UIPageViewController的应用(一)
iOS翻页视图控制器UIPageViewController的应用
316 0
iOS翻页视图控制器UIPageViewController的应用(一)
|
1月前
|
Java Android开发 Swift
安卓与iOS开发对比:平台选择对项目成功的影响
【10月更文挑战第4天】在移动应用开发的世界中,选择合适的平台是至关重要的。本文将深入探讨安卓和iOS两大主流平台的开发环境、用户基础、市场份额和开发成本等方面的差异,并分析这些差异如何影响项目的最终成果。通过比较这两个平台的优势与挑战,开发者可以更好地决定哪个平台更适合他们的项目需求。
98 1
|
1月前
|
设计模式 安全 Swift
探索iOS开发:打造你的第一个天气应用
【9月更文挑战第36天】在这篇文章中,我们将一起踏上iOS开发的旅程,从零开始构建一个简单的天气应用。文章将通过通俗易懂的语言,引导你理解iOS开发的基本概念,掌握Swift语言的核心语法,并逐步实现一个具有实际功能的天气应用。我们将遵循“学中做,做中学”的原则,让理论知识和实践操作紧密结合,确保学习过程既高效又有趣。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你打开一扇通往iOS开发世界的大门。
|
1月前
|
搜索推荐 IDE API
打造个性化天气应用:iOS开发之旅
【9月更文挑战第35天】在这篇文章中,我们将一起踏上iOS开发的旅程,通过创建一个个性化的天气应用来探索Swift编程语言的魅力和iOS平台的强大功能。无论你是编程新手还是希望扩展你的技能集,这个项目都将为你提供实战经验,帮助你理解从构思到实现一个应用的全过程。让我们开始吧,构建你自己的天气应用,探索更多可能!
61 1
|
2月前
|
IDE Android开发 iOS开发
探索Android与iOS开发的差异:平台选择对项目成功的影响
【9月更文挑战第27天】在移动应用开发的世界中,Android和iOS是两个主要的操作系统平台。每个系统都有其独特的开发环境、工具和用户群体。本文将深入探讨这两个平台的关键差异点,并分析这些差异如何影响应用的性能、用户体验和最终的市场表现。通过对比分析,我们将揭示选择正确的开发平台对于确保项目成功的重要作用。
|
3天前
|
设计模式 前端开发 Swift
探索iOS开发:从初级到高级的旅程
【10月更文挑战第31天】在这篇文章中,我们将一起踏上iOS开发的旅程。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和技巧。我们将从基础开始,逐步深入到更高级的技术和概念。让我们一起探索iOS开发的世界吧!