iOS開發之常用資訊類App的分類展示與編輯的完整案例實現(Swift版)，iosswift

iOS開發之常用資訊類App的分類展示與編輯的完整案例實現(Swift版)，iosswift

上篇部落格我們聊了《資訊類App常用分類控制項的封裝與實現(CollectionView+Swift3.0)》，今天的這篇部落格就在上篇部落格的基礎上做些東西。做一個完整的資訊類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原始碼分享連結進行查看。作為一名程式員，其實好奇心還是蠻重要的。本篇部落格的內容就先到這兒吧。

github分享連結：https://github.com/lizelu/CEScrollMenue