上篇部落格我們聊了《》，今天的這篇部落格就在上篇部落格的基礎上做些東西。做一個完整的資訊類App中的分類展示、分類切換、分類編輯這一套東西。當然，主要我們還是使用靈活多變的CollectionView來實現。下方我們將會給出程式的執行效果，然後給出核心的程式碼實現，在文章的末尾我們會給出github上原始碼的分享連結。

一、執行效果展示

下方的GIF動圖就是本篇部落格所涉及Demo的執行效果了。首先我們點選第一個頁面的“Show Menu Scroll”按鈕Push到我們的主選單頁面。主選單頁面上方就是我們的選單選項了，點選相應的選單項，會顯示相應的內容。當然你對下方內容進行滑動，選單項也會隨之改變。

點選選單右邊的加號，Present出選單的編輯頁面，該頁面也就是我們上篇部落格所介紹的頁面。在該頁面我們可以新增新的選單項，並對已經新增的選單項進行拖動排序。具體效果如下所示。

二、工程目錄介紹

下方截圖中是本篇部落格所涉及到 工程目錄。本部分將會對下方的目錄進行介紹，從而對整個工程進行了解。

• 1、CEMenuScrollController：CEMenuScrollController控制類就是上面有選單下方是內容的類，該類是整個例項的主控制器，起到整體的排程作用，負責將各個元件拼接到一塊。

• 2、CEContentConllectionView: 該檢視就是下方內容展示的檢視，主要是隨著選單的改變而顯示不同的內容。

• 3、CEScrollMenu: 該元件就是上面那個可以橫向滾動的選單了。

• 4、CESelectTheme: 該元件就是上篇部落格所介紹的，負責編輯選單的元件。

本部分先整體上看一下，下方將會逐步的對每個元件的具體實現進行介紹。

三、CEScrollMenu元件的介紹

該元件就是本示例上面橫向滾動的選單項，該元件的右邊有一個“+”號按鈕，點選該按鈕將會通過閉包的形式將按鈕的點選事件回撥給CEMenuScrollController控制器，由該控制器Present出CESelectTheme元件進行資料來源的操作。接下來我們將聊一下CEScrollMenu元件的核心程式碼。

1、點選Cell的操作

下方是位於CEMenuCollectionView中的程式碼段，也就是點選選單對應的Cell時所執行的方法。在該方法中主要做了兩件事情，第一件事情是點選的Cell如果可以移動到螢幕的中點。然後將Cell的點選事件回撥給CEMenuCollectionView的使用者，在回撥時，要傳入當前點選Cell的indexPath。

2、計算選單Cell的寬度

下方程式碼段是CEMenuCollectionView中設定Cell尺寸的佈局回撥。Cell的寬度是從我們的資料來源中獲取的，我們的Model中有一個itemWidth()方法用來提供顯示該item的Cell的寬度。當然該寬度是根據我們選單名字的個數來獲取的。

3、點選選單項將其置為選擇狀態

下方程式碼是CEMenuCollectionViewCell中負責根據Cell的Select狀態來修改Cell的顯示方案的，具體程式碼如下所示。當然，Cell是否處於Select狀態，我們將此狀態是記錄在我們的Model中的，這就避免了因為Cell的重用機制而出現的狀態不一致的問題。

下方程式碼就是CEMenuCollectionViewCell初始化時所進行的處理。從下方我們可以看出Cell的isSelected狀態是從item中載入的，載入後，呼叫上述updateStelectState()方法。具體做法如下所示：

關於CEScrollMenu元件的介紹，本篇部落格就先介紹這麼多，更詳細的程式碼請移步於文章後方的github地址。

四、CEContentCollectionView的介紹

CEContentCollectionView的主要功能是根據Menu的切換來顯示相應的內容的，該檢視中的內容比較簡單。下方是對其核心技術點的介紹。

1、確定使用者左右滑動後當前顯示的頁面

下方三個代理方法是用來確定使用者左右滑動內容頁後，所顯示的Cell。當用戶拖動後切換了相應的Cell時，會執行下方的的currentShowCellClosure()閉包，然後將當前顯示Cell的indexPath回撥給使用者。然後我們可以根據該IndexPath改變Menu當前顯示的選單項。

關於本篇部落格所涉及Demo的原始碼介紹，就先介紹這麼多。在工程中添加了不少程式碼註釋，如果你對真個工程的設計以及實現感興趣話，請移步下方github原始碼分享連結進行檢視。作為一名程式設計師，其實好奇心還是蠻重要的。本篇部落格的內容就先到這兒吧。