iOS开发那些事-平铺导航-基于Page的导航及案例实现

2024-04-17 15:08

本文主要是介绍iOS开发那些事-平铺导航-基于Page的导航及案例实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

基于分页导航实现

在iOS 5之后,可以使用分页控制器(UIPageViewController)构建类似于电子书效果的应用,我们称为基于分页的应用。一个分页应用有很多相关的视图控制器

 1

分页控制器(PageViewController)需要放置在一个父视图控制器中,在分页控制器下面还要有子视图控制器,每个子视图控制器对应图中的一个页面。

在基于分页导航实现的应用中需要的类和协议:UIPageViewControllerDataSource协议和UIPageViewControllerDelegate协议和UIPageViewController类,UIPageViewController没有对应的视图类。

UIPageViewControllerDelegate委托协议中,最重要的方法为pageViewController:spineLocationForInterfaceOrientation:,它根据屏幕旋转方向设置书脊位置(Spine Location)和初始化首页。

UIPageViewController中有两个常用的属性:双面显示(doubleSided)和书脊位置(spineLocation)。

1.双面显示,是在页面翻起的时候,偶数页面会在背面显示。图6-13右图为doubleSided设置为YES情况,图6-14中图为doubleSided设置为NO(单面显示),单面显示在页面翻起的时候,能够看到页面的背面,背面的内容是当前页面透过去的,与当前内容是相反的镜像。

2.书脊位置。书脊位置也是很重要的属性,但是它的spineLocation 属性是只读的,要设置它,需要通过UIPageViewControllerDelegate委托协议中的pageViewController:spineLocationForInterfaceOrientation:方法。书脊位置由枚举UIPageViewControllerSpineLocation定义,该枚举类型下的成员变量如下所示。

3     2

下面我们使用页面导航实现城市信息这个应用。使用Single View Application模板创建一个名为 PageNavigation的工程。

可以从PageControlNavigation工程中复制过来,方法是在打开MainStoryboard.storyboard选中3个视图控制器,按下Command+C组合键拷贝,再到PageNavigation中打开MainStoryboard.storyboard,按下Command+V组合键粘贴,就可以了。

这样UI设计工作就结束了,下面的工作都是由代码完成的。我们先看看ViewController.h的代码:

#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UIPageViewControllerDataSource,UIPageViewControllerDelegate>{//当前页面的索引int pageIndex;}@property (strong, nonatomic) UIPageViewController *pageViewController;@end


在上述代码中,ViewController实现了UIPageViewControllerDataSource和UIPageViewControllerDelegate协议。成员变量pageIndex保存了当前页面的索引,pageViewController属性保存了UIPageViewController实例。

下面我们看看程序代码ViewController.m的viewDidLoad方法:

- (void)viewDidLoad{[super viewDidLoad];self.view.frame = CGRectMake(0.0f, 0.0f, 320.0f, 440.0f);self.pageViewController = [[UIPageViewController alloc]initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurlnavigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];self.pageViewController.delegate = self;self.pageViewController.dataSource = self;UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];UIViewController* page1ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page1"];//第一个视图,最为PageViewController首页NSArray *viewControllers = @[page1ViewController];[self.pageViewController setViewControllers:viewControllersdirection:UIPageViewControllerNavigationDirectionForward animated:YES completion:NULL];[self addChildViewController:self.pageViewController];[self.view addSubview:self.pageViewController.view];pageIndex = 0;}


在上述代码中,initWithTransitionStyle:navigationOrientation:options:构造方法用于创建UIPageViewController实例,initWithTransitionStyle用于设定页面翻转的样式。UIPageViewControllerTransitionStyle枚举类型定义了如下两个翻转样式。

UIPageViewControllerTransitionStylePageCurl:翻书效果样式。

UIPageViewControllerTransitionStyleScroll:滑屏效果样式。

navigationOrientation设定了翻页方向,UIPageViewControllerNavigationDirection枚举类型定义了以下两种翻页方式。

UIPageViewControllerNavigationDirectionForward:从左往右(或从下往上);

UIPageViewControllerNavigationDirectionReverse:从右向左(或从上往下)。

代码NSArray *viewControllers = @[page1ViewController]相当于NSArray *viewControllers = [NSArray arrayWithObject: page1ViewController , nil]。

在UIPageViewController中,setViewControllers:direction:animated:completion:方法用于设定首页中显示的视图。首页中显示几个视图与书脊类型有关,如果是UIPageViewControllerSpineLocationMin或UIPageViewControllerSpineLocationMax,首页中显示一个视图;如果是UIPageViewControllerSpineLocationMid,首页中显示两个视图。

[self addChildViewController:self.pageViewController]语句是将PageViewController添加到父视图控制器中去。

我们再看看ViewController.m中有关数据源UIPageViewControllerDataSource协议实现方法的代码:

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewControllerviewControllerBeforeViewController:(UIViewController *)viewController{pageIndex–;if (pageIndex < 0){pageIndex = 0;return nil;}UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];NSString *pageId = [NSString stringWithFormat:@"page%i",pageIndex+1];UIViewController* pvController = [mainStoryboard instantiateViewControllerWithIdentifier:pageId];return pvController;}- (UIViewController *)pageViewController:(UIPageViewController *)pageViewControllerviewControllerAfterViewController:(UIViewController *)viewController{pageIndex++;if (pageIndex > 2){pageIndex = 2;return nil;}UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];NSString *pageId = [NSString stringWithFormat:@"page%i",pageIndex+1];UIViewController* pvController = [mainStoryboard instantiateViewControllerWithIdentifier:pageId];return pvController;}在ViewController.m中,有关委托协议UIPageViewControllerDelegate实现方法的代码如下:- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewControllerspineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation{self.pageViewController.doubleSided = NO;return UIPageViewControllerSpineLocationMin;}由于spineLocation属性是只读的,所以只能在这个方法中设置书脊位置,该方法可以根据屏幕旋转方向的不同来动态设定书脊的位置,实现代码可以参考下面的代码:- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewControllerspineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation{UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];UIViewController* page1ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page1"];UIViewController* page2ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page2"];if (orientation == UIInterfaceOrientationLandscapeLeft || orientation == UIInterfaceOrientationLandscapeRight){//取出第一个视图控制器,最为PageViewController首页NSArray *viewControllers = @[page1ViewController, page2ViewController];[self.pageViewController setViewControllers:viewControllersdirection:UIPageViewControllerNavigationDirectionForward animated:YES completion:NULL];self.pageViewController.doubleSided = NO;return UIPageViewControllerSpineLocationMid;}//取出第一个视图控制器,最为PageViewController首页NSArray *viewControllers = @[page1ViewController];[self.pageViewController setViewControllers:viewControllersdirection:UIPageViewControllerNavigationDirectionForward animated:YES completion:NULL];self.pageViewController.doubleSided = NO;return UIPageViewControllerSpineLocationMin;}


这只是一个基本的实现,要根据具体的应用具体再定。用平铺导航实现时,UIPageViewController往往不需要实现屏幕旋转的支持,而且书脊的位置也不会设置在中间。

代码编写完毕看效果。

4

这篇关于iOS开发那些事-平铺导航-基于Page的导航及案例实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/912132

相关文章

MySQL 中的 JSON 查询案例详解

《MySQL中的JSON查询案例详解》:本文主要介绍MySQL的JSON查询的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 的 jsON 路径格式基本结构路径组件详解特殊语法元素实际示例简单路径复杂路径简写操作符注意MySQL 的 J

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充?为什么选择中位数填充?示例数据结果分析完整代码总结在数据分析和机器学习过程中,处理缺失数

Golang HashMap实现原理解析

《GolangHashMap实现原理解析》HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持高效的插入、查找和删除操作,:本文主要介绍GolangH... 目录HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py