iOS開發那些事-平鋪導航–基於分屏導航及案例實現

平鋪導航模式是非常重要的導航模式。一般用於簡單的扁平化資訊瀏覽或任務。扁平化資訊是指這些資訊之間沒有從屬的層次關係，如中國的城市中北京、上 海和哈爾濱之間是扁平化資訊，而哈爾濱市與黑龍江省之間的關係是從屬的層次關係，層次關係資訊可以採用標籤導航和樹形結構導航。

從一個案例開始介紹平鋪導航。如果我想為開發一個基於iPhone的“畫廊”應用，目前只有3幅名畫（左圖是畢加索-哭泣、中圖是達芬奇-蒙娜麗莎、右圖是羅丹-思想者）收錄到應用中。由於這3幅名畫之間沒有層次關係，他們之間是扁平的。

基於分屏導航實現

基於分屏導航是平鋪導航模式的主要實現方式，主要涉及的控制項有：分屏控制項（UIPageControl）和ScrollView，分屏控制項是iOS標準控制項。

基 於分屏導航的手勢有兩種，一個是點擊小點的左邊（上邊）或右邊（下邊）實現翻屏，另一個是用手在螢幕上滑動實現翻屏。螢幕的總數應該限制在20個 以內，超過20個分屏控制項的小點就會溢出。事實上，如果一個應用超過10屏，此時使用基於分屏導航的平鋪導航模式已經不是很方便了。

下面我 們採用基於分屏導航模式實現“畫廊”應用。使用Single View Application模板建立一個名為PageControlNavigation的工程。將ScrollView和PageControl控制項拖曳到 設計介面，將其擺放到合適的位置，通過屬性將視圖背景設定為黑色。

 

在Interface Builder中選中ScrollView控制項，開啟其屬性偵測器，設定Scrollers中的屬性，此時該ScrollView控制項不顯示水平和垂直捲軸，但可以滾動也可以分屏。

 

在Interface Builder中選中PageControl控制項，開啟其屬性偵測器，設定Pages中“# of Pages”（總屏數）屬性為3，Current（當前屏）屬性為0。再開啟尺寸檢查器，修改Width（寬度）屬性為200，將這個屬性設定大一些是為 了便於手指點擊。

 

最後，還需要為這兩個控制項定義輸出口並連線，而且要為分屏控制項控制項定義響應螢幕變化事件的方法changePage:並連線。

完成之後，ViewController.h檔案中增加的代碼如下：

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;- (IBAction)changePage:(id)sender;

 

 

下面設計3個視圖，將3個View Controller視圖控制器拖曳到MainStoryboard.storyboard的設計介面中，然後再並分別拖曳3個ImageView到3個不同視圖上。

然後再分別修改3個ImageView的Image屬性為名畫的檔案名稱。

設 置完成ImageView的Image屬性後，再依次選中視圖控制器，將Storyboard ID分別修改為page1、page2、page3。與模態視圖的例子不同，我們不需要再建立視圖控制器的子類。就本例而言，我們只需展示一些圖片。如果 需要處理動作事件，則需要自訂視圖控制器的子類。

設計完成後，我們看看程式碼ViewController.h：

#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UIScrollViewDelegate>@property (strong, nonatomic) UIView *page1;@property (strong, nonatomic) UIView *page2;@property (strong, nonatomic) UIView *page3;@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;- (IBAction)changePage:(id)sender;@end

 

由於需要響應UIScrollView的事件，我們在ViewController中實現了UIScrollViewDelegate協議。

下面我們看看ViewController.m中viewDidLoad方法的代碼：

- (void)viewDidLoad{[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.self.scrollView.contentSize  = CGSizeMake(self.view.frame.size.width*3, self.scrollView.frame.size.height);self.scrollView.frame = self.view.frame;UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];UIViewController* page1ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page1"];self.page1 = page1ViewController.view;self.page1.frame = CGRectMake(0.0f, 0.0f, 320.0f, 420.0f);UIViewController* page2ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page2"];self.page2 = page2ViewController.view;self.page2.frame = CGRectMake(320.0f, 0.0f, 320.0f, 420.0f);UIViewController* page3ViewController = [mainStoryboard instantiateViewControllerWithIdentifier:@"page3"];self.page3 = page3ViewController.view;self.page3.frame = CGRectMake(2 * 320.0f, 0.0f, 320.0f, 420.0f);self.scrollView.delegate = self;[self.scrollView addSubview:self.page1];[self.scrollView addSubview:self.page2];[self.scrollView addSubview:self.page3];}

 

該 方法主要進行控制項初始化，由於需要計算各個控制項的位置，代碼比較多，但是基本上沒什麼痛點。self.scrollView.delegate = self是把當前視圖控制（UIScrollViewDelegate實現對象）分配給ScrollView控制項，以便響應事件處理，其他事件是 scrollViewDidScroll:，其代碼如下：

- (void) scrollViewDidScroll: (UIScrollView *) aScrollView{CGPoint offset = aScrollView.contentOffset;self.pageControl.currentPage = offset.x / 320.0f;}

 

 

當左右滑動螢幕，ScrollView控制項滾動完成的時候，要計算和設定分屏控制項的當前屏currentPage。當點擊分屏控制項時螢幕發生變化，此時觸發changePage:方法，其代碼如下：

- (IBAction)changePage:(id)sender{[UIView animateWithDuration:0.3f animations:^{int whichPage = self.pageControl.currentPage;self.scrollView.contentOffset = CGPointMake(320.0f * whichPage, 0.0f);}];}

 

 

在 上述代碼中，我們根據分屏控制項當前螢幕屬性（currentPage）重新調整了ScrollView控制項的位移量，而且為了使螢幕變化產生動畫 效果，使用了[UIView animateWithDuration:0.3f animations:^{ …}]代碼，重新調整ScrollView控制項位移量。

運行代碼，得到的效果