小碼哥-鬥魚直播APP之遊戲界面實現

遊戲界面實現

界面效果展示

• 界面效果
  

界面分析

• 分析圖
  
• 如何實現
  • 這個界面實現的方案很多
  • 可以直接使用UITableView，之後添加一個HeaderView
  • 可以直接使用UICollectionView，之後添加內邊距（類似推薦界面實現）
• 這裏採取UICollectionView的方案
  • 下面每一個遊戲就是一個Cell，如果使用UITableView則需要對數據進行進一步處理
  • 另外上面部分，直接添加內邊距，並且添加內容即可

界面實現

添加UICollectionView

• 懶加載UICollectionView，並且設置相關屬性

1. fileprivate lazy var collectionView : UICollectionView = {
2. // 1.創建佈局
3. let layout = UICollectionViewFlowLayout()
4. layout.itemSize = CGSize(width: kItemW, height: kItemH)
5. layout.minimumLineSpacing = 0
6. layout.minimumInteritemSpacing = 0
7. layout.headerReferenceSize = CGSize(width: kScreenW, height: kHeaderViewH)
8. layout.sectionInset = UIEdgeInsets(top: 0, left: kEdgeMargin, bottom: 0, right: kEdgeMargin)
10. // 2.創建UICollectionView
11. let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
12. collectionView.dataSource = self
13. collectionView.delegate = self
14. collectionView.register(UINib(nibName: "CollectionGameCell", bundle: nil), forCellWithReuseIdentifier: kGameCellID)
15. collectionView.register(UINib(nibName: "CollectionHeaderView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: kHeaderViewID)
16. collectionView.backgroundColor = UIColor.white
17. collectionView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
19. return collectionView
20. }()

• 設置數據源，註冊Cell，實現數據源方法

1. // MARK:- 遵守UICollectionView的數據源&代理
2. extension GameViewController : UICollectionViewDataSource {
3. func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
4. return 60
5. }
7. func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
8. // 1.取出Cell
9. let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kGameCellID, for: indexPath) as! CollectionGameCell
11. return cell
12. }
14. }

接口描述

• 接口名稱：全部遊戲
• 接口地址：http://capi.douyucdn.cn/api/v1/getColumnDetail
• 請求參數：</br>

參數名稱	參數說明
shortName	game

請求數據

• 創建對應的ViewModel，用於GameVc數據的請求

1. extension GameViewModel {
2. func loadAllGamesData(finishedCallback : @escaping () -> Void) {
3. NetworkTools.requestData(.get, URLString: "http://capi.douyucdn.cn/api/v1/getColumnDetail?shortName=game") { (result) in
4. // 1.獲取數據
5. guard let resultDict = result as? [String : Any] else { return }
6. guard let dataArray = resultDict["data"] as? [[String : Any]] else { return }
8. // 2.字典轉模型
9. for dict in dataArray {
10. self.games.append(GameModel(dict: dict))
11. }
13. // 3.通知外界數據請求完成
14. finishedCallback()
15. }
16. }
17. }

• 發送網絡請求

1. // MARK:- 加載數據
2. extension GameViewController {
3. fileprivate func loadData() {
4. gameVM.loadAllGamesData {
5. self.collectionView.reloadData()
6. }
7. }
8. }

• 對之前的CollectionGameCell進行改進
  • 添加底部的線段
  • 展示數據即可

1. // MARK: 定義模型屬性
2. var gameModel : GameBaseModel? {
3. didSet {
4. titleLabel.text = gameModel?.tag_name
5. if let iconURL = URL(string: gameModel?.icon_url ?? "") {
6. iconImageView.kf.setImage(with: iconURL, placeholder: UIImage(named: "home_more_btn"))
7. } else {
8. iconImageView.image = UIImage(named: "home_more_btn")
9. }
10. }
11. }

• 添加組的HeaderView
  • 實現對應的數據源方法即可

1. func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
2. // 1.取出HeaderView
3. let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: kHeaderViewID, for: indexPath) as! CollectionHeaderView
5. headerView.titleLabel.text = "全部"
6. headerView.iconImageView.image = UIImage(named: "Img_orange")
7. headerView.moreBtn.isHidden = true
9. return headerView
10. }

添加內邊距，並且添加頂部的View

• 添加內邊距

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

• 懶加載兩個View
  • gameView：用於展示推薦遊戲
  • headerView：頂部View的header

1. fileprivate lazy var gameView : RecommendGameView = {
2. let gameView = RecommendGameView.recommendGameView()
3. gameView.frame = CGRect(x: 0, y: -kGameViewH, width: kScreenW, height: kGameViewH)
4. return gameView
5. }()
6. fileprivate lazy var headerView : CollectionHeaderView = {
7. let headerView = CollectionHeaderView.collectionHeaderView()
8. headerView.frame = CGRect(x: 0, y: -(kHeaderViewH + kGameViewH), width: kScreenW, height: kHeaderViewH)
9. headerView.iconImageView.image = UIImage(named: "Img_orange")
10. headerView.titleLabel.text = "常用"
11. headerView.moreBtn.isHidden = true
13. return headerView
14. }()

• 在設置UI處添加兩個View

1. fileprivate func setupUI() {
2. // 1.添加collectionView
3. view.addSubview(collectionView)
4. collectionView.contentInset = UIEdgeInsets(top: kHeaderViewH + kGameViewH, left: 0, bottom: 0, right: 0)
6. // 2.添加CommonView
7. // 2.1.添加headerView
8. collectionView.addSubview(headerView)
10. // 2.2.添加滾動的View
11. collectionView.addSubview(gameView)
12. }

• 從之前請求的數據中獲取數據，進行展示即可
  • 默認展示前10條數據
  
  

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