第二十篇玩转【斗鱼直播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()

}

}

}

总结：

我们发现做了父类抽取后，如果再实现类似的界面非常简单
不需要写重复的代码
业务逻辑封装也非常清晰

建议：在开发中，尽量将相似的功能进行抽取