- 相關推薦
iOS的UIPageViewController翻頁視圖控制器講解
一、引言
UIPageViewController是iOS中少見的動畫視圖控制器之一，通過它既可以創(chuàng)建類似UIScrollView與UIPageControl結(jié)合的滾屏視圖，也可以創(chuàng)建類似圖書效果的炫酷翻頁視圖。
UIPageViewController在iOS 5 SDK中首次引入，它使得開發(fā)者可以使用這個ViewController創(chuàng)建分頁視圖。在iOS 6中，這個類有了更新，支持滾動過渡效果。使用Page View，用戶可以方便的通過手勢在多個頁面之間導航。UIPageViewController并不僅僅用于引導頁，很多游戲，例如：憤怒的小鳥，就是用Page View來展示關卡選擇的頁面，還有有關書籍的應用，用這個類來顯示書的頁面。
UIPageViewController是個高度可配置的類，你可以進行如下配置：
分頁的方向——水平或垂直 翻頁的樣式——書卷翻頁或者滑動翻頁 書脊位置——只有書卷翻頁樣式有效 頁面間距——只有滑動翻頁樣式有效，用來定義頁面間距（inter-page spacing）
UIPageViewController類似一個視圖容器，其中每個具體的視圖由各自的ViewController進行維護管理，UIPageViewController只進行協(xié)調(diào)與動畫布置。下圖可以很好的展現(xiàn)出UIPageViewControlelr的使用結(jié)構(gòu)：
上圖中，UIPageViewControllerDataSource協(xié)議為UIPageViewController提供數(shù)據(jù)支持，DataSource協(xié)議提供的數(shù)據(jù)來自各個ViewContoller自行維護，UIPageViewControllerDelegate中的回調(diào)可以對翻頁動作，屏幕旋轉(zhuǎn)動作等進行監(jiān)聽。UIPageViewController把從DataSource中獲取到的視圖數(shù)據(jù)渲染給View用于當前視圖控制器的展示。
為了演示，我們會一起創(chuàng)建一個簡單的app。當然，我們不會演示所有的UIPageViewController的配置細節(jié)，我們會演示到使用滑動翻頁樣式來創(chuàng)建一個引導頁。不過別擔心，有了對UIPageViewController的基本理解，我相信你能夠去探索其他的特性。
開始吧！
二、創(chuàng)建一個UIPageViewController
首先新建一個類作為翻頁視圖控制器中具體每一頁視圖的控制器，使其繼承于UIViewController：
ModelViewController.h
#import
@interface ModelViewController : UIViewController
+(ModelViewController *)creatWithIndex:(int)index;
@property(nonatomic,strong)UILabel * indexLabel;
@end
ModelViewController.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頁",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文件中實現(xiàn)如下代碼：
#import "ViewController.h"
#import "ModelViewController.h"
//遵守協(xié)議
@interface ViewController ()
{
//翻頁視圖控制器對象
UIPageViewController * _pageViewControl;
//數(shù)據(jù)源數(shù)組
NSMutableArray * _dataArray;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//進行初始化
_pageViewControl = [[UIPageViewController alloc]initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:@{UIPageViewControllerOptionSpineLocationKey:@0,UIPageViewControllerOptionInterPageSpacingKey:@10}];
self.view.backgroundColor = [UIColor greenColor];
//設置翻頁視圖的尺寸
_pageViewControl.view.bounds=self.view.bounds;
//設置數(shù)據(jù)源與代理
_pageViewControl.dataSource=self;
_pageViewControl.delegate=self;
//創(chuàng)建初始界面
ModelViewController * model = [ModelViewController creatWithIndex:1];
//設置初始界面
[_pageViewControl setViewControllers:@[model] direction:UIPageViewControllerNavigationDirectionReverse animated:YES completion:nil];
//設置是否雙面展示
_pageViewControl.doubleSided = NO;
_dataArray = [[NSMutableArray alloc]init];
[_dataArray addObject:model];
[self.view addSubview:_pageViewControl.view];
}
//翻頁控制器進行向前翻頁動作 這個數(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];
}
}
//翻頁控制器進行向后翻頁動作 這個數(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ù)
- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController {
return 10;
}
//設置初始的分頁點
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController{
return 0;
}
@end
上面創(chuàng)建了最簡單的翻頁視圖控制器示例，效果如下圖：
三、UIPageViewController中方法使用解析
//創(chuàng)建翻頁視圖控制器對象
- (instancetype)initWithTransitionStyle:(UIPageViewControllerTransitionStyle)style navigationOrientation:(UIPageViewControllerNavigationOrientation)navigationOrientation options:(nullable NSDictionary*)options;
上面方法用于創(chuàng)建視圖控制器對象，其中UIPageViewControllerTransitionStyle參數(shù)設置翻頁控制器的風格，枚舉如下：
typedef NS_ENUM(NSInteger, UIPageViewControllerTransitionStyle) {
UIPageViewControllerTransitionStylePageCurl = 0, //類似于書本翻頁效果
UIPageViewControllerTransitionStyleScroll = 1 // 類似于ScrollView的滑動效果
};
如果設置為UIPageViewControllerTransitionStyleCurl，翻頁效果如下圖所示：
上面初始化方法中的UIPageViewControllerNavigationOrientation屬性設置翻頁的方向，枚舉如下：
typedef NS_ENUM(NSInteger, UIPageViewControllerNavigationOrientation) {
UIPageViewControllerNavigationOrientationHorizontal = 0,//水平翻頁
UIPageViewControllerNavigationOrientationVertical = 1//豎直翻頁
};
options參數(shù)用于設置翻頁視圖控制器的配置字典，其可以設置的配置鍵值如下：
//這個鍵需要設置為UIPageViewControllerOptionSpineLocationKey枚舉值對應的NSNumber對象 設置翻頁控制器的書軸 后面會介紹
NSString * const UIPageViewControllerOptionSpineLocationKey;
//這個鍵需要設置為NSNumber類型 設置每頁視圖的間距 用于滾動視圖風格的
NSString * const UIPageViewControllerOptionInterPageSpacingKey;
下面是UIPageViewController的一些常用屬性與方法：
//設置數(shù)據(jù)源
@property (nullable, nonatomic, weak) iddelegate;
//設置代理
@property (nullable, nonatomic, weak) iddataSource;
//獲取翻頁風格
@property (nonatomic, readonly) UIPageViewControllerTransitionStyle transitionStyle;
//獲取翻頁方向
@property (nonatomic, readonly) UIPageViewControllerNavigationOrientation navigationOrientation;
//獲取書軸類型
@property (nonatomic, readonly) UIPageViewControllerSpineLocation spineLocation;
//設置是否雙面顯示
@property (nonatomic, getter=isDoubleSided) BOOL doubleSided;
//設置要顯示的視圖控制器
- (void)setViewControllers:(nullable NSArray*)viewControllers direction:(UIPageViewControllerNavigationDirection)direction animated:(BOOL)animated completion:(void (^ __nullable)(BOOL finished))completion;
上面只有spineLocation屬性有些難于理解，其枚舉如下：
typedef NS_ENUM(NSInteger, UIPageViewControllerSpineLocation) {
//對于SCrollView類型的滑動效果 沒有書軸 會返回下面這個枚舉值
UIPageViewControllerSpineLocationNone = 0,
//以左邊或者上邊為軸進行翻轉(zhuǎn) 界面同一時間只顯示一個View
UIPageViewControllerSpineLocationMin = 1,
//以中間為軸進行翻轉(zhuǎn) 界面同時可以顯示兩個View
UIPageViewControllerSpineLocationMid = 2,
//以下邊或者右邊為軸進行翻轉(zhuǎn) 界面同一時間只顯示一個View
UIPageViewControllerSpineLocationMax = 3
};
將上面的示例代碼修改幾個地方如下：
- (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;
}
運行效果如下圖所示：
四、UIPageViewControllerDataSource中方法解析
//向前翻頁展示的ViewController
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController;
//向后翻頁展示的ViewController
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController;
//設置分頁控制器的分頁點數(shù)
- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0);
//設置當前分頁控制器所高亮的點
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0);
五、UIPageViewControllerDelegate中方法解析
//翻頁視圖控制器將要翻頁時執(zhí)行的方法
- (void)pageViewController:(UIPageViewController *)pageViewController willTransitionToViewControllers:(NSArray*)pendingViewControllers NS_AVAILABLE_IOS(6_0);
//翻頁動畫執(zhí)行完成后回調(diào)的方法
- (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray*)previousViewControllers transitionCompleted:(BOOL)completed;
//屏幕防線改變時回到的方法，可以通過返回值重設書軸類型枚舉
- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation;
【iOS的UIPageViewController翻頁視圖控制器講解】相關文章：
iPhone翻頁技巧05-06
ios7.1.2怎么升級ios803-18
ios7如何降級到ios604-28
ios7降低到ios6的方法03-18
那些設備支持iOS11 iOS11好用嗎03-17
ios6怎么升級到ios7技巧推薦03-22
iOS太卡怎么辦04-28