Swift仿寫有妖氣漫畫

Domo發表於2018-08-13

前言:

一直以來工作中專案使用的都是OC，最近公司專案上線正常迭代比較清閒，準備寫個Swift專案保持手感，選擇的是仿寫有妖氣漫畫。另外又仿寫了一款喜馬拉雅FM，感興趣的可以去看下。

專案採用的是MVC的設計模式，Moya+ HandyJson網路層和資料解析，另外專案中使用的一些優秀的三方庫會在下文提到比如帶動畫的tabBar使用的是ESTabBarController

下面先看下目前完成情況效果圖

首頁分析：

可以看出首頁的樣式和AppStore的首頁UI樣式很接近，都是根據日期階段幾張大圖首推另外穿插小編推薦。首頁部分我所採用的使用分割槽TableView,大圖部分使用tableviewcell，而上面星期天的顯示區域做為tableView的headerView,下面小編推薦的部分作為tableview的footerView,其中footerView內部在巢狀collectionView展示小編推薦的漫畫

發現模組分析：

發現模組採用的是自定義導航欄，分為推薦、VIP、訂閱、排行四個子模組接下來一一進行分析下

發現-首頁分析：

首頁介面採用的是分割槽的collectionView，選擇讓頂部的滾動圖片和榜單gird按鈕作為第一個section，然後其他的section根據資料model選擇不同的樣式和item數量，這裡把第一個section的headerView的size設定為.zero，把最後一個section的footerVeiw的size設為.zero 首頁頂部分榜gird和section的headerView上面點選檢視更多按鈕通過block方式獲取點選事件進行介面跳轉

首頁點選發現-推薦上面不同榜單按鈕以及點選發現-排行模組都可以跳轉不同型別排行list介面，該介面使用的是tableview展示，不同的排行型別會有些差別，主要體現在是否有前三名勳章，以及最先面醒目字型標識的是熱度還是點選量或者是收藏量等，這個主要是根據資料模型處理就行了

發現模組其他的子模組分析：

發現模組的其他子模組就比較簡單了，其中VIP和訂閱佈局進本一樣，採用的也是分割槽collectionview, headerview根據資料模型顯示標題和是否顯示右邊點選檢視更多按鈕，而排行子模組用collectionView分割槽顯示幾個排行榜就行了

漫畫詳情模組：

該模組可以說是整個有妖氣最重要的模組了，為了美觀詳情介面採用的是進來隱藏導航欄，然後在介面上移的時候顯示導航欄該模組頂部漫畫圖文介紹作為headerView,有一個北京模糊毛玻璃的效果，為漫畫圖片的投影，底部為三個分類的子頁面詳情、目錄、評價，該模組用到了分頁效果的三方庫SwipeMenuViewController，以及導航欄漸進顯示的三方庫 WRNavigationBar

詳情介面分析：

詳情介面採用的是分割槽的tableView,根據樣式需求第一個section的headerView隱藏，第一個分割槽為作品介紹部分，cell的高度要根據資料模型返回的介紹文字長度進行調整，然後根據資料模型判斷該作者是否還有其他作品來決定是否顯示其他作品這一cell，猜你喜歡模組就是巢狀的一個collectionView

目錄介面分析：

目錄介面就是一個collectionView的item根據資料顯示標題，headerView顯示更新和排序(正序和倒敘)方便閱讀

  if isPositive {  // 正序
       cell.chapterStatic = detailStatic?.chapter_list?[indexPath.row]
  } else { 
       cell.chapterStatic = detailStatic?.chapter_list?.reversed()[indexPath.row]
  }
複製程式碼