iOS

前言

	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];
      
原文地址:https://www.cnblogs.com/QianChia/p/5758294.html