玩转【斗鱼直播APP】系列之游戏界面实现

游戏界面实现

界面效果展示

• 界面效果
  

界面分析

• 分析图
  
• 如何实现
  • 这个界面实现的方案很多
  • 可以直接使用UITableView，之后添加一个HeaderView
  • 可以直接使用UICollectionView，之后添加内边距（类似推荐界面实现）
• 这里采取UICollectionView的方案
  • 下面每一个游戏就是一个Cell，如果使用UITableView则需要对数据进行进一步处理
  • 另外上面部分，直接添加内边距，并且添加内容即可

界面实现

添加UICollectionView

• 懒加载UICollectionView，并且设置相关属性

 
 
    fileprivate lazy var collectionView : UICollectionView = {
        // 1.创建布局
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: kItemW, height: kItemH)
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
        layout.headerReferenceSize = CGSize(width: kScreenW, height: kHeaderViewH)
        layout.sectionInset = UIEdgeInsets(top: 0, left: kEdgeMargin, bottom: 0, right: kEdgeMargin)

        // 2.创建UICollectionView
        let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.register(UINib(nibName: "CollectionGameCell", bundle: nil), forCellWithReuseIdentifier: kGameCellID)
        collectionView.register(UINib(nibName: "CollectionHeaderView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: kHeaderViewID)
        collectionView.backgroundColor = UIColor.white
        collectionView.autoresizingMask = [.flexibleHeight, .flexibleWidth]

        return collectionView
    }()

• 设置数据源，注册Cell，实现数据源方法

 
 
// MARK:- 遵守UICollectionView的数据源&代理
extension GameViewController : UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 60
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // 1.取出Cell
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kGameCellID, for: indexPath) as! CollectionGameCell

        return cell
    }

}

接口描述

• 接口名称：全部游戏
• 接口地址：http://capi.douyucdn.cn/api/v1/getColumnDetail
• 请求参数：</br>

参数名称	参数说明
shortName	game

请求数据

• 创建对应的ViewModel，用于GameVc数据的请求

 
 
extension GameViewModel {
    func loadAllGamesData(finishedCallback : @escaping () -> Void) {
        NetworkTools.requestData(.get, URLString: "http://capi.douyucdn.cn/api/v1/getColumnDetail?shortName=game") { (result) in
            // 1.获取数据
            guard let resultDict = result as? [String : Any] else { return }
            guard let dataArray = resultDict["data"] as? [[String : Any]] else { return }

            // 2.字典转模型
            for dict in dataArray {
                self.games.append(GameModel(dict: dict))
            }

            // 3.通知外界数据请求完成
            finishedCallback()
        }
    }
}

• 发送网络请求

 
 
// MARK:- 加载数据
extension GameViewController {
    fileprivate func loadData() {
        gameVM.loadAllGamesData {
            self.collectionView.reloadData()
        }
    }
}

• 对之前的CollectionGameCell进行改进
  • 添加底部的线段
  • 展示数据即可

 
 
    // MARK: 定义模型属性
    var gameModel : GameBaseModel? {
        didSet {
            titleLabel.text = gameModel?.tag_name
            if let iconURL = URL(string: gameModel?.icon_url ?? "") {
                iconImageView.kf.setImage(with: iconURL, placeholder: UIImage(named: "home_more_btn"))
            } else {
                iconImageView.image = UIImage(named: "home_more_btn")
            }
        }
    }

• 添加组的HeaderView
  • 实现对应的数据源方法即可

 
 
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        // 1.取出HeaderView
        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: kHeaderViewID, for: indexPath) as! CollectionHeaderView

        headerView.titleLabel.text = "全部"
        headerView.iconImageView.image = UIImage(named: "Img_orange")
        headerView.moreBtn.isHidden = true

        return headerView
    }

添加内边距，并且添加顶部的View

• 添加内边距

 
 
collectionView.contentInset = UIEdgeInsets(top: kHeaderViewH + kGameViewH, left: 0, bottom: 0, right: 0)

• 懒加载两个View
  • gameView：用于展示推荐游戏
  • headerView：顶部View的header

 
 
    fileprivate lazy var gameView : RecommendGameView = {
        let gameView = RecommendGameView.recommendGameView()
        gameView.frame = CGRect(x: 0, y: -kGameViewH, width: kScreenW, height: kGameViewH)
        return gameView
    }()
    fileprivate lazy var headerView : CollectionHeaderView = {
        let headerView = CollectionHeaderView.collectionHeaderView()
        headerView.frame = CGRect(x: 0, y: -(kHeaderViewH + kGameViewH), width: kScreenW, height: kHeaderViewH)
        headerView.iconImageView.image = UIImage(named: "Img_orange")
        headerView.titleLabel.text = "常用"
        headerView.moreBtn.isHidden = true

        return headerView
    }()

• 在设置UI处添加两个View

 
 
    fileprivate func setupUI() {
        // 1.添加collectionView
        view.addSubview(collectionView)
        collectionView.contentInset = UIEdgeInsets(top: kHeaderViewH + kGameViewH, left: 0, bottom: 0, right: 0)

        // 2.添加CommonView
        // 2.1.添加headerView
        collectionView.addSubview(headerView)

        // 2.2.添加滚动的View
        collectionView.addSubview(gameView)
    }

• 从之前请求的数据中获取数据，进行展示即可
  • 默认展示前10条数据