小碼哥-鬥魚直播APP之“趣玩”界面展示

趣玩界面展示

展示效果

• 效果展示
  
• 效果分析
  • 該界面就是一個UICollectionView，並且使用CollectionNormalCell展示內容即可
  • 因爲之前已經抽取了BaseAnchorViewController，所有集成自即可擁有UICollectionView
  • 之後，請求對應數據，在家對應數據即可

界面佈局

• 繼承自BaseAnchorViewController
• 重寫setupUI方法，設置佈局
  • 因爲該UICollectionView不需要headerView，所有需要重新設置佈局
  • 另外，可以給UICollectionView添加一個頂部內邊距（有距離會好看點）

1. class FunnyViewController: BaseAnchorViewController {
2. }
4. // MARK:- 設置UI界面的內容
5. extension FunnyViewController {
6. override func setupUI() {
7. super.setupUI()
9. let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
10. layout.headerReferenceSize = CGSize.zero
11. collectionView.contentInset = UIEdgeInsets(top: 8, left: 0, bottom: 0, right: 0)
12. }
13. }

請求展示數據

• 封裝用於請求趣玩數據的ViewModel

1. class FunnyViewModel: BaseViewModel {
3. }
5. extension FunnyViewModel {
6. func loadFunnyData(finishedCallback : @escaping () -> ()) {
7. loadAnchorData(isGroupData: false, URLString: "http://capi.douyucdn.cn/api/v1/getColumnRoom/3", parameters: ["limit" : 0, "offset" : 0], finishedCallback: finishedCallback)
8. }
9. }

• 請求數據，刷新表格即可

1. // MARK:- 請求數據
2. extension FunnyViewController {
3. override func loadData() {
4. baseVM = funnyVM
5. funnyVM.loadFunnyData {
6. self.collectionView.reloadData()
7. }
8. }
9. }

總結：

• 我們發現做了父類抽取後，如果再實現類似的界面非常簡單
  • 不需要寫重複的代碼
  • 業務邏輯封裝也非常清晰

• 建議：在開發中，儘量將相似的功能進行抽取

來源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2521