平铺导航模式是非常重要的导航模式。一般用于简单的扁平化信息浏览或任务。扁平化信息是指这些信息之间没有从属的层次关系，如中国的城市中北京、上 海和哈尔滨之间是扁平化信息，而哈尔滨市与黑龙江省之间的关系是从属的层次关系，层次关系信息可以采用标签导航和树形结构导航。

从一个案例开始介绍平铺导航。如果我想为开发一个基于iPhone的“画廊”应用，目前只有3幅名画（左图是毕加索-哭泣、中图是达芬奇-蒙娜丽莎、右图是罗丹-思想者）收录到应用中。由于这3幅名画之间没有层次关系，他们之间是扁平的。

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

基于分屏导航实现

基于分屏导航是平铺导航模式的主要实现方式，主要涉及的控件有：分屏控件（UIPageControl）和ScrollView，分屏控件是iOS标准控件。

基 于分屏导航的手势有两种，一个是点击小点的左边（上边）或右边（下边）实现翻屏，另一个是用手在屏幕上滑动实现翻屏。屏幕的总数应该限制在20个 以内，超过20个分屏控件的小点就会溢出。事实上，如果一个应用超过10屏，此时使用基于分屏导航的平铺导航模式已经不是很方便了。

下面我 们采用基于分屏导航模式实现“画廊”应用。使用Single View Application模板创建一个名为PageControlNavigation的工程。将ScrollView和PageControl控件拖曳到 设计界面，将其摆放到合适的位置，通过属性将视图背景设置为黑色。

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

在Interface Builder中选中ScrollView控件，打开其属性检查器，设置Scrollers中的属性，此时该ScrollView控件不显示水平和垂直滚动条，但可以滚动也可以分屏。

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

在Interface Builder中选中PageControl控件，打开其属性检查器，设置Pages中“# of Pages”（总屏数）属性为3，Current（当前屏）属性为0。再打开尺寸检查器，修改Width（宽度）属性为200，将这个属性设置大一些是为 了便于手指点击。

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

最后，还需要为这两个控件定义输出口并连线，而且要为分屏控件控件定义响应屏幕变化事件的方法changePage:并连线。

完成之后，ViewController.h文件中增加的代码如下：

 

  1. @property (weak, nonatomic) IBOutlet UIScrollView *scrollView; 
  2.  
  3. @property (weak, nonatomic) IBOutlet UIPageControl *pageControl; 
  4.  
  5. - (IBAction)changePage:(id)sender; 

下面设计3个视图，将3个View Controller视图控制器拖曳到MainStoryboard.storyboard的设计界面中，然后再并分别拖曳3个ImageView到3个不同视图上。

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

然后再分别修改3个ImageView的Image属性为名画的文件名。

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

设 置完成ImageView的Image属性后，再依次选中视图控制器，将Storyboard ID分别修改为page1、page2、page3。与模态视图的例子不同，我们不需要再创建视图控制器的子类。就本例而言，我们只需展示一些图片。如果 需要处理动作事件，则需要自定义视图控制器的子类。

设计完成后，我们看看程序代码ViewController.h：

 

  1. #import <UIKit/UIKit.h> 
  2.  
  3. @interface ViewController : UIViewController <UIScrollViewDelegate> 
  4.  
  5. @property (strong, nonatomic) UIView *page1; 
  6.  
  7. @property (strong, nonatomic) UIView *page2; 
  8.  
  9. @property (strong, nonatomic) UIView *page3; 
  10.  
  11. @property (weak, nonatomic) IBOutlet UIScrollView *scrollView; 
  12.  
  13. @property (weak, nonatomic) IBOutlet UIPageControl *pageControl; 
  14.  
  15. - (IBAction)changePage:(id)sender; 
  16.  
  17. @end 

由于需要响应UIScrollView的事件，我们在ViewController中实现了UIScrollViewDelegate协议。

下面我们看看ViewController.m中viewDidLoad方法的代码：

 

  1. - (void)viewDidLoad 
  2.  
  3. { 
  4.  
  5. [super viewDidLoad]; 
  6.  
  7. // Do any additional setup after loading the view, typically from a nib. 
  8.  
  9. self.scrollView.contentSize  = CGSizeMake(self.view.frame.size.width*3, self.scrollView.frame.size.height); 
  10.  
  11. self.scrollView.frame = self.view.frame; 
  12.  
  13. UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil]; 
  14.  
  15. UIViewController* page1ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page1"]; 
  16.  
  17. self.page1 = page1ViewController.view; 
  18.  
  19. self.page1.frame = CGRectMake(0.0f, 0.0f, 320.0f, 420.0f); 
  20.  
  21. UIViewController* page2ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page2"]; 
  22.  
  23. self.page2 = page2ViewController.view; 
  24.  
  25. self.page2.frame = CGRectMake(320.0f, 0.0f, 320.0f, 420.0f); 
  26.  
  27. UIViewController* page3ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page3"]; 
  28.  
  29. self.page3 = page3ViewController.view; 
  30.  
  31. self.page3.frame = CGRectMake(2 * 320.0f, 0.0f, 320.0f, 420.0f); 
  32.  
  33. self.scrollView.delegate = self; 
  34.  
  35. [self.scrollView addSubview:self.page1]; 
  36.  
  37. [self.scrollView addSubview:self.page2]; 
  38.  
  39. [self.scrollView addSubview:self.page3]; 
  40.  
  41. } 

该 方法主要进行控件初始化，由于需要计算各个控件的位置，代码比较多，但是基本上没什么难点。self.scrollView.delegate = self是把当前视图控制（UIScrollViewDelegate实现对象）分配给ScrollView控件，以便响应事件处理，其他事件是 scrollViewDidScroll:，其代码如下：

 

  1. - (void) scrollViewDidScroll: (UIScrollView *) aScrollView 
  2.  
  3. { 
  4.  
  5. CGPoint offset = aScrollView.contentOffset; 
  6.  
  7. self.pageControl.currentPage = offset.x / 320.0f; 
  8.  
  9. } 

当左右滑动屏幕，ScrollView控件滚动完成的时候，要计算和设定分屏控件的当前屏currentPage。当点击分屏控件时屏幕发生变化，此时触发changePage:方法，其代码如下：

 

  1. - (IBAction)changePage:(id)sender 
  2.  
  3. { 
  4.  
  5. [UIView animateWithDuration:0.3f animations:^{ 
  6.  
  7. int whichPage = self.pageControl.currentPage; 
  8.  
  9. self.scrollView.contentOffset = CGPointMake(320.0f * whichPage, 0.0f); 
  10.  
  11. }]; 
  12.  
  13. } 

在 上述代码中，我们根据分屏控件当前屏幕属性（currentPage）重新调整了ScrollView控件的偏移量，而且为了使屏幕变化产生动画 效果，使用了[UIView animateWithDuration:0.3f animations:^{ …}]代码，重新调整ScrollView控件偏移量。

运行代码，得到的效果

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