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

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


一、引言


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

image.png



上图中,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

上面创建了最简单的翻页视图控制器示例,效果如下图:

image.png

目录
相关文章
|
1月前
|
设计模式 安全 Swift
探索iOS开发:打造你的第一个天气应用
【9月更文挑战第36天】在这篇文章中,我们将一起踏上iOS开发的旅程,从零开始构建一个简单的天气应用。文章将通过通俗易懂的语言,引导你理解iOS开发的基本概念,掌握Swift语言的核心语法,并逐步实现一个具有实际功能的天气应用。我们将遵循“学中做,做中学”的原则,让理论知识和实践操作紧密结合,确保学习过程既高效又有趣。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你打开一扇通往iOS开发世界的大门。
|
7天前
|
JSON 前端开发 API
探索iOS开发之旅:打造你的第一个天气应用
【10月更文挑战第36天】在这篇文章中,我们将踏上一段激动人心的旅程,一起构建属于我们自己的iOS天气应用。通过这个实战项目,你将学习到如何从零开始搭建一个iOS应用,掌握基本的用户界面设计、网络请求处理以及数据解析等核心技能。无论你是编程新手还是希望扩展你的iOS开发技能,这个项目都将为你提供宝贵的实践经验。准备好了吗?让我们开始吧!
|
16天前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户点击按钮时,按钮将从圆形变为椭圆形,颜色从蓝色渐变到绿色;释放按钮时,动画以相反方式恢复。通过UIView的动画方法和弹簧动画效果,实现平滑自然的过渡。
31 1
|
25天前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
【10月更文挑战第18天】本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户按下按钮时,按钮将从圆形变为椭圆形并从蓝色渐变为绿色;释放按钮时,动画恢复原状。通过UIView的动画方法和弹簧动画效果,实现平滑自然的动画过渡。
47 5
|
iOS开发 API
|
iOS开发
IOS 视图控制对象生命周期-init、viewDidLoad、viewWillAppear、viewDidAppear、viewWillDisappear等的区别及用途
iOS视图控制对象生命周期-init、viewDidLoad、viewWillAppear、viewDidAppear、viewWillDisappear、viewDidDisappear的区别及用途 init-初始化程序 viewDidLoad-加载视图 viewWillAppear-UIV...
1088 0
|
iOS开发
iOS视图控制对象生命周期-init、viewDidLoad、viewWillAppear、viewDidAppear、viewWillDisappear、view
<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-size:14px; border:0px; list-style:none; word-wrap:normal; word-break:normal; line-height:25px; color:rgb(70,7
1784 0
|
前端开发
iOS7应用开发5、视图控制器View Controller及其生命周期
1、UITextView: 该类与Label类类似,可显示多行,可以编辑内容,可以滚动查看内容; 包含属性NSTextStorage *textStorage,该类是NSMutableAttributedString的基类;修改该属性可以自动...
854 0
|
iOS开发
iOS开发那些事--iOS视图生命周期与视图控制器关系
<div> <p>iOS中视图是一个应用的重要组成部分<span></span>,功能的实现与其息息相关,而视图控制器控制着视图,其重要性在整个应用中不言而喻。</p> <p><strong>视图生命周期与视图控制器关系</strong></p> <p>以视图的5种状态为基础,我们来系统的了解一下视图控制器的生命周期。在视图不同的生命周期,视图控制器会回调不同的方法。</p> <p
1051 0