iOS翻頁視圖控制器UIPageViewController的應用

iOS翻頁視圖控制器UIPageViewController的應用

1、引言

    UIPageViewController是iOS中少見的動畫視圖控制器之一，經過它既能夠建立相似UIScrollView與UIPageControl結合的滾屏視圖，也能夠建立相似圖書效果的炫酷翻頁視圖。UIPageViewController相似一個視圖容器，其中每一個具體的視圖由各自的ViewController進行維護管理，UIPageViewController只進行協調與動畫布置。下圖能夠很好的展示出UIPageViewControlelr的使用結構：

上圖中，UIPageViewControllerDataSource協議爲UIPageViewController提供數據支持，DataSource協議提供的數據來自各個ViewContoller自行維護，UIPageViewControllerDelegate中的回調能夠對翻頁動做，屏幕旋轉動做等進行監聽。UIPageViewController把從DataSource中獲取到的視圖數據渲染給View用於當前視圖控制器的展現。

2、建立一個UIPageViewController

    首先新建一個類做爲翻頁視圖控制器中具體每一頁視圖的控制器，使其繼承於UIViewController：

ModelViewController.h

#import <UIKit/UIKit.h>
@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文件中實現以下代碼：

#import "ViewController.h"
#import "ModelViewController.h"
//遵照協議
@interface ViewController ()<UIPageViewControllerDataSource,UIPageViewControllerDelegate>
{
    //翻頁視圖控制器對象
    UIPageViewController * _pageViewControl;
    //數據源數組
    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;
    //設置數據源與代理
    _pageViewControl.dataSource=self;
    _pageViewControl.delegate=self;
    //建立初始界面
    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];
}
//翻頁控制器進行向前翻頁動做 這個數據源方法返回的視圖控制器爲要顯示視圖的視圖控制器
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController{
    int index = (int)[_dataArray indexOfObject:viewController];
    if (index==0) {
        return nil;
    }else{
        return _dataArray[index-1];
    }
}
//翻頁控制器進行向後翻頁動做 這個數據源方法返回的視圖控制器爲要顯示視圖的視圖控制器
- (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;
        }
    }
}
//屏幕旋轉觸發的代理方法
- (UIPageViewControllerSpineLocation) pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation{
    return UIPageViewControllerSpineLocationMin;
}
//設置分頁控制器的分頁數
- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController {
    
    return 10;
}
//設置初始的分頁點
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController{
    return 0;
}
@end

上面建立了最簡單的翻頁視圖控制器示例，效果以下圖：

3、UIPageViewController中方法使用解析

//建立翻頁視圖控制器對象
- (instancetype)initWithTransitionStyle:(UIPageViewControllerTransitionStyle)style navigationOrientation:(UIPageViewControllerNavigationOrientation)navigationOrientation options:(nullable NSDictionary<NSString *, id> *)options;

上面方法用於建立視圖控制器對象，其中UIPageViewControllerTransitionStyle參數設置翻頁控制器的風格，枚舉以下：

typedef NS_ENUM(NSInteger, UIPageViewControllerTransitionStyle) {
    UIPageViewControllerTransitionStylePageCurl = 0, //相似於書本翻頁效果
    UIPageViewControllerTransitionStyleScroll = 1 // 相似於ScrollView的滑動效果
};

若是設置爲UIPageViewControllerTransitionStyleCurl，翻頁效果以下圖所示：

上面初始化方法中的UIPageViewControllerNavigationOrientation屬性設置翻頁的方向，枚舉以下：

typedef NS_ENUM(NSInteger, UIPageViewControllerNavigationOrientation) {
    UIPageViewControllerNavigationOrientationHorizontal = 0,//水平翻頁
    UIPageViewControllerNavigationOrientationVertical = 1//豎直翻頁
};

options參數用於設置翻頁視圖控制器的配置字典，其能夠設置的配置鍵值以下：

//這個鍵須要設置爲UIPageViewControllerOptionSpineLocationKey枚舉值對應的NSNumber對象 設置翻頁控制器的書軸 後面會介紹
NSString * const UIPageViewControllerOptionSpineLocationKey;
//這個鍵須要設置爲NSNumber類型 設置每頁視圖的間距 用於滾動視圖風格的
NSString * const UIPageViewControllerOptionInterPageSpacingKey;

下面是UIPageViewController的一些經常使用屬性與方法：

//設置數據源
@property (nullable, nonatomic, weak) id <UIPageViewControllerDelegate> delegate;
//設置代理
@property (nullable, nonatomic, weak) id <UIPageViewControllerDataSource> dataSource;
//獲取翻頁風格
@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<UIViewController *> *)viewControllers direction:(UIPageViewControllerNavigationDirection)direction animated:(BOOL)animated completion:(void (^ __nullable)(BOOL finished))completion;

上面只有spineLocation屬性有些難於理解，其枚舉以下：

typedef NS_ENUM(NSInteger, UIPageViewControllerSpineLocation) {
    //對於SCrollView類型的滑動效果 沒有書軸 會返回下面這個枚舉值
    UIPageViewControllerSpineLocationNone = 0, 
    //以左邊或者上邊爲軸進行翻轉 界面同一時間只顯示一個View
    UIPageViewControllerSpineLocationMin = 1,  
    //以中間爲軸進行翻轉 界面同時能夠顯示兩個View
    UIPageViewControllerSpineLocationMid = 2, 
    //如下邊或者右邊爲軸進行翻轉 界面同一時間只顯示一個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;
}

運行效果以下圖所示：

4、UIPageViewControllerDataSource中方法解析

//向前翻頁展現的ViewController
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController;
//向後翻頁展現的ViewController
- (nullable UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController;
//設置分頁控制器的分頁點數
- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0);
//設置當前分頁控制器所高亮的點
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0);

5、UIPageViewControllerDelegate中方法解析

//翻頁視圖控制器將要翻頁時執行的方法
- (void)pageViewController:(UIPageViewController *)pageViewController willTransitionToViewControllers:(NSArray<UIViewController *> *)pendingViewControllers NS_AVAILABLE_IOS(6_0);
//翻頁動畫執行完成後回調的方法
- (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray<UIViewController *> *)previousViewControllers transitionCompleted:(BOOL)completed;
//屏幕防線改變時回到的方法，能夠經過返回值重設書軸類型枚舉
- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation;

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592