快捷導(dǎo)航

實(shí)例講解iOS中的UIPageViewController翻頁(yè)視圖控制器

更新時(shí)間：2016年06月24日 09:25:04 作者：琿少

UIPageViewController更像是一個(gè)視圖容器,將每頁(yè)不同的ViewController整合,這里我們將以實(shí)例講解iOS中的UIPageViewController翻頁(yè)視圖控制器:

一、引言

UIPageViewController是iOS中少見(jiàn)的動(dòng)畫(huà)視圖控制器之一，通過(guò)它既可以創(chuàng)建類似UIScrollView與UIPageControl結(jié)合的滾屏視圖，也可以創(chuàng)建類似圖書(shū)效果的炫酷翻頁(yè)視圖。

UIPageViewController在iOS 5 SDK中首次引入，它使得開(kāi)發(fā)者可以使用這個(gè)ViewController創(chuàng)建分頁(yè)視圖。在iOS 6中，這個(gè)類有了更新，支持滾動(dòng)過(guò)渡效果。使用Page View，用戶可以方便的通過(guò)手勢(shì)在多個(gè)頁(yè)面之間導(dǎo)航。UIPageViewController并不僅僅用于引導(dǎo)頁(yè)，很多游戲，例如：憤怒的小鳥(niǎo)，就是用Page View來(lái)展示關(guān)卡選擇的頁(yè)面，還有有關(guān)書(shū)籍的應(yīng)用，用這個(gè)類來(lái)顯示書(shū)的頁(yè)面。
UIPageViewController是個(gè)高度可配置的類，你可以進(jìn)行如下配置：

分頁(yè)的方向——水平或垂直
翻頁(yè)的樣式——書(shū)卷翻頁(yè)或者滑動(dòng)翻頁(yè)
書(shū)脊位置——只有書(shū)卷翻頁(yè)樣式有效
頁(yè)面間距——只有滑動(dòng)翻頁(yè)樣式有效，用來(lái)定義頁(yè)面間距（inter-page spacing）

UIPageViewController類似一個(gè)視圖容器，其中每個(gè)具體的視圖由各自的ViewController進(jìn)行維護(hù)管理，UIPageViewController只進(jìn)行協(xié)調(diào)與動(dòng)畫(huà)布置。下圖可以很好的展現(xiàn)出UIPageViewControlelr的使用結(jié)構(gòu)：

201662491745638.png (1013×539)

上圖中，UIPageViewControllerDataSource協(xié)議為UIPageViewController提供數(shù)據(jù)支持，DataSource協(xié)議提供的數(shù)據(jù)來(lái)自各個(gè)ViewContoller自行維護(hù)，UIPageViewControllerDelegate中的回調(diào)可以對(duì)翻頁(yè)動(dòng)作，屏幕旋轉(zhuǎn)動(dòng)作等進(jìn)行監(jiān)聽(tīng)。UIPageViewController把從DataSource中獲取到的視圖數(shù)據(jù)渲染給View用于當(dāng)前視圖控制器的展示。

為了演示，我們會(huì)一起創(chuàng)建一個(gè)簡(jiǎn)單的app。當(dāng)然，我們不會(huì)演示所有的UIPageViewController的配置細(xì)節(jié)，我們會(huì)演示到使用滑動(dòng)翻頁(yè)樣式來(lái)創(chuàng)建一個(gè)引導(dǎo)頁(yè)。不過(guò)別擔(dān)心，有了對(duì)UIPageViewController的基本理解，我相信你能夠去探索其他的特性。

開(kāi)始吧！

二、創(chuàng)建一個(gè)UIPageViewController

首先新建一個(gè)類作為翻頁(yè)視圖控制器中具體每一頁(yè)視圖的控制器，使其繼承于UIViewController：

ModelViewController.h

#import <UIKit/UIKit.h> @interface ModelViewController : UIViewController +(ModelViewController *)creatWithIndex:(int)index; @property(nonatomic,strong)UILabel * indexLabel; @endModelViewController.m

#import "ModelViewController.h" @interface ModelViewController () @end @implementation ModelViewController +(ModelViewController *)creatWithIndex:(int)index{ ModelViewController * con = [[ModelViewController alloc]init]; con.indexLabel = [[UILabel alloc]initWithFrame:CGRectMake(110, 200, 100, 30)]; con.indexLabel.text = [NSString stringWithFormat:@"第%d頁(yè)",index]; [con.view addSubview:con.indexLabel]; return con; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. self.view.backgroundColor = [UIColor redColor]; } @end在工程模板自帶的ViewController.m文件中實(shí)現(xiàn)如下代碼：

#import "ViewController.h" #import "ModelViewController.h" //遵守協(xié)議 @interface ViewController ()<UIPageViewControllerDataSource,UIPageViewControllerDelegate> { //翻頁(yè)視圖控制器對(duì)象 UIPageViewController * _pageViewControl; //數(shù)據(jù)源數(shù)組 NSMutableArray * _dataArray; } @end

@implementation ViewController

- (void)viewDidLoad { [super viewDidLoad]; //進(jìn)行初始化 _pageViewControl = [[UIPageViewController alloc]initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:@{UIPageViewControllerOptionSpineLocationKey:@0,UIPageViewControllerOptionInterPageSpacingKey:@10}]; self.view.backgroundColor = [UIColor greenColor]; //設(shè)置翻頁(yè)視圖的尺寸 _pageViewControl.view.bounds=self.view.bounds; //設(shè)置數(shù)據(jù)源與代理 _pageViewControl.dataSource=self; _pageViewControl.delegate=self; //創(chuàng)建初始界面 ModelViewController * model = [ModelViewController creatWithIndex:1]; //設(shè)置初始界面 [_pageViewControl setViewControllers:@[model] direction:UIPageViewControllerNavigationDirectionReverse animated:YES completion:nil]; //設(shè)置是否雙面展示 _pageViewControl.doubleSided = NO; _dataArray = [[NSMutableArray alloc]init]; [_dataArray addObject:model]; [self.view addSubview:_pageViewControl.view]; } //翻頁(yè)控制器進(jìn)行向前翻頁(yè)動(dòng)作這個(gè)數(shù)據(jù)源方法返回的視圖控制器為要顯示視圖的視圖控制器 - (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController{ int index = (int)[_dataArray indexOfObject:viewController]; if (index==0) { return nil; }else{ return _dataArray[index-1]; } } //翻頁(yè)控制器進(jìn)行向后翻頁(yè)動(dòng)作這個(gè)數(shù)據(jù)源方法返回的視圖控制器為要顯示視圖的視圖控制器 - (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController{ int index = (int)[_dataArray indexOfObject:viewController]; if (index==9) { return nil; }else{ if (_dataArray.count-1>=(index+1)) { return _dataArray[index+1]; }else{ ModelViewController * model = [ModelViewController creatWithIndex:index+2]; [_dataArray addObject:model]; return model; } } } //屏幕旋轉(zhuǎn)觸發(fā)的代理方法 - (UIPageViewControllerSpineLocation) pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation{ return UIPageViewControllerSpineLocationMin; } //設(shè)置分頁(yè)控制器的分頁(yè)數(shù) - (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController { return 10; } //設(shè)置初始的分頁(yè)點(diǎn) - (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController{ return 0; } @end上面創(chuàng)建了最簡(jiǎn)單的翻頁(yè)視圖控制器示例，效果如下圖：

201662491842840.png (240×426)

三、UIPageViewController中方法使用解析

//創(chuàng)建翻頁(yè)視圖控制器對(duì)象 - (instancetype)initWithTransitionStyle:(UIPageViewControllerTransitionStyle)style navigationOrientation:(UIPageViewControllerNavigationOrientation)navigationOrientation options:(nullable NSDictionary<NSString *, id> *)options;上面方法用于創(chuàng)建視圖控制器對(duì)象，其中UIPageViewControllerTransitionStyle參數(shù)設(shè)置翻頁(yè)控制器的風(fēng)格，枚舉如下：

typedef NS_ENUM(NSInteger, UIPageViewControllerTransitionStyle) { UIPageViewControllerTransitionStylePageCurl = 0, //類似于書(shū)本翻頁(yè)效果 UIPageViewControllerTransitionStyleScroll = 1 // 類似于ScrollView的滑動(dòng)效果 };如果設(shè)置為UIPageViewControllerTransitionStyleCurl，翻頁(yè)效果如下圖所示：

201662491859309.png (240×426)

上面初始化方法中的UIPageViewControllerNavigationOrientation屬性設(shè)置翻頁(yè)的方向，枚舉如下：

typedef NS_ENUM(NSInteger, UIPageViewControllerNavigationOrientation) { UIPageViewControllerNavigationOrientationHorizontal = 0,//水平翻頁(yè) UIPageViewControllerNavigationOrientationVertical = 1//豎直翻頁(yè) };options參數(shù)用于設(shè)置翻頁(yè)視圖控制器的配置字典，其可以設(shè)置的配置鍵值如下：

//這個(gè)鍵需要設(shè)置為UIPageViewControllerOptionSpineLocationKey枚舉值對(duì)應(yīng)的NSNumber對(duì)象設(shè)置翻頁(yè)控制器的書(shū)軸后面會(huì)介紹 NSString * const UIPageViewControllerOptionSpineLocationKey; //這個(gè)鍵需要設(shè)置為NSNumber類型設(shè)置每頁(yè)視圖的間距用于滾動(dòng)視圖風(fēng)格的 NSString * const UIPageViewControllerOptionInterPageSpacingKey;下面是UIPageViewController的一些常用屬性與方法：

//設(shè)置數(shù)據(jù)源 @property (nullable, nonatomic, weak) id <UIPageViewControllerDelegate> delegate; //設(shè)置代理 @property (nullable, nonatomic, weak) id <UIPageViewControllerDataSource> dataSource; //獲取翻頁(yè)風(fēng)格 @property (nonatomic, readonly) UIPageViewControllerTransitionStyle transitionStyle; //獲取翻頁(yè)方向 @property (nonatomic, readonly) UIPageViewControllerNavigationOrientation navigationOrientation; //獲取書(shū)軸類型 @property (nonatomic, readonly) UIPageViewControllerSpineLocation spineLocation; //設(shè)置是否雙面顯示 @property (nonatomic, getter=isDoubleSided) BOOL doubleSided; //設(shè)置要顯示的視圖控制器 - (void)setViewControllers:(nullable NSArray<UIViewController *> *)viewControllers direction:(UIPageViewControllerNavigationDirection)direction animated:(BOOL)animated completion:(void (^ __nullable)(BOOL finished))completion;上面只有spineLocation屬性有些難于理解，其枚舉如下：

typedef NS_ENUM(NSInteger, UIPageViewControllerSpineLocation) { //對(duì)于SCrollView類型的滑動(dòng)效果沒(méi)有書(shū)軸會(huì)返回下面這個(gè)枚舉值 UIPageViewControllerSpineLocationNone = 0, //以左邊或者上邊為軸進(jìn)行翻轉(zhuǎn) 界面同一時(shí)間只顯示一個(gè)View UIPageViewControllerSpineLocationMin = 1, //以中間為軸進(jìn)行翻轉(zhuǎn) 界面同時(shí)可以顯示兩個(gè)View UIPageViewControllerSpineLocationMid = 2, //以下邊或者右邊為軸進(jìn)行翻轉(zhuǎn) 界面同一時(shí)間只顯示一個(gè)View UIPageViewControllerSpineLocationMax = 3 };將上面的示例代碼修改幾個(gè)地方如下：

- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. _pageViewControl = [[UIPageViewController alloc]initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl navigationOrientation:UIPageViewControllerNavigationOrientationVertical options:@{UIPageViewControllerOptionSpineLocationKey:@2,UIPageViewControllerOptionInterPageSpacingKey:@10}]; self.view.backgroundColor = [UIColor greenColor]; _pageViewControl.view.bounds=self.view.bounds; _pageViewControl.dataSource=self; _pageViewControl.delegate=self; ModelViewController * model = [ModelViewController creatWithIndex:1]; ModelViewController * model2 = [ModelViewController creatWithIndex:2]; [_pageViewControl setViewControllers:@[model,model2] direction:UIPageViewControllerNavigationDirectionReverse animated:YES completion:nil]; _pageViewControl.doubleSided = YES; _dataArray = [[NSMutableArray alloc]init]; [_dataArray addObject:model]; [self.view addSubview:_pageViewControl.view]; } - (UIPageViewControllerSpineLocation) pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation{ return UIPageViewControllerSpineLocationMid; }運(yùn)行效果如下圖所示：

201662491917434.png (240×426)

四、UIPageViewControllerDataSource中方法解析

//向前翻頁(yè)展示的ViewController - (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController; //向后翻頁(yè)展示的ViewController - (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController; //設(shè)置分頁(yè)控制器的分頁(yè)點(diǎn)數(shù) - (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0); //設(shè)置當(dāng)前分頁(yè)控制器所高亮的點(diǎn) - (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0);五、UIPageViewControllerDelegate中方法解析

//翻頁(yè)視圖控制器將要翻頁(yè)時(shí)執(zhí)行的方法 - (void)pageViewController:(UIPageViewController *)pageViewController willTransitionToViewControllers:(NSArray<UIViewController *> *)pendingViewControllers NS_AVAILABLE_IOS(6_0); //翻頁(yè)動(dòng)畫(huà)執(zhí)行完成后回調(diào)的方法 - (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray<UIViewController *> *)previousViewControllers transitionCompleted:(BOOL)completed; //屏幕防線改變時(shí)回到的方法，可以通過(guò)返回值重設(shè)書(shū)軸類型枚舉 - (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation;

您可能感興趣的文章: