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

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

一、引言

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

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

二、创建一个UIPageViewController

    首先新建一个类作为翻页视图控制器中具体每一页视图的控制器，使其继承于UIViewController：

ModelViewController.h

?


1

2

3

4

5

#import <UIKit/UIKit.h>

@interface ModelViewController : UIViewController

+(ModelViewController *)creatWithIndex:(int)index;

@property(nonatomic,strong)UILabel * indexLabel;

@end

ModelViewController.m

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#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文件中实现如下代码：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

#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中方法使用解析

?


1

2

//创建翻页视图控制器对象

- (instancetype)initWithTransitionStyle:(UIPageViewControllerTransitionStyle)style navigationOrientation:(UIPageViewControllerNavigationOrientation)navigationOrientation options:(nullable NSDictionary<NSString *, id> *)options;

上面方法用于创建视图控制器对象，其中UIPageViewControllerTransitionStyle参数设置翻页控制器的风格，枚举如下：

?


1

2

3

4

typedef NS_ENUM(NSInteger, UIPageViewControllerTransitionStyle) {

    UIPageViewControllerTransitionStylePageCurl = 0, //类似于书本翻页效果

    UIPageViewControllerTransitionStyleScroll = 1 // 类似于ScrollView的滑动效果

};

如果设置为UIPageViewControllerTransitionStyleCurl，翻页效果如下图所示：

上面初始化方法中的UIPageViewControllerNavigationOrientation属性设置翻页的方向，枚举如下：

?


1

2

3

4

typedef NS_ENUM(NSInteger, UIPageViewControllerNavigationOrientation) {

    UIPageViewControllerNavigationOrientationHorizontal = 0,//水平翻页

    UIPageViewControllerNavigationOrientationVertical = 1//竖直翻页

};

options参数用于设置翻页视图控制器的配置字典，其可以设置的配置键值如下：

?


1

2

3

4

//这个键需要设置为UIPageViewControllerOptionSpineLocationKey枚举值对应的NSNumber对象 设置翻页控制器的书轴 后面会介绍

NSString * const UIPageViewControllerOptionSpineLocationKey;

//这个键需要设置为NSNumber类型 设置每页视图的间距 用于滚动视图风格的

NSString * const UIPageViewControllerOptionInterPageSpacingKey;

下面是UIPageViewController的一些常用属性与方法：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

//设置数据源

@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属性有些难于理解，其枚举如下：

?


1

2

3

4

5

6

7

8

9

10

typedef NS_ENUM(NSInteger, UIPageViewControllerSpineLocation) {

    //对于SCrollView类型的滑动效果 没有书轴 会返回下面这个枚举值

    UIPageViewControllerSpineLocationNone = 0, 

    //以左边或者上边为轴进行翻转 界面同一时间只显示一个View

    UIPageViewControllerSpineLocationMin = 1,  

    //以中间为轴进行翻转 界面同时可以显示两个View

    UIPageViewControllerSpineLocationMid = 2, 

    //以下边或者右边为轴进行翻转 界面同一时间只显示一个View

    UIPageViewControllerSpineLocationMax = 3   

};

将上面的示例代码修改几个地方如下：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

- (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中方法解析

?


1

2

3

4

5

6

7

8

//向前翻页展示的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中方法解析

?


1

2

3

4

5

6

//翻页视图控制器将要翻页时执行的方法

- (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;
时间： 2025-01-26 21:25:18

iOS翻页视图控制器UIPageViewController的应用的相关文章

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

一.引言 UIPageViewController是iOS中少见的动画视图控制器之一,通过它既可以创建类似UIScrollView与UIPageControl结合的滚屏视图,也可以创建类似图书效果的炫酷翻页视图. UIPageViewController在iOS 5 SDK中首次引入,它使得开发者可以使用这个ViewController创建分页视图.在iOS 6中,这个类有了更新,支持滚动过渡效果.使用Page View,用户可以方便的通过手势在多个页面之间导航.UIPageViewContro

nagios报错-如何来实现ios的小说翻页功能

问题描述 如何来实现ios的小说翻页功能 各位客官,一直以来想做个项目,关于小说阅读的.但是我还是个新手,对很多的东西都不太懂.想请教各位,如何来实现点击一本书以后.进去点击翻页阅读 解决方案 http://www.cocoachina.com/bbs/read.php?tid=75357 解决方案二: ios 翻页例子源码 解决方案三: 处理gestrue等事件 然后实现页面的前进后退加载

ios开发-如何改变一个视图控制器中除一个控件变灰

问题描述 如何改变一个视图控制器中除一个控件变灰 就像图片一样,当选择器触发时,其余控件色变成灰色怎么实现?求大神开发-如何改变一个视图控制器中除一个控件变灰-ios 添加子视图控制器">

iOS图片界面翻页切换效果_IOS

先看效果: 下面贴代码: #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIImageView *backgroundView; @property (strong,nonatomic) NSArray *array; @end @implementation ViewController -(NSArray *)array { if (_arra

IOS开发之视图和视图控制器

        视图(View), 视图控制器(ViewController)是IOS开发UI部分比较重要的东西.在学习视图这一块的东西的时候,感觉和Java Swing中的Panel差不多.在UIKit框架中都有一个UIWindow来容纳我们的View.应用程序中几乎全部的可视控件都是UIView以及UIView的子类的实例,并且UIWindow也是UIView的子类.UIWindow可以不借助于父类视图显示在屏幕上,其余的视图都需要添加到父视图中才能显示.窗口是用来显示视图的,下面我们将会结

iOS 视图控制器转场详解(下)

推荐序 这是一篇长文,详细讲解了视图控制器转场的方方面面,配有详细的示意图和代码,为了使得文章在微信公众号中易于阅读,seedante 辛苦将大量长篇代码用截图的方式呈现,满满的诚意之作. 作者 seedante 是一个低调人士,只愿意透露他的 GitHub:https://github.com/seedante .感谢作者授权微信独家代理,本文的所有打赏归 seedante 所有. 插曲:UICollectionViewController 布局转场 前面一直没有提到这种转场方式,与三大主流转

iOS开发入门：iOS视图生命周期与视图控制器关系

iOS中视图是一个应用的重要组成部分,功能的实现与其息息相关,而视图控制器控制着视图,其重要性在整个应用中不言而喻. 视图生命周期与视图控制器关系 以视图的5种状态为基础,我们来系统的了解一下视图控制器的生命周期.在视图不同的生命周期,视图控制器会回调不同的方法. 开发入门:iOS视图生命周期与视图控制器关系-"> viewDidLoad方法:视图控制器已被实例化,在视图被加载到内存中的时候调用该方法,这个时候视图并未出现.在该方法中通常进行的是对所控制的视图进行初始化处理. 视 图可见前

iOS开发那些事--iOS视图生命周期与视图控制器关系

iOS中视图是一个应用的重要组成部分,功能的实现与其息息相关,而视图控制器控制着视图,其重要性在整个应用中不言而喻. 视图生命周期与视图控制器关系 以视图的5种状态为基础,我们来系统的了解一下视图控制器的生命周期.在视图不同的生命周期,视图控制器会回调不同的方法. viewDidLoad方法:视图控制器已被实例化,在视图被加载到内存中的时候调用该方法,这个时候视图并未出现.在该方法中通常进行的是对所控制的视图进行初始化处理. 视图可见前后会调用viewWillAppear:方法和viewDidA

iOS 视图控制器转场详解(上)

推荐序 这是一篇长文,详细讲解了视图控制器转场的方方面面,配有详细的示意图和代码,为了使得文章在微信公众号中易于阅读,seedante 辛苦将大量长篇代码用截图的方式呈现,另外作者也在 Github 上附上了完整的示例代码,满满的诚意之作. 作者 seedante 是一个低调人士,只愿意透露他的 GitHub:https://github.com/seedante .感谢作者授权微信独家代理,本文的所有打赏归 seedante 所有. 前言 本文并非华丽的转场动画教程,相反,文中的转场动画效果都