UIPageViewController學習
- 前言
- 創建一個UIPageViewController
- 最簡單的使用
- `UIPageViewController`的方法說明:
- 效果展示
- `UIPageViewController`的協議方法
前言
筆者最近在寫項目時想實現一個翻書效果,上網學習到了UIPageViewController
今天寫本篇博客總結一下關于該控制器的學習,這里筆者學習較淺,后期再進行補充。下面我給出一張圖來展現UIPageViewController
的使用結構:
創建一個UIPageViewController
最簡單的使用
首先新建一個類作為翻頁視圖控制器中具體的每一頁視圖控制器,使其繼承與UIViewController
:
ModelViewController類
:
#import <UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGIN@interface ModelViewController : UIViewController
+(ModelViewController *)creatWithIndex:(int)index;
@property(nonatomic,strong)UILabel * indexLabel;@end
NS_ASSUME_NONNULL_END#prama mark - 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];self.view.backgroundColor = [UIColor redColor];
}
@end
***ViewControlller類
:
#import "PageViewController.h"@interface PageViewController () <UIPageViewControllerDelegate, UIPageViewControllerDataSource>
@property (nonatomic, strong) UIPageViewController* pageViewControl;
@property (nonatomic, strong) NSMutableArray* dataArray;
@end@implementation PageViewController
- (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
效果圖:
UIPageViewControllerNavigationOrientationHorizontal
:指定為水平滑動,還可以使用UIPageViewControllerNavigationOrientationVertical
來進行豎直滑動。
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;
- 翻頁風格:
typedef NS_ENUM(NSInteger, UIPageViewControllerTransitionStyle) {UIPageViewControllerTransitionStylePageCurl = 0, // 類似于滾動視圖翻頁效果UIPageViewControllerTransitionStyleScroll = 1 // 類似于書本翻頁效果
};
- 翻頁方向
typedef NS_ENUM(NSInteger, UIPageViewControllerNavigationOrientation) {UIPageViewControllerNavigationOrientationHorizontal = 0,//水平翻頁UIPageViewControllerNavigationOrientationVertical = 1//豎直翻頁
};
spineLocation
:
typedef NS_ENUM(NSInteger, UIPageViewControllerSpineLocation) {//對于SCrollView類型的滑動效果 沒有書軸 會返回下面這個枚舉值UIPageViewControllerSpineLocationNone = 0, //以左邊或者上邊為軸進行翻轉 界面同一時間只顯示一個ViewUIPageViewControllerSpineLocationMin = 1, //以中間為軸進行翻轉 界面同時可以顯示兩個ViewUIPageViewControllerSpineLocationMid = 2, //以下邊或者右邊為軸進行翻轉 界面同一時間只顯示一個ViewUIPageViewControllerSpineLocationMax = 3
};
- (void)setViewControllers:(NSArray<UIViewController *> *)viewControllers direction:(UIPageViewControllerNavigationDirection)direction animated:(BOOL)animated completion:(void (^)(BOOL finished))completion;
方法詳解:
這個方法是用于以編程方式切換當前顯示的頁面,下面講解一下他的參數:
viewControllers
:傳入的視圖控制器,通常只傳入一個(當且僅當spineLocation為UIPageViewControllerSpineLocationMid
的時候需要傳入兩個控制器,即書脊效果下)direction
:控制頁面的動畫方向,上述參數中已講解過。completion
:動畫完成后的回調,可以更新UI等內容。
效果展示
通過上述方法的使用,我們可以畫一個紙張翻頁的效果,下面給出示例代碼:
我們僅需要更改ViewController
中的內容即可:
- (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;//僅在當前狀態下,一張可以展示兩個控制器
}
效果圖:
UIPageViewController
的協議方法
//向前翻頁展示的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);//翻頁視圖控制器將要翻頁時執行的方法
- (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;
總結:
關于UIPageViewController
筆者還有很多地方沒有弄懂,對于其使用也僅僅局限于使用其實現仿真翻頁效果,后期筆者還會補充其中內容。個人認為可以使用其實現無限輪播效果,并且更為簡單方便,后期會嘗試來實現一下。