UIPageViewController学习
前言
笔者最近在写项目时想实现一个翻书效果,上网学习到了UIPageViewController
今天写本篇博客总结一下关于该控制器的学习,这里笔者学习较浅,后期再进行补充。下面我给出一张图来展现UIPageViewController
的使用结构:
创建一个UIPageViewController
最简单的使用
首先新建一个类作为翻页视图控制器中具体的每一页视图控制器,使其继承与UIViewController
:
ModelViewController类
:
objectivec
#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类
:
objectivec
#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
的方法说明:
objectivec
//设置数据源
@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;
- 翻页风格:
objectivec
typedef NS_ENUM(NSInteger, UIPageViewControllerTransitionStyle) {
UIPageViewControllerTransitionStylePageCurl = 0, // 类似于滚动视图翻页效果
UIPageViewControllerTransitionStyleScroll = 1 // 类似于书本翻页效果
};
- 翻页方向
objectivec
typedef NS_ENUM(NSInteger, UIPageViewControllerNavigationOrientation) {
UIPageViewControllerNavigationOrientationHorizontal = 0,//水平翻页
UIPageViewControllerNavigationOrientationVertical = 1//竖直翻页
};
spineLocation
:
objectivec
typedef NS_ENUM(NSInteger, UIPageViewControllerSpineLocation) {
//对于SCrollView类型的滑动效果 没有书轴 会返回下面这个枚举值
UIPageViewControllerSpineLocationNone = 0,
//以左边或者上边为轴进行翻转 界面同一时间只显示一个View
UIPageViewControllerSpineLocationMin = 1,
//以中间为轴进行翻转 界面同时可以显示两个View
UIPageViewControllerSpineLocationMid = 2,
//以下边或者右边为轴进行翻转 界面同一时间只显示一个View
UIPageViewControllerSpineLocationMax = 3
};
- (void)setViewControllers:(NSArray<UIViewController *> *)viewControllers direction:(UIPageViewControllerNavigationDirection)direction animated:(BOOL)animated completion:(void (^)(BOOL finished))completion;
方法详解 :
这个方法是用于以编程方式切换当前显示的页面,下面讲解一下他的参数:
viewControllers
:传入的视图控制器,通常只传入一个(当且仅当spineLocation为UIPageViewControllerSpineLocationMid
的时候需要传入两个控制器,即书脊效果下)direction
:控制页面的动画方向,上述参数中已讲解过。completion
:动画完成后的回调,可以更新UI等内容。
效果展示
通过上述方法的使用,我们可以画一个纸张翻页的效果,下面给出示例代码:
我们仅需要更改ViewController
中的内容即可:
objectivec
- (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
的协议方法
objectivec
//向前翻页展示的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
笔者还有很多地方没有弄懂,对于其使用也仅仅局限于使用其实现仿真翻页效果,后期笔者还会补充其中内容。个人认为可以使用其实现无限轮播效果,并且更为简单方便,后期会尝试来实现一下。