前言
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 设置
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];