iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 25
0
Mobile Development

諸神黃昏下的 iOS 工程師系列 第 25

D25 - 使用 APP前,記得詳閱 PageViewController 說明書

讓我們使用 PageViewController 製作一個導覽頁面吧

? 隕石小故事

在隕石開發或接案當中,常常會碰到要在同一個畫面上去做切換不同子畫面中的效果,而這個切換子畫面的動畫效果往往都是滾動、翻頁之類的轉場效果,對當時的我真是一大挑戰...。(當時的我都還不知道怎麼在同一個畫面上建立多個畫面了,還要處理一堆雜七雜八的效果 QQ)

Overview

我們在開發中常常會碰到這種切換的小需求,無論只是單純變化或是透過動畫效果來改變它。如果只是單純變化可能可以透過抽換 ViewController 來處理,但是如果是需要滾動的動畫效果該怎麼處理呢?很幸運的,我們有一種 Controller 稱為 PageViewController,我們能夠在其中加入許多 ViewController 並且透過 PageViewController 來對他們進行切換,並且這個轉場過程也是有動畫效果的,所以能夠滿足我們的需求,接著讓我們看看如何使用 PageViewController 吧!


|實作

|用 PageViewController 做一個導覽頁

這邊我們一樣用 Container 的方式來實作,首先我們使用 ContainerViewEmbed 一個 PageViewController,並且我們在 ViewController 上放置一個 PageControl

接著設定 PageViewControllerTransition StyleScroll

接著我們新增一個 ViewController 作為 PageViewController 的內頁,所以目前我們總共有三個 ViewController 在畫面上:

首先我們來編寫我們的有一個 UIImageViewViewController,我們建立一個 ImageViewController 的文件給他,接著我們在其中編寫一些程式碼:

這邊我們宣告一個 page,類型為 Int?,我們之後會賦予 ImageViewController 一個頁數,而在 viewDidLoad 的時候它會透過這個 page 來產生相對應的 UIImage

接著我們建立一個 PageViewController 的文件給,畫面上的 PageViewController,我們首先編寫下列程式碼:

首先我們會建立兩個屬性 pagemaxPage 用來記錄目前頁數以及最大頁數,並且在 viewDidLoad 設置 dataSourcedelegate

接著我們會新增一個 function 用來,這個函數會回傳一個 ImageViewController?,而我們會透過 page 參數判斷是否在頁數範圍內,決定要不要實例化它:

接著我們讓 PageViewController 遵循 UIPageViewControllerDataSource 協議,此時他會要求你實現 viewControllerBefore 以及 viewControllerAfter 兩個方法,而這裡兩個方法就是設定使用者左右滑動時會出現哪個 ViewController。因此,我們在這邊直接 return 上面所建立的 setupImageViewController 函數即可:

這邊我們 before 是往上一頁,所以 page 參數為 page - 1,而 After 是往後一頁,參數為 page +

最後我們再讓 PageViewController 遵循 UIPageViewControllerDelegate 協議,並且我們來實現其中的 didFinishAnimating 方法:

這邊我們判斷在動畫執行結束後,將自身的 viewControllers 中的 first 取出,也就是當前畫面上的 viewController,並且將他轉型為 ImageViewController 獲取 page 存回自身的 page 中。

注意這邊不是獲取 previousViewControllers 而是 viewControllers

這時候讓我們運行看看:

沒有綽拉~ 就是個黑畫面啦。因為我們還少設置最一開始的 ViewController,而我們可以透過 UIPageViewController 中的 setViewControllers 來設置要顯示的 ViewController

再讓我們運行一次看看吧:

Mmmmm...非常好,現在能夠順利的切換 PageViewController 中的 ViewController 了,接著讓我們通知最一開始的 ViewController 中的 pageControl 更新吧:

使用 protocol 的方式就不多贅述了,我們透過 delegate 方法將當前的 page 回傳到 ViewController 中,而我們 ViewController 實作這個方法:

那讓我們看看是否能夠正確更新 pageControl 吧:

Mmmmmm...,看似完美但我們還有一個功能沒有完成,那就是點擊 pageControl 時,滑動到該畫面上。這個效果並不難,讓我們試試看。

首先我們在 PageViewController 加入這個 setImageViewController 函數:

首先我們透過 setupImageViewController 生成 ImageViewController,並且透過 guard 語句判斷是否成功,接這判斷前後頁數決定滾動方向,最後將自身的 page 更新,並且執行 setViewController 切換畫面。

最後我們在 pageControlvalueChanged 事件中調用它:

再讓我們看看最後的畫面吧:


Summary

那們我們這次 PageViewController 的介紹就到這邊了,希望大家學會如何使用 PageViewController 來製作 APP 的導覽畫面以及一些多重畫面的需求,當然 PageViewController 還有許多強大的地方,像是翻頁效果以及可以使用多個不同的 ViewController 等等。如果對於 PageViewController 有問題或是有想要分享的,也歡迎與我交流呦。


上一篇
D24 - 拿起次元切割刀,大卸八塊 ViewController
下一篇
D26 - 理解、分解、再構築,一起成為鍊金工程師吧!
系列文
諸神黃昏下的 iOS 工程師31

尚未有邦友留言

立即登入留言