基于分页导航实现
在iOS 5之后,可以使用分页控制器(UIPageViewController)构建类似于电子书效果的应用,我们称为基于分页的应用。一个分页应用有很多相关的视图控制器
分页控制器(PageViewController)需要放置在一个父视图控制器中,在分页控制器下面还要有子视图控制器,每个子视图控制器对应图中的一个页面。
在基于分页导航实现的应用中需要的类和协议:UIPageViewControllerDataSource协议和 UIPageViewControllerDelegate协议和UIPageViewController 类,UIPageViewController没有对应的视图类。
UIPageViewControllerDelegate委托协议中,最重要的方法为 pageViewController:spineLocationForInterfaceOrientation:,它根据屏幕旋转方向设置书脊位置 (Spine Location)和初始化首页。
UIPageViewController中有两个常用的属性:双面显示(doubleSided)和书脊位置(spineLocation)。
1.双面显示,是在页面翻起的时候,偶数页面会在背面显示。图为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往往不需要实现屏幕旋转的支持,而且书脊的位置也不会设置在中间。
代码编写完毕看效果。