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分別修改成page一、page二、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控件偏移量。

運行代碼，獲得的效果