第二十篇玩转【斗鱼直播APP】系列之“趣玩”界面展示

趣玩界面展示

展示效果

• 效果展示
  
• 效果分析
  • 该界面就是一个UICollectionView，并且使用CollectionNormalCell展示内容即可
  • 因为之前已经抽取了BaseAnchorViewController，所有集成自即可拥有UICollectionView
  • 之后，请求对应数据，在家对应数据即可

界面布局

• 继承自BaseAnchorViewController
• 重写setupUI方法，设置布局
  • 因为该UICollectionView不需要headerView，所有需要重新设置布局
  • 另外，可以给UICollectionView添加一个顶部内边距（有距离会好看点）

 
 
class FunnyViewController: BaseAnchorViewController {
}
// MARK:- 设置UI界面的内容
extension FunnyViewController {
    override func setupUI() {
        super.setupUI()
        let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
        layout.headerReferenceSize = CGSize.zero
        collectionView.contentInset = UIEdgeInsets(top: 8, left: 0, bottom: 0, right: 0)
    }
}

请求展示数据

• 封装用于请求趣玩数据的ViewModel

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

• 请求数据，刷新表格即可

 
 
// MARK:- 请求数据
extension FunnyViewController {
    override func loadData() {
        baseVM = funnyVM
        funnyVM.loadFunnyData {
            self.collectionView.reloadData()
        }
    }
}

总结：

• 我们发现做了父类抽取后，如果再实现类似的界面非常简单
  • 不需要写重复的代码
  • 业务逻辑封装也非常清晰
• 建议：在开发中，尽量将相似的功能进行抽取