服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - 实例讲解iOS中的UIPageViewController翻页视图控制器

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

2021-01-20 16:38珲少 IOS

UIPageViewController更像是一个视图容器,将每页不同的ViewController整合,这里我们将以实例讲解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的使用结构:

实例讲解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;

延伸 · 阅读

精彩推荐
  • IOSiOS逆向教程之logify跟踪方法的调用

    iOS逆向教程之logify跟踪方法的调用

    这篇文章主要给大家介绍了关于iOS逆向教程之logify跟踪方法调用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学...

    Mr.Guo11472021-04-28
  • IOSiOS中时间与时间戳的相互转化实例代码

    iOS中时间与时间戳的相互转化实例代码

    这篇文章主要介绍了iOS中时间与时间戳的相互转化实例代码,非常具有实用价值,需要的朋友可以参考下。...

    张无忌!4812021-03-09
  • IOSIOS网络请求之AFNetWorking 3.x 使用详情

    IOS网络请求之AFNetWorking 3.x 使用详情

    本篇文章主要介绍了IOS网络请求之AFNetWorking 3.x 使用详情,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    总李写代码6892021-03-04
  • IOSiOS10 Xcode8适配7个常见问题汇总

    iOS10 Xcode8适配7个常见问题汇总

    这篇文章主要为大家详细汇总了iOS10 Xcode8适配7个常见问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    索马里猫10332021-02-01
  • IOSiOS APP实现微信H5支付示例总结

    iOS APP实现微信H5支付示例总结

    这篇文章主要介绍了iOS APP实现微信H5支付示例总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下...

    一张小A11332021-06-01
  • IOS谈一谈iOS单例模式

    谈一谈iOS单例模式

    这篇文章主要和大家谈一谈iOS中的单例模式,单例模式是一种常用的软件设计模式,想要深入了解iOS单例模式的朋友可以参考一下...

    彭盛凇11872021-01-19
  • IOSxcode8提交ipa失败无法构建版本问题的解决方案

    xcode8提交ipa失败无法构建版本问题的解决方案

    xcode升级到xcode8后发现构建不了新的版本。怎么解决呢?下面小编给大家带来了xcode8提交ipa失败无法构建版本问题的解决方案,非常不错,一起看看吧...

    Cinna丶7542021-02-03
  • IOSiOS常见的几个修饰词深入讲解

    iOS常见的几个修饰词深入讲解

    这篇文章主要给大家介绍了关于iOS常见的几个修饰词的相关资料,iOS修饰词包括assign、weak、strong、retain、copy、nonatomic、atomic、readonly、readwrite,文中通过示...

    郡王丶千夜7422021-05-10