文档章节

iOS翻页视图控制器UIPageViewController的应用

珲少
 珲少
发布于 2016/03/03 19:14
字数 1484
阅读 5.1K
收藏 17

精选30+云产品,助力企业轻松上云!>>>

iOS翻页视图控制器UIPageViewController的应用

一、引言

    UIPageViewController是iOS中少见的动画视图控制器之一,通过它既可以创建类似UIScrollView与UIPageControl结合的滚屏视图,也可以创建类似图书效果的炫酷翻页视图。UIPageViewController类似一个视图容器,其中每个具体的视图由各自的ViewController进行维护管理,UIPageViewController只进行协调与动画布置。下图可以很好的展现出UIPageViewControlelr的使用结构:

上图中,UIPageViewControllerDataSource协议为UIPageViewController提供数据支持,DataSource协议提供的数据来自各个ViewContoller自行维护,UIPageViewControllerDelegate中的回调可以对翻页动作,屏幕旋转动作等进行监听。UIPageViewController把从DataSource中获取到的视图数据渲染给View用于当前视图控制器的展示。

二、创建一个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;

专注技术,热爱生活,交流技术,也做朋友。

——珲少 QQ群:203317592

珲少

珲少

粉丝 903
博文 401
码字总数 495594
作品 0
崇明
程序员
私信 提问
加载中
请先登录后再评论。
iOS翻页(PageCurl)效果总结

到目前最新的sdk(4.3),apple没有提供pageCurl的API, 要实现google map app那样的翻页效果只能靠自己实现。 总结一下我收集到的资源。 用私有api实现的iBook翻页效果:http://blog.stevent...

长平狐
2012/08/13
903
0
移动开发:初学 iOS-UIViewController 心得

初学 iOS,本文翻译了一些 iOS 官网上的 UIViewController 的知识点,如有不到位或不正确的地方,还请指正: 本文所介绍的内容的目标: 理解content view controllers 和 container view con...

OneAPM蓝海讯通
2016/02/24
52
0
可定制的分页视图控制器 - XLPageViewController

XLPageViewController 是一个开放、高度可定制化的分页视图控制器。它有以下特点: 通过基础配置可实现大部分主流App栏目分页效果。也可以通过自定义标题栏样式,实现一些特殊的效果。 采用U...

孟宪亮OK
2019/05/17
618
0
UIPageControl 和UIPageViewControllerDelegate的区别

UIPageControl是一个UIview,跟UIButton是一类型的带有控制功能的控件 UIPageViewController是一个controller,在上面有view,他是一个根视图控制器,实现效果类似与翻书的效果...

苏伊仕
2014/06/21
142
0
UIPageViewController的简单使用

今天再看一个旧项目时,发现这里面用的了UIPageViewController这个控件(可以理解为书籍控件)。之前只是听说过,从来没有去实际运用过。所以就来看看UIPageViewController的基本使用。本文只...

wang_guo_wei_Coco
2017/11/08
5
0

没有更多内容

加载失败,请刷新页面

加载更多

5 个 IDEA 必备插件,让效率成为习惯

IDEA 是最好的 IDE,谁赞成,谁反对? IDEA 是 Java 开发人员中最受欢迎和用户友好的 IDE 之一,它具有许多便利的功能,例如智能代码完成,自动执行繁琐的重复开发任务,因此它已成为 Java 社...

osc_1ipdqsf2
19分钟前
9
0
.Net Core 2.2升级3.1的避坑指南

写在前面   微软在更新.Net Core版本的时候,动作往往很大,使得每次更新版本的时候都得小心翼翼,坑实在是太多。往往是悄咪咪的移除了某项功能或者组件,或者不在支持XX方法,这就很花时间...

osc_gq57ni0z
19分钟前
11
0
Spring的学习与实战

目录 一、Spring起步 学习路线图 Spring的基础知识 什么是Spring Spring框架核心模块 SpringBoot 第一个Spring应用DEMO 编写自己的第一个SpringMVC例子 尝试使用Spring Boot DevTools Spring...

osc_j3111wl4
21分钟前
5
0
【Nginx】如何获取客户端真实IP、域名、协议、端口?看这一篇就够了!

写在前面 Nginx最为最受欢迎的反向代理和负载均衡服务器,被广泛的应用于互联网项目中。这不仅仅是因为Nginx本身比较轻量,更多的是得益于Nginx的高性能特性,以及支持插件化开发,为此,很多...

osc_rbml5ydi
22分钟前
16
0
CentOS 7 MySQL5.7 主从只同步部分库或表

同步部分数据有两个思路: master只发送需要的; 优点:中继日志小;如果多从库,只需要在主库中统一控制 缺点:中途修改比较麻烦,不能控制同步的表 slave只接收想要的 优点:中途修改同步的...

osc_tjhvpz8x
23分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部