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

简介: <p><strong>基于分页导航实现</strong></p> <p><span id="more-225"></span></p> <p>在iOS 5之后,可以使用分页控制器(UIPageViewController)构建类似于电子书效果的应用,我们称为基于分页的应用。一个分页应用有很多相关的视图控制器</p> <p align="center"> <a href="http:/

基于分页导航实现

在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:UIPageViewControllerTransitionStylePageCurl

navigationOrientation: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:viewControllers

direction: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 *)pageViewController

viewControllerBeforeViewController:(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 *)pageViewController

viewControllerAfterViewController:(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 *)pageViewController

spineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation

{

self.pageViewController.doubleSided = NO;

return UIPageViewControllerSpineLocationMin;

}

由于spineLocation属性是只读的,所以只能在这个方法中设置书脊位置,该方法可以根据屏幕旋转方向的不同来动态设定书脊的位置,实现代码可以参考下面的代码:

- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewController

spineLocationForInterfaceOrientation:(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:viewControllers

direction:UIPageViewControllerNavigationDirectionForward animated:YES completion:NULL];

self.pageViewController.doubleSided = NO;

return UIPageViewControllerSpineLocationMid;

}

//取出第一个视图控制器,最为PageViewController首页

NSArray *viewControllers = @[page1ViewController];

[self.pageViewController setViewControllers:viewControllers

direction:UIPageViewControllerNavigationDirectionForward animated:YES completion:NULL];

self.pageViewController.doubleSided = NO;

return UIPageViewControllerSpineLocationMin;

}


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

代码编写完毕看效果。

4

目录
相关文章
|
13天前
|
前端开发 Android开发 iOS开发
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
【4月更文挑战第30天】Flutter 框架实现跨平台移动应用,通过一致的 UI 渲染(Skia 引擎)、热重载功能和响应式框架提高开发效率和用户体验。然而,Android 和 iOS 的系统差异、渲染机制及编译过程影响性能。性能对比显示,iOS 可能因硬件优化提供更流畅体验,而 Android 更具灵活性和广泛硬件支持。开发者可采用代码、资源优化和特定平台优化策略,利用性能分析工具提升应用性能。
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
|
13天前
|
存储 Swift iOS开发
使用Swift开发一个简单的iOS应用的详细步骤。
使用Swift开发iOS应用的步骤包括:创建Xcode项目,设计界面(Storyboard或代码),定义数据模型,实现业务逻辑,连接界面和逻辑,处理数据存储(如Core Data),添加网络请求(必要时),调试与测试,根据测试结果优化改进,最后提交至App Store或其它平台发布。
32 0
|
13天前
|
安全 Swift iOS开发
【Swift 开发专栏】Swift 与 UIKit:构建 iOS 应用界面
【4月更文挑战第30天】本文探讨了Swift和UIKit在构建iOS应用界面的关键技术和实践方法。Swift的简洁语法、类型安全和高效编程模型,加上与UIKit的紧密集成,使开发者能便捷地创建用户界面。UIKit提供视图、控制器、布局、动画和事件处理等功能,支持灵活的界面设计。实践中,遵循设计原则,合理组织视图层次,运用布局和动画,以及实现响应式设计,能提升界面质量和用户体验。文章通过登录、列表和详情界面的实际案例展示了Swift与UIKit的结合应用。
|
13天前
|
存储 安全 Swift
【Swift 开发专栏】使用 Swift 开发一个简单的 iOS 应用
【4月更文挑战第30天】本文介绍了使用 Swift 开发简单 iOS 待办事项应用的步骤。首先,阐述了 iOS 开发的吸引力及 Swift 语言的优势。接着,详细说明了应用的需求和设计,包括添加、查看和删除待办事项的功能。开发步骤包括创建项目、界面搭建、数据存储、功能实现,并提供了相关代码示例。最后,强调了实际开发中需注意的细节和优化,旨在帮助初学者掌握 Swift 和 iOS 开发基础。
|
21天前
|
iOS开发 开发者 UED
利用SwiftUI构建动态列表:iOS开发的新范式
【4月更文挑战第22天】在本文中,我们将深入探讨如何使用SwiftUI来创建动态列表。SwiftUI是苹果最新推出的用户界面工具集,它允许开发者以声明式的方式描述用户界面,从而简化了代码的复杂性。我们将通过具体的代码实例,展示如何利用SwiftUI的List和ForEach视图来创建动态列表,并讨论其在实际开发中的应用。
20 2
|
2月前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
106 3
|
4月前
|
存储 iOS开发
iOS 开发,如何进行应用的本地化(Localization)?
iOS 开发,如何进行应用的本地化(Localization)?
123 2
|
4月前
|
存储 数据建模 数据库
IOS开发数据存储:什么是 UserDefaults?有哪些替代方案?
IOS开发数据存储:什么是 UserDefaults?有哪些替代方案?
43 0
|
4月前
|
安全 编译器 Swift
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
106 2
|
2月前
|
API 开发工具 Android开发
iOS 和 Android 平台的开发有哪些主要区别?
iOS与Android开发区别:iOS用Objective-C/Swift,App Store唯一下载渠道;Android用Java/Kotlin,多商店发布(如Google Play、华为市场)。设计上,iOS简洁一致,Android灵活可定制。开发工具,iOS用Xcode,Android用Android Studio。硬件和系统多样性,iOS统一,Android复杂。权限管理、审核流程及API各有特点,开发者需依据目标平台特性进行选择。
38 3