UIPageControl 是一個(gè)頁(yè)面控制器绑改，會(huì)在頁(yè)面上顯示為幾個(gè)小圓點(diǎn)，常常和 UIScrollView 配合使用寸爆，實(shí)現(xiàn)輪播器之類的效果替废。
下面會(huì)展示一個(gè) UIPageControl 的使用示例。
目錄結(jié)構(gòu)
-
PageViewController
PageViewController 的父類是 UIViewController绎晃，它是一個(gè)容器視圖控制器蜜唾，用于處理兩個(gè)子視圖之間的切換。 -
FirstSubViewController
FirstSubViewController 的父類也是 UIViewController庶艾，褐色子視圖袁余。 -
SecondSubViewController
SecondSubViewController 的父類也是 UIViewController，紫色子視圖咱揍。
視圖層次結(jié)構(gòu)
各模塊代碼
兩個(gè)子視圖只是簡(jiǎn)單地設(shè)置了一下背景顏色方便識(shí)別颖榜。
PageViewController
PageControllerViewController.m 文件代碼如下。
每一行都有很詳細(xì)的注釋煤裙。
#import "PageViewController.h"
// Framework
#import <YYKit.h>
// Controller
#import "FirstSubViewController.h"
#import "SecondSubViewController.h"
@interface PageViewController () <UIScrollViewDelegate>
// 滾動(dòng)視圖掩完，作為容器視圖
@property (nonatomic, strong) UIScrollView *scrollerView;
@property (nonatomic, strong) FirstSubViewController *firstVC;
@property (nonatomic, strong) SecondSubViewController *secondVC;
// 控制翻頁(yè)的屬性，使用它來(lái)控制滾動(dòng)視圖的翻頁(yè)硼砰。通過(guò)該組件中的小白點(diǎn)且蓬，來(lái)觀察當(dāng)前頁(yè)面的位置
@property (nonatomic, strong) UIPageControl *pageControl;
// 狀態(tài)屬性，用來(lái)標(biāo)志頁(yè)面拖動(dòng)狀態(tài)
@property (nonatomic, assign) BOOL isPageControlUsed;
@end
@implementation PageViewController
#pragma mark - Lifecycle
- (void)viewDidLoad {
[super viewDidLoad];
// 添加容器視圖
[self.view addSubview:self.scrollerView];
// 添加頁(yè)面控制小圓點(diǎn)
[self.view addSubview:self.pageControl];
// 首先獲取當(dāng)前屏幕的尺寸
CGRect screenFrame = [[UIScreen mainScreen] bounds];
// 創(chuàng)建第一個(gè)視圖控制器對(duì)象的實(shí)例
_firstVC = [[FirstSubViewController alloc] init];
// 設(shè)置坐標(biāo)原點(diǎn)的縱向值為0
screenFrame.origin.y = 0;
// 設(shè)置第一個(gè)視圖控制器對(duì)象的顯示區(qū)域
_firstVC.view.frame = screenFrame;
// 創(chuàng)建第二個(gè)視圖控制器對(duì)象的實(shí)例
_secondVC = [[SecondSubViewController alloc] init];
// 設(shè)置坐標(biāo)原點(diǎn)的X值為屏幕寬度题翰，即第二個(gè)視圖控制器對(duì)象顯示在屏幕之外(右側(cè))
screenFrame.origin.x = screenFrame.size.width;
// 設(shè)置第二個(gè)視圖控制器對(duì)象的顯示區(qū)域
_secondVC.view.frame = screenFrame;
// 將兩個(gè)視圖添加到滾動(dòng)視圖對(duì)象里
[self.scrollerView addSubview:_firstVC.view];
[self.scrollerView addSubview:_secondVC.view];
}
#pragma mark - Custom Accessors
- (UIScrollView *)scrollerView {
if (!_scrollerView) {
// 初始化滾動(dòng)視圖對(duì)象恶阴，并設(shè)置滾動(dòng)視圖的尺寸信息
_scrollerView = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// 設(shè)置滾動(dòng)視圖為分頁(yè)模式，即每滾動(dòng)一次就是一頁(yè)
_scrollerView.pagingEnabled = YES;
// 我們有兩個(gè)頁(yè)面遍愿，所以將滾動(dòng)視圖的“取景范圍”的寬度存淫，設(shè)置為兩倍頁(yè)面寬度
_scrollerView.contentSize = CGSizeMake(kScreenWidth * 2, kScreenHeight);
// 設(shè)置滾動(dòng)視圖的背景色為白色
_scrollerView.backgroundColor = [UIColor whiteColor];
// 設(shè)置滾動(dòng)視圖對(duì)象的代理為當(dāng)前類，這樣就可以在當(dāng)前文件中沼填，編寫代理方法桅咆，以捕捉滾動(dòng)視圖的相關(guān)動(dòng)作
_scrollerView.delegate = self;
}
return _scrollerView;
}
- (UIPageControl *)pageControl {
if (!_pageControl) {
// 創(chuàng)建一個(gè)區(qū)域，顯示頁(yè)面控制器對(duì)象
int pcHeight = 50;
// 設(shè)置頁(yè)面控制器對(duì)象的顯示區(qū)域
CGRect rect = CGRectMake(0, kScreenHeight - pcHeight * 2, kScreenWidth, pcHeight);
// 初始化頁(yè)面控制器對(duì)象
_pageControl = [[UIPageControl alloc] initWithFrame:rect];
// 設(shè)置總頁(yè)數(shù)
_pageControl.numberOfPages = 2;
// 設(shè)置當(dāng)前頁(yè)編號(hào)
_pageControl.currentPage = 0;
// 設(shè)置頁(yè)面控制器對(duì)象的背景顏色為透明色
_pageControl.backgroundColor = [UIColor clearColor];
// 給頁(yè)面控制器對(duì)象坞笙，添加監(jiān)聽(tīng)頁(yè)面切換事件的方法
[_pageControl addTarget:self
action:@selector(pageControlDidChanged:)
forControlEvents:UIControlEventValueChanged];
}
return _pageControl;
}
#pragma mark - IBActions
// 創(chuàng)建監(jiān)聽(tīng)頁(yè)面切換事件的方法
- (void)pageControlDidChanged:(id)sender {
// 獲得當(dāng)前頁(yè)面控制器對(duì)象的顯示頁(yè)碼
NSInteger currentPage = self.pageControl.currentPage;
// 獲得滾動(dòng)視圖當(dāng)前顯示區(qū)域
CGRect frame = self.scrollerView.frame;
// 根據(jù)頁(yè)面控制器對(duì)象的當(dāng)前頁(yè)碼岩饼，計(jì)算滾動(dòng)視圖在下一頁(yè)的顯示區(qū)域
frame.origin.x = frame.size.width * currentPage;
frame.origin.y = 0;
// 滾動(dòng)視圖到目標(biāo)位置
[self.scrollerView scrollRectToVisible:frame animated:YES];
// 設(shè)置通過(guò)頁(yè)面控制器對(duì)象切換頁(yè)面
_isPageControlUsed = YES;
}
#pragma mark - UIScrollViewDelegate
// 創(chuàng)建監(jiān)聽(tīng)滾動(dòng)視圖的滾動(dòng)事件的代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 如果是通過(guò)【頁(yè)面控制器對(duì)象切換】荚虚，則不執(zhí)行后面的代碼
if (_isPageControlUsed) {
return;
}
// 如果是【手指滑動(dòng)切換】，要同步當(dāng)前視圖所對(duì)應(yīng)的頁(yè)面控制器頁(yè)碼值
// 獲得滾動(dòng)視圖的寬度值
CGFloat pageWidth = self.scrollerView.frame.size.width;
// 根據(jù)滾動(dòng)視圖的寬度值和橫向位移量籍茧，計(jì)算當(dāng)前頁(yè)碼
// floor() 向下取整版述，得出 0 或者 1
int page = floor((self.scrollerView.contentOffset.x - pageWidth/2) / pageWidth) + 1;
// 設(shè)置頁(yè)面控制器的顯示頁(yè)碼，為通過(guò)計(jì)算所得的頁(yè)碼
self.pageControl.currentPage = page;
}
// 創(chuàng)建監(jiān)聽(tīng)滾動(dòng)視圖的滾動(dòng)減速事件的代理方法寞冯。
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
// 重置標(biāo)識(shí)變量的默認(rèn)值
_isPageControlUsed = NO;
}
@end
示例效果
