天天看點

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

基于分頁導航實作

在ios 5之後,可以使用分頁控制器(uipageviewcontroller)建構類似于電子書效果的應用,我們稱為基于分頁的應用。一個分頁應用有很多相關的視圖控制器

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

分頁控制器(pageviewcontroller)需要放置在一個父視圖控制器中,在分頁控制器下面還要有子視圖控制器,每個子視圖控制器對應圖中的一個頁面。

在基于分頁導航實作的應用中需要的類和協定:uipageviewcontrollerdatasource協定和uipageviewcontrollerdelegate協定和uipageviewcontroller類,uipageviewcontroller沒有對應的視圖類。

uipageviewcontrollerdelegate委托協定中,最重要的方法為pageviewcontroller:spinelocationforinterfaceorientation:,它根據螢幕旋轉方向設定書脊位置(spine location)和初始化首頁。

uipageviewcontroller中有兩個常用的屬性:雙面顯示(doublesided)和書脊位置(spinelocation)。

1.雙面顯示,是在頁面翻起的時候,偶數頁面會在背面顯示。圖6-13右圖為doublesided設定為yes情況,圖6-14中圖為doublesided設定為no(單面顯示),單面顯示在頁面翻起的時候,能夠看到頁面的背面,背面的内容是目前頁面透過去的,與目前内容是相反的鏡像。

2.書脊位置。書脊位置也是很重要的屬性,但是它的spinelocation 屬性是隻讀的,要設定它,需要通過uipageviewcontrollerdelegate委托協定中的pageviewcontroller:spinelocationforinterfaceorientation:方法。書脊位置由枚舉uipageviewcontrollerspinelocation定義,該枚舉類型下的成員變量如下所示。

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

下面我們使用頁面導航實作城市資訊這個應用。使用single view application模闆建立一個名為 pagenavigation的工程。

可以從pagecontrolnavigation工程中複制過來,方法是在打開mainstoryboard.storyboard選中3個視圖控制器,按下command+c組合鍵拷貝,再到pagenavigation中打開mainstoryboard.storyboard,按下command+v組合鍵粘貼,就可以了。

這樣ui設計工作就結束了,下面的工作都是由代碼完成的。我們先看看viewcontroller.h的代碼:

在上述代碼中,viewcontroller實作了uipageviewcontrollerdatasource和uipageviewcontrollerdelegate協定。成員變量pageindex儲存了目前頁面的索引,pageviewcontroller屬性儲存了uipageviewcontroller執行個體。

下面我們看看程式代碼viewcontroller.m的viewdidload方法:

在上述代碼中,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協定實作方法的代碼:

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

代碼編寫完畢看效果。

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