游戏推荐展示

展示效果

展示效果

思路分析

其实这个实现比较简单，也是有两种方案
- 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直接描述
根据模型展示数据
- 代码如下

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
}
}

小码哥-玩转【斗鱼直播APP】系列之游戏推荐展示相关推荐

小码哥-玩转【斗鱼直播APP】系列之项目部署
项目部署目的任何一个项目最好使用源代码管理工具源代码管理工具可以帮助我们解决备份.版本回退等等问题因为是非基础篇,因此具体好处不在累述常见的源代码管理工具: SVN: 集中式源代码管理工具 G ...
小码哥-玩转【斗鱼直播APP】系列之获取APP图片资源
重要提醒原作者的代码有少许问题, 可能会崩溃我已经在我fork的代码中修复了问题. 请大家去我的Github上下载该工具. 如果对你有帮助, 可以star一下哈. Github地址: coderw ...
小码哥-玩转【斗鱼直播APP】系列之利用青花瓷抓取数据
利用青花瓷抓取数据青花瓷是什么? 当然这里可不是周董的歌曲, 而是我们用于抓取接口的工具. 安装一下这个软件百度搜索该工具会找到很多绿色版(破解版的文艺说法). 安装即可, 不再累述. 手机端配置 ...
小码哥-玩转【斗鱼直播APP】系列之首页导航栏设置
首页导航栏设置重点掌握内容导航栏添加Items 给系统的类扩充方法扩充便利构造函数效果展示在iOS开发中,导航栏的设置是必不可少的一部分. 通常导航栏中会放很多的UIBarButtonIte ...
小码哥-玩转【斗鱼直播APP】系列之实现无限轮播
实现无限轮播生活杂谈最近很多童鞋私信我,Swift项目有些语法跟不上.希望我出OC版的(OC版我会在后续推出),但是以我的考虑来说,Swift在语言排行版上面其实已经超过OC,另外国内现在新项目一 ...
小码哥-玩转【斗鱼直播APP】系列之框架搭建
搭建效果展示框架搭建分析首先最底部是一个UITabbar,因此我们可以用一个UITabBarController作为启动控制器分别添加子控制器HomeVc.LiveVc.FollowVc.Pro ...
小码哥-玩转【斗鱼直播APP】系列之首页布局分析实现
本帖最后由王红元老师于 2016-9-14 21:25 编辑布局首页分析实现完成最终效果这个效果还是挺常见的哈效果分析: 顶部是一个工具类,并且为了该工具类可以复用.(其他界面也用到)最好 ...
小码哥-玩转【斗鱼直播APP】系列之布局推荐界面
布局推荐界面实现效果今天内容完成效果推荐界面分析上层有无限轮播器(之后再完成) 滚动的UIScrollView或者UICollectionView(之后再完成) 下面是UICollection ...
小码哥-玩转【斗鱼直播APP】系列之项目基本设置
设置的内容任何一个项目在新建之后都有很多东西需要进行设置. 比如版本号.BundleID.部署版本等等设置BundleID.部署版本.横竖屏等设置图标.启动图片设置项目名称 Info.plis ...

小码哥-玩转【斗鱼直播APP】系列之游戏推荐展示

游戏推荐展示

展示效果

思路分析

界面搭建

展示数据

小码哥-玩转【斗鱼直播APP】系列之游戏推荐展示相关推荐

最新文章

热门文章