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

? 隕石小故事

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

Overview

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

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

需求

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

｜理解

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

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

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

｜分解

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

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

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

｜再構築

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

首先讓我們建立一個 TabBarItem 的 enum 吧！我們會用他快速創建 TabBar 中的項目：

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

接著我們還需要到 didSelectItemAt 把 selectedIndex 更新至當前的 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，並且開發出原生無法達到的功能。如果在客製化這邊有想要跟我交流的也歡迎跟我分享。