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

上篇博客咱們聊了《資訊類App經常使用分類控件的封裝與實現(CollectionView+Swift3.0)》，今天的這篇博客就在上篇博客的基礎上作些東西。作一個完整的資訊類App中的分類展現、分類切換、分類編輯這一套東西。固然，主要咱們仍是使用靈活多變的CollectionView來實現。下方咱們將會給出程序的運行效果，而後給出核心的代碼實現，在文章的末尾咱們會給出github上源代碼的分享連接。

 

1、運行效果展現

下方的GIF動圖就是本篇博客所涉及Demo的運行效果了。首先咱們點擊第一個頁面的「Show Menu Scroll」按鈕Push到咱們的主菜單頁面。主菜單頁面上方就是咱們的菜單選項了，點擊相應的菜單項，會顯示相應的內容。固然你對下方內容進行滑動，菜單項也會隨之改變。

點擊菜單右邊的加號，Present出菜單的編輯頁面，該頁面也就是咱們上篇博客所介紹的頁面。在該頁面咱們能夠添加新的菜單項，並對已經添加的菜單項進行拖動排序。具體效果以下所示。

　　

 

 

2、工程目錄介紹

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

• 一、 CEMenuScrollController：CEMenuScrollController控制類就是上面有菜單下方是內容的類，該類是整個實例的主控制器，起到總體的調度做用，負責將各個組件拼接到一塊。

• 二、 CEContentConllectionView: 該視圖就是下方內容展現的視圖，主要是隨着菜單的改變而顯示不一樣的內容。

• 三、 CEScrollMenu: 該組件就是上面那個能夠橫向滾動的菜單了。

• 四、 CESelectTheme: 該組件就是上篇博客所介紹的，負責編輯菜單的組件。

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

　　

 

 

 

3、CEScrollMenu組件的介紹

該組件就是本示例上面橫向滾動的菜單項，該組件的右邊有一個「+」號按鈕，點擊該按鈕將會經過閉包的形式將按鈕的點擊事件回調給CEMenuScrollController控制器，由該控制器Present出CESelectTheme組件進行數據源的操做。接下來咱們將聊一下CEScrollMenu組件的核心代碼。

 

一、點擊Cell的操做

下方是位於CEMenuCollectionView中的代碼段，也就是點擊菜單對應的Cell時所執行的方法。在該方法中主要作了兩件事情，第一件事情是點擊的Cell若是能夠移動到屏幕的中點。而後將Cell的點擊事件回調給CEMenuCollectionView的使用者，在回調時，要傳入當前點擊Cell的indexPath。

　　

 

二、計算菜單Cell的寬度

下方代碼段是CEMenuCollectionView中設置Cell尺寸的佈局回調。Cell的寬度是從咱們的數據源中獲取的，咱們的Model中有一個itemWidth()方法用來提供顯示該item的Cell的寬度。固然該寬度是根據咱們菜單名字的個數來獲取的。

　　

 

三、點擊菜單項將其置爲選擇狀態

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

　　

 

下方代碼就是CEMenuCollectionViewCell初始化時所進行的處理。從下方咱們能夠看出Cell的isSelected狀態是從item中加載的，加載後，調用上述updateStelectState()方法。具體作法以下所示：

　　

 

關於CEScrollMenu組件的介紹，本篇博客就先介紹這麼多，更詳細的代碼請移步於文章後方的github地址。

 

 

4、CEContentCollectionView的介紹

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

一、肯定用戶左右滑動後當前顯示的頁面

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

　　

 

關於本篇博客所涉及Demo的源代碼介紹，就先介紹這麼多。在工程中添加了很多代碼註釋，若是你對真個工程的設計以及實現感興趣話，請移步下方github源代碼分享連接進行查看。做爲一名程序員，其實好奇心仍是蠻重要的。本篇博客的內容就先到這兒吧。

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