实例讲解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>
@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
上面创建了最简单的翻页视图控制器示例,效果如下图:

三、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;
}
运行效果如下图所示:

四、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);
五、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;



相关阅读:
表格里使用text-overflow后不能隐藏超出的文本的解决方法
Windows下的3个网络诊断命令介绍
基于Turn.js 实现翻书效果实例解析
使用UART与PC通信实现msp430g2553单片机超声波测距示例
AngularJS学习笔记之依赖注入详解
JavaScript实现的购物车效果可以运用在好多地方
Android4.0.x Home键事件拦截监听的方法
bootstrap3教程之bootstrap显示5列的方法
php支付宝接口用法分析
CSS教程 彻底掌握Z-index属性
php输入流php://input使用示例(php发送图片流到服务器)
Android中Activity常用功能设置小结(包括全屏、横竖屏等)
ajax调用简单实例
JavaScript控制网页平滑滚动到指定元素位置的方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 竹作文250字 我快乐,因为我诚实 应用电子专业大学生求职信范文 【闲钓兰溪湖】 呼唤作文400字 霓虹灯下的寂寞... 当自己被人喜欢的时候呀,感觉身上都在放光(爱情语录) 我们身边的年例 防盗变形房 公务员入党申请书样本 小学五年级作文550字:车厢里的温暖 六年级作文800字:爱踢足球的我 论金钱作文900字 2015年关于岗前培训心得体会 爱我侦探团—古铜城堡连环绑架案作文350字 小记者,我的梦作文800字 俄要的就只是简简单单而已 毕业晚会开场白结束语 一心为人民甘愿做“傻子”550字 在学校的你一定遇到过这么些情况作文1400字 最美的雪景 北师大版必修一三单元--必修(一)第三单元测试(原创)(会员上传) 夏曰(yue)(贰) 父母对我的教育 高中高三作文1000字:西西旅游记 经典人生青春励志大全 小学三年级作文300字:天塔——-家乡的明珠 加班族 水仙花500字 《农业的区位选择》导学案 红牛公司甘做“冤大头” 高尚造句 全新手把手作文 抵不过 何日出头? 别再视而不见了,感情,不是失去后才去拿来珍惜的 清澈在景,清净在心 八一建军,送我亲爱的军人诗歌 战场依旧,物是人非 禅意的秋 小学四年级作文500字:参观我们的校园 星辰寥落,月如玦 精选入党申请谈话内容(简洁版) 小学五年级作文550字:提醒幸福 在思想世界外的温暖 我的小伙伴 晏子 节约用水从我做起作文900字 80后,沦为不折不扣加班狂的无奈。。。 我心中的明星作文450字 未来的微型房作文500字

Copyright © 2016 phpStudy |