玩转斗鱼直播APP——布局推荐界面篇!

布局推荐界面

实现效果

• 今天内容完成效果

  

推荐界面分析

• 上层有无限轮播器(之后再完成)

• 滚动的UIScrollView或者UICollectionView(之后再完成)

• 下面是UICollectionView,并且有HeaderView

• UICollectionView的Cell大小基本一致，但是在颜值处Cell的高度有变化。

• 该UICollectionView一共12组，第一组8个Item，其他组均4个Item

布局UICollectionView

• 在控制器的View中添加UICollectionView

• 懒加载UICollectionView

• 将UICollectionView添加到控制器的View中

• 特殊属性设置：

• headerReferenceSize ： 设置头部的Size

• sectionInset ：设置每组的内边距

• 实现UICollectionView的数据源方法

• 展示效果如下：

  

布局UICollectionView的headerView

• 实现效果

  

• 实现思路

• 自定义UICollectionReusableView, 用于作为HeaderView

• 可以通过Xib直接描述

  

• 在注册Cell时,使用Nib进行注册

• 代码如下:

• 效果如下:

  

布局普通的UICollectionViewCell

• 实现效果

  

• 实现思路

• 自定义UICollectionViewCell,用于作为普通的Cell

• 可以通过Xib直接描述

  

• 在注册Cell时,使用Nib进行注册

• 代码如下:

• 效果如下:

  

布局颜色的UICollectionViewCell

• 实现效果

  

• 实现思路

• 自定义UICollectionViewCell,用于作为颜值的Cell

• 可以通过Xib直接描述

  

• 在注册Cell时,同时注册颜值的Cell

• 代码如下

• 在获取Cell时,进行判断

• 抽取父类,方便管理

• 另外,因为NormalCell&PrettyCell高度不同, 因此需要设置代理,并且实现代理方法

• 效果如下:

  

更多实用的干货,请登录520it.com，小码哥社区。