iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
0
Mobile Development

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

D26 - 理解、分解、再構築,一起成為鍊金工程師吧!

讓我們把鋼之鍊金術師三個過程套用在開發上吧!

? 隕石小故事

身為一個前端工程師,畢竟是負責畫面呈現的開發人員,因此有許多五花八門的客製化需求是很常見的,而我們就是需要不斷思考如何實現這種需求,如果原生就能夠實現當然是最好,但最麻煩的就是原生難以實現,只能透過一些其他非原生的方式來實現它。

Overview

身為一個開發者,學習程式也接近兩年的時間了,也實作過許許多多的畫面或需求。當接到一個需求時,我們會不斷的思考該如何實現這些需求,並且都會盡可能的實現它,無論是透過原生或是自己客製化的方式,都希望最後做出來的成果能夠符合這次需求。

而很有趣的事我在看《鋼之鍊金術師》這個動畫時,其中有提到鍊金術的三個過程,分別是「理解」、「分解」,「再構築」,我覺得身為一個開發者也能夠將這個想法應用到開發上,還有很重要的一個想法就是「不要停止思考」。


需求

希望你不使用 UITabBarUITabBarViewController 實作出一個與 UITabBarViewController 功能相同的 Controller

|理解

讓我們來思考一下一個 TabBarController 需要哪些東西吧!

  • 實作 TabBar UI
  • TabBar 項目被點選時,需要 Highlight 效果
  • 透過 TabBar 按鈕切換對應的 ViewController

所以我們可以把畫面切成上下兩塊,上面區塊為 ViewControllers 的畫面以及下方區塊的 TabBar UI。


|分解

這邊我們分別看兩個畫面,該使用什麼元件來做是最好的呢?這邊我在製作一些客製化的需求時,我都是希望可以用最容易修改和最好擴充的方式來製作它,因為這個需求都是可能會再發生變動與修改的。

所以,如果是我來處理這個需求,我會使用一個 CotainerView 去 Embed 一個 PageViewController 作為 ViewController 的畫面。而下方 TabBar 區塊我一樣也會使用 CotainerView 來 Embed 一個 CollectionViewController 的做法或是直接使用一個 CollectionView 也可以。

因此,根據上面描述,我的 Storyboard 畫面應該會像是:


|再構築

根據我們上面這種區分方式,我們可以很彈性且靈活的開發,無論是樣式還是數量等等,所以這邊我們就參照原生的樣式,但是顏色不同的方式來構築吧!

首先讓我們建立一個 TabBarItemenum 吧!我們會用他快速創建 TabBar 中的項目:

接著我們可以在 cellForItemAt 中藉由這個 enum 來快速設定 Cell 的圖片以及標題:

接著我們還需要到 didSelectItemAtselectedIndex 更新至當前的 indexPath.row,並且 reload 我們的 collectionView,我們在 cellForItemAt 有透過 selectedIndex 判斷項目的顏色。

到這邊大概完成一個 TabBar 的基本功能,你可以用你喜歡的方式建立,讓我們看看效果吧:

再來我們來建立上面的 PageViewController,我們創建四個不同的 ViewController 到其中:

因為我們之後還會需要一個方法來更換頁面,所以這邊我們先定義一個換頁的 displayPage 函數,並且在 viewDidLoad 設定好預設頁面:

接著讓我們新增一個 protocol 定義一個 didSelectIndex 方法,並且在我們的 TabBar 點選項目時把 index 傳出去給 ViewController

最後我們讓 ViewController 遵循這個協議,並且實作該方法:

讓我們看看能不能夠正常換頁:

登登登!完成拉!太神啦!!!!


真理之門

你一定會說想說:「幹嘛用一堆元件做出一模一樣的 TabBarViewController?」,但實際上我們還有更多的操作空間,因為是我們所客製化的 Controller。

像是最基本的更換選擇項目的模式,我們不一定要 highlight 字跟顏色,我們可以 highlight 背景顏色:

而還有一個很特別的是,我們有使用 PageViewController 來做更換 ViewController 的操作,實際上我們也可以讓我們這個更換過程加上動畫,我們修改我們的 displayPage 函數,判斷方向並且開啟動畫:

讓我們再一次看看畫面效果吧:

如此一來我們就完成了一個有滾動轉場的 TabBarController。


Summary

希望大家看完這邊文章可以掌握一些開發的心法(絕對不是回去重溫鋼之鍊金術師),開發了這麼久,相信這些元件都是大家的好朋友,我們可以根據需求來選擇特性相符合的元件來製作,就像是這次所做的 TabBarViewController,並且開發出原生無法達到的功能。如果在客製化這邊有想要跟我交流的也歡迎跟我分享。


上一篇
D25 - 使用 APP前,記得詳閱 PageViewController 說明書
下一篇
D27 - 放一顆翻譯蒟蒻在你的 APP 中吧!
系列文
諸神黃昏下的 iOS 工程師31

尚未有邦友留言

立即登入留言