使用 PageViewController + PageControl 來實作前導頁的功能
實作前導頁的方式有 N 種，既可以使用 ScrollView + PageControl 亦或是 PageViewController + PageControl，而今天法蘭克就要使用後者來教大家實作前導頁的功能😀😀😀
前置作業
▼在開始實作前先來看看完成圖
▼Storyboard 的樣貌
以下分別說明該專案的五個 ViewController 作用為何？請對照圖中的數字。
- 該專案的 RootViewController，也就是應用程式一載入的畫面，該 ViewController 上掛載了顯示頁數的 PageControl 和執行翻頁動作的 ContainerView，而該 ContainerView 即是 PageViewController。
- 執行翻頁動作的 PageViewController，被嵌入在 RootViewController 的 ContainerView 內。
- 用來顯示第一頁的 ViewController。
- 用來顯示第二頁的 ViewController。
- 用來顯示第三頁的 ViewController。
以上大概清楚專案的架構後，接下來就從開啟一新專案一步一步的來實作吧😀😀😀
實作
先將 UI 拉好再新增對應的 ViewController，最後再來開始加入程式碼
▼在 Main.storyboard 加入三個 ViewController 的場景，並調整其 Background Color 和加上 Label 以用來識別不同的頁數
▼將該三個場景分別加入 FirstPageViewController、SecondPageViewController、ThirdPageViewController 的 Storyboard ID 以方便用來初始化
▼新增三個 UIViewController 類別分別為 FirstPageViewController、SecondPageViewController、ThirdPageViewController 以用來對應第一、二、三頁的場景
▼依序將三個類別和場景關聯起來
▼在 RootViewController 的場景上加入 ContainerView 的視圖
▼設定 ContainerView 的 Coonstraints
▼在 RootViewController 的場景上新增 PageControl 的視圖
▼設定 PageControl 的 Constraints
▼建立 PageControl 的 Outlet
▼新增一 PageViewController 類別以用來對應 ContainerView 的場景
▼將 PageViewController 類別和 ContainerView 關聯起來
以上關於 UI 都已實作完成，接下來開始撰寫程式邏輯。
▼在 PageViewController.swift 加入以下程式碼
這裡法蘭克不會由上而下開始說明，而是從加入程式碼的先後順序來說明，大家可以選擇一次性加入再來看說明；亦或者跟著以下的說明來逐步加入片段的程式碼。我想後者會比較容易理解喔😀😀😀
第 20 行 => 宣告一陣列以用來存放要在 PageViewController 顯示的 ViewController。
第 44~ 50 行 => 依 Storybyard ID 取得 ViewController。
第 26 ~ 29 行 => 依 Storyboard ID 生成 ViewController 並加到要用來顯示 PageViewController 畫面的陣列裡。
第 32 行 => 代理 PageViewController 以用來設定翻頁的邏輯。
第 35 行 => 設定 PageViewControoler 的首頁。
第 54 ~ 92 行 => 遵從 UIPageViewControllerDataSource 並實作 pageViewController(_:viewControllerBefore:) 和 pageViewController(_:viewControllerAfter:) 以達到往前/往後翻頁的邏輯，而相關的翻頁邏輯說明可參考註解的部份。
以上都加入後，先試著啟動模擬器，看看是否有達到翻頁的效果，答案是可以喔，但此時 PageControl 還沒有作用！如果確認無誤就讓我們繼續往下吧！
第 1 ~ 16 行 => 宣告PageViewController 的 delegate(PageViewControllerDelegate) 以用來告知 RootViewController 上的 PageControl 總共有幾頁/當前頁數。
第 21 行 => 宣告 PageViewControllerDelegate。
第 31 行 => 代理 PageViewController 以用來 handle 翻頁的行為。
第 94 ~ 113 行 => 遵從 UIPageViewControllerDelegate 並實作 pageViewController(_:didFinishAnimating:previousViewControllers:transitionCompleted:) 來 handle 翻頁時的動作，而相關的翻頁邏輯說明可參考註解的部份。
以上 PageViewController 的邏輯都完成了，再來就是要在 RootViewController 上加入總共有幾頁/當前頁數的邏輯。
第 16 ~ 22 行 => 透過 prepare(for:sender:) 代理 PageViewController。
第 26 ~ 46 行 => 遵從 PageViewControllerDelegate 的協議以用來設定 PageControl 的總頁數/當前頁數。
以上大功告成囉，試著啟動模擬器試試！！
結論
該範例已放上 GitHub，如有更好的作法或問題都可以留言給法蘭克。
如果您喜歡我的文章，請多按幾下「拍手」給我鼓勵，或是按「follow」讓我持續提供好文章給您。
