iOS開發那些事-平鋪導航-基於Page的導航及案例實現

基於分頁導航實現

 

在iOS 5之後，可以使用分頁控制器（UIPageViewController）構建類似於電子書效果的應用，我們稱為基於分頁的應用。一個分頁應用有很多相關的視圖控制器

 

分頁控制器（PageViewController）需要放置在一個父視圖控制器中，在分頁控制器下面還要有子視圖控制器，每個子視圖控制器對應圖中的一個頁面。

在基於分頁導航實現的應用中需要的類和協議：UIPageViewControllerDataSource協議和 UIPageViewControllerDelegate協議和UIPageViewController 類，UIPageViewController沒有對應的視圖類。

UIPageViewControllerDelegate委託協議中，最重要的方法為 pageViewController:spineLocationForInterfaceOrientation:，它根據旋轉螢幕方向設定書脊位置 （Spine Location）和初始化首頁。

UIPageViewController中有兩個常用的屬性：雙面顯示（doubleSided)和書脊位置（spineLocation）。

1.雙面顯示，是在頁面翻起的時候，偶數頁面會在背面顯示。圖6-13右圖為doubleSided設定為YES情況，圖為 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:UIPageViewControllerTransitionStylePageCurlnavigationOrientation: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:viewControllersdirection: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 *)pageViewControllerviewControllerBeforeViewController:(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 *)pageViewControllerviewControllerAfterViewController:(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 *)pageViewControllerspineLocationForInterfaceOrientation:(UIInterfaceOrientation)orientation{self.pageViewController.doubleSided = NO;return UIPageViewControllerSpineLocationMin;}由於spineLocation屬性是唯讀，所以只能在這個方法中設定書脊位置，該方法可以根據旋轉螢幕方向的不同來動態設定書脊的位置，實現代碼可以參考下面的代碼：- (UIPageViewControllerSpineLocation)pageViewController:(UIPageViewController *)pageViewControllerspineLocationForInterfaceOrientation:(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:viewControllersdirection:UIPageViewControllerNavigationDirectionForward animated:YES completion:NULL];self.pageViewController.doubleSided = NO;return UIPageViewControllerSpineLocationMid;}//取出第一個視圖控制器，最為PageViewController首頁NSArray *viewControllers = @[page1ViewController];[self.pageViewController setViewControllers:viewControllersdirection:UIPageViewControllerNavigationDirectionForward animated:YES completion:NULL];self.pageViewController.doubleSided = NO;return UIPageViewControllerSpineLocationMin;}

 

這隻是一個基本的實現，要根據具體的應用具體再定。用平鋪導航實現時，UIPageViewController往往不需要實現旋轉螢幕的支援，而且書脊的位置也不會設定在中間。

代碼編寫完畢看效果。