实例讲解iOS中的UIPageViewController翻页视图控制器
一、引言
uipageviewcontroller是ios中少见的动画视图控制器之一,通过它既可以创建类似uiscrollview与uipagecontrol结合的滚屏视图,也可以创建类似图书效果的炫酷翻页视图。
uipageviewcontroller在ios 5 sdk中首次引入,它使得开发者可以使用这个viewcontroller创建分页视图。在ios 6中,这个类有了更新,支持滚动过渡效果。使用page view,用户可以方便的通过手势在多个页面之间导航。uipageviewcontroller并不仅仅用于引导页,很多游戏,例如:愤怒的小鸟,就是用page view来展示关卡选择的页面,还有有关书籍的应用,用这个类来显示书的页面。
uipageviewcontroller是个高度可配置的类,你可以进行如下配置:
- 分页的方向——水平或垂直
- 翻页的样式——书卷翻页或者滑动翻页
- 书脊位置——只有书卷翻页样式有效
- 页面间距——只有滑动翻页样式有效,用来定义页面间距(inter-page spacing)
uipageviewcontroller类似一个视图容器,其中每个具体的视图由各自的viewcontroller进行维护管理,uipageviewcontroller只进行协调与动画布置。下图可以很好的展现出uipageviewcontrolelr的使用结构:
上图中,uipageviewcontrollerdatasource协议为uipageviewcontroller提供数据支持,datasource协议提供的数据来自各个viewcontoller自行维护,uipageviewcontrollerdelegate中的回调可以对翻页动作,屏幕旋转动作等进行监听。uipageviewcontroller把从datasource中获取到的视图数据渲染给view用于当前视图控制器的展示。
为了演示,我们会一起创建一个简单的app。当然,我们不会演示所有的uipageviewcontroller的配置细节,我们会演示到使用滑动翻页样式来创建一个引导页。不过别担心,有了对uipageviewcontroller的基本理解,我相信你能够去探索其他的特性。
开始吧!
二、创建一个uipageviewcontroller
首先新建一个类作为翻页视图控制器中具体每一页视图的控制器,使其继承于uiviewcontroller:
modelviewcontroller.h
#import <uikit/uikit.h>
modelviewcontroller.m
@interface modelviewcontroller : uiviewcontroller
+(modelviewcontroller *)creatwithindex:(int)index;
@property(nonatomic,strong)uilabel * indexlabel;
@end
#import "modelviewcontroller.h"
在工程模板自带的viewcontroller.m文件中实现如下代码:
@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
#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
三、uipageviewcontroller中方法使用解析
//创建翻页视图控制器对象
上面方法用于创建视图控制器对象,其中uipageviewcontrollertransitionstyle参数设置翻页控制器的风格,枚举如下:
- (instancetype)initwithtransitionstyle:(uipageviewcontrollertransitionstyle)style navigationorientation:(uipageviewcontrollernavigationorientation)navigationorientation options:(nullable nsdictionary<nsstring *, id> *)options;
typedef ns_enum(nsinteger, uipageviewcontrollertransitionstyle) {
如果设置为uipageviewcontrollertransitionstylecurl,翻页效果如下图所示:
uipageviewcontrollertransitionstylepagecurl = 0, //类似于书本翻页效果
uipageviewcontrollertransitionstylescroll = 1 // 类似于scrollview的滑动效果
};
上面初始化方法中的uipageviewcontrollernavigationorientation属性设置翻页的方向,枚举如下:
typedef ns_enum(nsinteger, uipageviewcontrollernavigationorientation) {
options参数用于设置翻页视图控制器的配置字典,其可以设置的配置键值如下:
uipageviewcontrollernavigationorientationhorizontal = 0,//水平翻页
uipageviewcontrollernavigationorientationvertical = 1//竖直翻页
};
//这个键需要设置为uipageviewcontrolleroptionspinelocationkey枚举值对应的nsnumber对象 设置翻页控制器的书轴 后面会介绍
下面是uipageviewcontroller的一些常用属性与方法:
nsstring * const uipageviewcontrolleroptionspinelocationkey;
//这个键需要设置为nsnumber类型 设置每页视图的间距 用于滚动视图风格的
nsstring * const uipageviewcontrolleroptioninterpagespacingkey;
//设置数据源
上面只有spinelocation属性有些难于理解,其枚举如下:
@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;
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;
}
四、uipageviewcontrollerdatasource中方法解析
//向前翻页展示的viewcontroller
五、uipageviewcontrollerdelegate中方法解析
- (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;
推荐阅读
-
实例讲解iOS中的UIPageViewController翻页视图控制器
-
实例讲解iOS中的CATransition转场动画使用
-
实例讲解iOS中的UIPageViewController翻页视图控制器
-
实例讲解iOS应用开发中UIPickerView滚动选择栏的用法
-
实例讲解iOS中的CATransition转场动画使用
-
实例讲解设计模式中的命令模式在iOS App开发中的运用
-
实例讲解如何在iOS应用开发中使用设计模式中的代理模式
-
实例讲解iOS应用的设计模式开发中的Visitor访问者模式
-
实例讲解iOS应用开发中UIPickerView滚动选择栏的用法
-
实例讲解设计模式中的命令模式在iOS App开发中的运用