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

基于分页导航实现

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

 

分页控制器(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定义,该枚举类型下的成员变量如下所示。

     

下面我们使用页面导航实现城市信息这个应用。使用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往往不需要实现屏幕旋转的支持,而且书脊的位置也不会设置在中间。

代码编写完毕看效果。

时间: 2024-10-30 18:15:46

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

iOS开发那些事-平铺导航–基于分屏导航及案例实现

平铺导航模式是非常重要的导航模式.一般用于简单的扁平化信息浏览或任务.扁平化信息是指这些信息之间没有从属的层次关系,如中国的城市中北京.上 海和哈尔滨之间是扁平化信息,而哈尔滨市与黑龙江省之间的关系是从属的层次关系,层次关系信息可以采用标签导航和树形结构导航. 从一个案例开始介绍平铺导航.如果我想为开发一个基于iPhone的"画廊"应用,目前只有3幅名画(左图是达芬奇-蒙娜丽莎.中图是罗丹-思想者.右图是毕加索-哭泣)收录到应用中.由于这3幅名画之间没有层次关系,他们之间是扁平的. 基

iOS开发入门:平铺导航-基于Page的导航及案例实现

基于分页导航实现 在iOS 5之后,可以使用分页控制器(UIPageViewController)构建类似于电子书效果的应用,我们称为基于分页的应用.一个分页应用有很多相关的视图控制器 开发入门:平铺导航-基于Page的导航及案例实现-"> 分页控制器(PageViewController)需要放置在一个父视图控制器中,在分页控制器下面还要有子视图控制器,每个子视图控制器对应图中的一个页面. 在基于分页导航实现的应用中需要的类和协议:UIPageViewControllerDataSour

iOS开发入门:平铺导航–基于分屏导航及案例实现

平铺导航模式是非常重要的导航模式.一般用于简单的扁平化信息浏览或任务.扁平化信息是指这些信息之间没有从属的层次关系,如中国的城市中北京.上  海和哈尔滨之间是扁平化信息,而哈尔滨市与黑龙江省之间的关系是从属的层次关系,层次关系信息可以采用标签导航和树形结构导航. 从一个案例开始介绍平铺导航.如果我想为开发一个基于iPhone的"画廊"应用,目前只有3幅名画(左图是毕加索-哭泣.中图是达芬奇-蒙娜丽莎.右图是罗丹-思想者)收录到应用中.由于这3幅名画之间没有层次关系,他们之间是扁平的.

iOS开发那些事-iOS网络编程同步GET方法请求编程

iOS SDK为HTTP请求提供了同步和异步请求两种不同的API,而且可以使用GET或POST等请求方法.我们先了解其中最为简单的同步GET方法请求. 为了学习这些API的使用MyNotes"备忘录"应用实例,数据来源于服务器端,而不是本地的Notes.xml(或Notes.json)文件. 首先实现查询业务,查询业务请求可以在主视图控制器MasterViewController类中实现,其中MasterViewController.h代码如下: #import <UIKit/U

iOS开发那些事-如何编译iOS程序

我们从编写到发布应用会经历3个阶段:模拟器上运行调试.设备上运行调试和发布编译,苹果为了防止非法设备和非开发人员调试和发布应用,使用配置概要文件(Provisioning Profiles)控制在设备上运行调试和发布编译阶段,配置概要文件分为两种:开发配置概要文件和发布配置概要文件 1.创建发布配置概要文件 创建过程是先登录iOS开发中心的配置门户网站(iOS Provisioning Portal),通过左边的导航菜单Provisioning进入.选择Distribution标签就是管理发布配

iOS开发那些事--简单表视图

表视图是iOS开发中使用最频繁的视图,我们一般都会选择以表的形式来展现数据,比如通讯录.频道列表等.表视图分段.分组.索引等功能使我们所展示的数据看起来更规整更有调理,更令人兴奋的是表视图还可以利用细节展示等功能多层次的展示数据,正所谓一表胜千言. 不过,相较于其它控件表视图的使用比较复杂,但是对比于表视图各种灵活多变的功能,我们在使用上花费的努力还是相当值得的. 简单表视图 表视图的形式灵活多变,本着由浅入深的原则,我们先从简单表视图开始学习.本节讲的简单表视图是动态表,(iOS 5之前全部是

iOS开发那些事-关于性能优化–选择nib还是故事板的讨论

故事板是苹果在iOS5之后推出的技术,本意是集成多个nib文件于一个故事板文件,管理起来方便,故事板还能反应控制器之间的导航关系,很多导航是需要连连线就可以了,不需写代码,使用起来很方便.但是我告诫读者,从内存占用角度看故事板不是一个好的技术. 为了比较我们使用Xcode中的Master-Detail模板分别创建,基于故事板的应用StoryboardDemo和基于nib的应用NibDemo.然后通过Instruments工具的Allocations模板分析ViewController视图控制器加

iOS开发那些事-iOS常用设计模式–委托模式

对于iOS开发,举例Cocoa框架下的几个设计模式为大家分析.当然,Cocoa框架下关于设计模式的内容远远不止这些,我们选择了常用的几种:单例模式.委托模式.观察者模式.MVC模式. 委托模式 委托模式从GoF 设计装饰(Decorator).适配器(Adapter)和模板方法(Template Method)等模式演变而来.几乎每一个应用都会或多或少地使用到委托模式.不只是CocoaTouch框架,在Cocoa框架中委托模式也得到了广泛的应用. 问题提出 对于应用生命周期的非运行状态--应用启

iOS开发那些事-故事板实现标签导航

故事板实现标签导航 用故事板技术实现标签导航模式. 使用"Tabbed Application"模版,创建一个名为 "TabNavigationStoryborad"的工程.勾选"Use Storyborads"."Use Automatic Reference Counting".创建完成之后打开MainStoryboard.storyboard. 三个Controller Scene 会有由一些线连接起来,这些线就是Seg