第 21 章
使用 UIPageViewController 與容器視圖建立導覽畫面

If you're interested in the living heart of what you do, focus on building things rather than talking about them.

- Ryan Freitas, About.me

最初啟動一個 App時,你可能會發現有一系列導覽(或教學)畫面。常見於多款 App 的運用,帶領使用者透過多個畫面,逐步示範所有的特色功能。有些人說如果你的 App 還需要導覽畫面的話,可能會是個失敗的作品。我個人是不討厭導覽畫面,因為我發現大部分是有用的,只要讓它儘量保持簡短,不要讓它含括太多冗長且無聊的教學。這邊我不準備爭論是否應該在 App 加上導覽畫面的話題,我只想教導你該如何做出這個功能。

在本章中,我將教導你如何使用 UIPageViewController 來建立導覽畫面,你也會將學到如何使用一種特殊型態的視圖,稱作容器視圖(Container View)。

圖 21-1. IFTTT 的導覽畫面範例
圖 21-1. IFTTT 的導覽畫面範例

要實作導覽畫面的其中一種方式使用 UIPageViewController 類別。它讓開發者建立內容頁面,每一頁是由自己的視圖控制器來處理。這個類別可支援滾動式轉場,有了 UIPageViewController,使用者可以輕易地經由簡單的手勢,導覽多個頁面。頁面視圖控制器(Page View Controller)不限於只建立導覽畫面,你可以在遊戲如 Angry Bird 發現頁面視圖的實作(在頁面顯示有多少的關卡),或者像電子書 App(顯示目錄頁) 一樣。

UIPageViewController 是一個可以被高度支配的類別,你可以做如下的定義:

  • 頁面視圖的方向:垂直與水平方向。
  • 轉場樣式:捲頁式轉場樣式或者滾動式轉場樣式。
  • 書脊位置:只適用捲頁式轉場樣式。
  • 頁面間距:只適用滾動式轉場樣式,用來定義內頁空間。

我們將在 FoodPin App 中加入一個簡單的導覽畫面,透過這個新功能的實作,你將學到 UIPageViewController 是如何運作的。也就是說, 我們不示範 UIPageViewController 的每一個功能。我們只是想要使用滾動式轉場樣式來呈現一系列的導覽畫面。對於 UIPageViewController 有了基本概念之後,我相信你便能夠探索頁面視圖控制器的其他功能。

我們開始吧 !

本文摘自《iOS 13 App程式設計實戰心法》一書,博碩授權轉載。如果你想更深入學習Swift程式設計和下載完整程式碼,你可以從AppCoda網站購買完整電子版。

results matching ""

    No results matching ""