欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

实例讲解iOS中的UIPageViewController翻页视图控制器

程序员文章站 2023-12-14 17:33:04
一、引言 uipageviewcontroller是ios中少见的动画视图控制器之一,通过它既可以创建类似uiscrollview与uipagecontrol结合的滚屏视...

一、引言

uipageviewcontroller是ios中少见的动画视图控制器之一,通过它既可以创建类似uiscrollview与uipagecontrol结合的滚屏视图,也可以创建类似图书效果的炫酷翻页视图。

uipageviewcontroller在ios 5 sdk中首次引入,它使得开发者可以使用这个viewcontroller创建分页视图。在ios 6中,这个类有了更新,支持滚动过渡效果。使用page view,用户可以方便的通过手势在多个页面之间导航。uipageviewcontroller并不仅仅用于引导页,很多游戏,例如:愤怒的小鸟,就是用page view来展示关卡选择的页面,还有有关书籍的应用,用这个类来显示书的页面。
uipageviewcontroller是个高度可配置的类,你可以进行如下配置:

  • 分页的方向——水平或垂直
  • 翻页的样式——书卷翻页或者滑动翻页
  • 书脊位置——只有书卷翻页样式有效
  • 页面间距——只有滑动翻页样式有效,用来定义页面间距(inter-page spacing)

uipageviewcontroller类似一个视图容器,其中每个具体的视图由各自的viewcontroller进行维护管理,uipageviewcontroller只进行协调与动画布置。下图可以很好的展现出uipageviewcontrolelr的使用结构:

实例讲解iOS中的UIPageViewController翻页视图控制器

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

实例讲解iOS中的UIPageViewController翻页视图控制器

三、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,翻页效果如下图所示:

实例讲解iOS中的UIPageViewController翻页视图控制器

上面初始化方法中的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;
}
运行效果如下图所示:

实例讲解iOS中的UIPageViewController翻页视图控制器

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

上一篇:

下一篇: