游戲界面實(shí)現(xiàn)

界面效果展示

• 界面效果

  

界面分析

• 分析圖

  

• 如何實(shí)現(xiàn)

• 這個(gè)界面實(shí)現(xiàn)的方案很多

• 可以直接使用UITableView，之后添加一個(gè)HeaderView

• 可以直接使用UICollectionView，之后添加內(nèi)邊距（類似推薦界面實(shí)現(xiàn)）

• 這里采取UICollectionView的方案

• 下面每一個(gè)游戲就是一個(gè)Cell，如果使用UITableView則需要對數(shù)據(jù)進(jìn)行進(jìn)一步處理

• 另外上面部分，直接添加內(nèi)邊距，并且添加內(nèi)容即可

界面實(shí)現(xiàn)

添加UICollectionView

• 懶加載UICollectionView，并且設(shè)置相關(guān)屬性

• 設(shè)置數(shù)據(jù)源，注冊Cell，實(shí)現(xiàn)數(shù)據(jù)源方法

接口描述

• 接口名稱：全部游戲

• 接口地址：http://capi.douyucdn.cn/api/v1/getColumnDetail

• 請求參數(shù)：
  

請求數(shù)據(jù)

• 創(chuàng)建對應(yīng)的ViewModel，用于GameVc數(shù)據(jù)的請求

• 發(fā)送網(wǎng)絡(luò)請求

• 對之前的CollectionGameCell進(jìn)行改進(jìn)

• 添加底部的線段

• 展示數(shù)據(jù)即可

• 添加組的HeaderView

• 實(shí)現(xiàn)對應(yīng)的數(shù)據(jù)源方法即可

添加內(nèi)邊距，并且添加頂部的View

• 添加內(nèi)邊距

• 懶加載兩個(gè)View

• gameView：用于展示推薦游戲

• headerView：頂部View的header

• 在設(shè)置UI處添加兩個(gè)View

• 從之前請求的數(shù)據(jù)中獲取數(shù)據(jù)，進(jìn)行展示即可

• 默認(rèn)展示前10條數(shù)據(jù)

更多資訊更多討論，請登錄bbs.520it.com,小碼哥論壇。