游戏界面实现
界面效果展示
- 界面效果
界面分析
- 分析图
- 如何实现
- 这个界面实现的方案很多
- 可以直接使用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条数据
来源:http://bbs.520it.com/forum.php?mod=viewthread&tid=2475