游戏推荐展示
展示效果
- 展示效果
思路分析
- 其实这个实现比较简单,也是有两种方案
- UIScrollView:直接在上面放上UIButton即可
- UICollectionView:每一个游戏用一个Cell来展示
- 方案选择
- 方案二:UICollectionView来实现
- 一方面可以循环利用,另一方面UICollectionView真的非常好用喔
界面搭建
- 自定义RecommendGameView
- 由于内容比较固定,直接通过xib描述
- 添加UICollectionView即可
- 设置UICollectionView的布局,设置数据源以及实现数据源方法(见代码)
- 切记:设置自定义View的autoresizingMask = .None,否则控件将不能显示
class RecommendGameView: UIView {
// MARK: 控件属性
@IBOutlet weak var collectionView: UICollectionView!
// MARK: 系统回调
override func awakeFromNib() {
super.awakeFromNib()
autoresizingMask = .None
let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
layout.itemSize = CGSize(width: kGameCellW, height: kGameViewH)
collectionView.contentInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
}
}
// MARK:- 提供快速创建的类方法
extension RecommendGameView {
class func recommendGameView() -> RecommendGameView {
return NSBundle.mainBundle().loadNibNamed("RecommendGameView", owner: nil, options: nil).first as! RecommendGameView
}
}
// MARK:- 遵守UICollectionView的数据源&代理
extension RecommendGameView : UICollectionViewDataSource, UICollectionViewDelegate {
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(kGameCellID, forIndexPath: indexPath) as! CollectionGameCell
cell.backgroundColor = indexPath.item % 2 == 0 ? UIColor.redColor() : UIColor.blueColor()
return cell
}
}
-
将自定义View添加到UICollectionView中
- 懒加载RecommendGameView对象
- 将gameView添加到UICollectionView中
- 设置UICollectionView的内边距
- 代码如下:
-
懒加载RecommendCycleView
private lazy var gameView : RecommendGameView = {
let gameView = RecommendGameView.recommendGameView()
gameView.frame = CGRect(x: 0, y: -kGameViewH, width: kScreenW, height: kGameViewH)
return gameView
}()
- 添加UIContentView中
collectionView.addSubview(gameView)
collectionView.contentInset = UIEdgeInsets(top: kCycleViewH + kGameViewH, left: 0, bottom: 0, right: 0)
展示数据
- 因为该位置展示的数据,其实是请求热门游戏中10组数据,因此直接展示即可
- 将之前请求到的groups数组,传递给gameView
- 对数据进行进一步处理
- 将前两组数组删除(热门、颜值)
- 在最后添加更多分组(最后有一组更多)
- 对数据进行进一步处理
- 自定义Cell,用于展示数据
- 通过Xib直接描述
- 通过Xib直接描述
- 根据模型展示数据
- 代码如下
class CollectionGameCell: UICollectionViewCell {
@IBOutlet weak var iconImageView: UIImageView!
@IBOutlet weak var titleLabel: UILabel!
var group : AnchorGroup? {
didSet {
let iconURL = NSURL(string: group?.icon_url ?? "")!
iconImageView.kf_setImageWithURL(iconURL, placeholderImage: UIImage(named: "home_more_btn"))
titleLabel.text = group?.tag_name
}
}
override func awakeFromNib() {
super.awakeFromNib()
iconImageView.layer.cornerRadius = iconImageView.bounds.width * 0.5
iconImageView.layer.masksToBounds = true
}
}