小码哥-玩转【斗鱼直播APP】系列之布局推荐界面

布局推荐界面

实现效果

• 今天内容完成效果
  

推荐界面分析

• 上层有无限轮播器(之后再完成)
• 滚动的UIScrollView或者UICollectionView(之后再完成)
• 下面是UICollectionView,并且有HeaderView
  • UICollectionView的Cell大小基本一致，但是在颜值处Cell的高度有变化。
  • 该UICollectionView一共12组，第一组8个Item，其他组均4个Item

布局UICollectionView

• 在控制器的View中添加UICollectionView
  • 懒加载UICollectionView
  • 将UICollectionView添加到控制器的View中
• 特殊属性设置：
  • headerReferenceSize ： 设置头部的Size
  • sectionInset ：设置每组的内边距

1. private let kItemMargin : CGFloat = 10
2. private let kItemW : CGFloat = (kScreenW - 3 * kItemMargin) / 2
3. private let kNormalItemH : CGFloat = kItemW * 3 / 4
4. private let kPrettyItemH : CGFloat = kItemW * 4 / 3
5. private let kHeaderViewH : CGFloat = 50
7. // MARK:- 懒加载属性
8. private lazy var collectionView : UICollectionView = {[unowned self] in
9. // 1.创建布局
10. let layout = UICollectionViewFlowLayout()
11. layout.itemSize = CGSize(width: kItemW, height: kNormalItemH)
12. layout.minimumLineSpacing = 0
13. layout.minimumInteritemSpacing = kItemMargin
14. layout.headerReferenceSize = CGSize(width: kScreenW, height: kHeaderViewH)
15. layout.sectionInset = UIEdgeInsets(top: 0, left: kItemMargin, bottom: 0, right: kItemMargin)
17. // 2.创建UICollectionView
18. let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
19. collectionView.dataSource = self
21. collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: kNormalCellID)
23. return collectionView
24. }()

• 实现UICollectionView的数据源方法

1. // MARK:- 遵守UICollectionView的数据源协议
2. extension RecommendViewController : UICollectionViewDataSource {
3. func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
4. return 12
5. }
7. func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
8. if section == 0 {
9. return 8
10. }
12. return 4
13. }
15. func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
16. let cell = collectionView.dequeueReusableCellWithReuseIdentifier(kNormalCellID, forIndexPath: indexPath)
18. cell.backgroundColor = UIColor.redColor()
20. return cell
21. }
22. }

• 展示效果如下：
  

布局UICollectionView的headerView

• 实现效果
  
• 实现思路
  • 自定义UICollectionReusableView, 用于作为HeaderView
  • 可以通过Xib直接描述
    
  • 在注册Cell时,使用Nib进行注册
• 代码如下:

1. collectionView.registerNib(UINib(nibName: "RecommendHeaderView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: kHeaderViewID)

• 效果如下:
  

布局普通的UICollectionViewCell

• 实现效果
  
• 实现思路
  • 自定义UICollectionViewCell,用于作为普通的Cell
  • 可以通过Xib直接描述
    
  • 在注册Cell时,使用Nib进行注册
• 代码如下:

1. collectionView.registerNib(UINib(nibName: "CollectionNormalCell", bundle: nil), forCellWithReuseIdentifier: kNormalCellID)

• 效果如下:
  

布局颜色的UICollectionViewCell

• 实现效果
  
• 实现思路
  • 自定义UICollectionViewCell,用于作为颜值的Cell
  • 可以通过Xib直接描述
    
  • 在注册Cell时,同时注册颜值的Cell
• 代码如下

1. collectionView.registerNib(UINib(nibName: "CollectionPrettyCell", bundle: nil), forCellWithReuseIdentifier: kPrettyCellID)

• 在获取Cell时,进行判断
  • 抽取父类,方便管理

1. func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
3. let cell : CollectionBaseCell!
5. if indexPath.section == 1 {
6. cell = collectionView.dequeueReusableCellWithReuseIdentifier(kPrettyCellID, forIndexPath: indexPath) as! CollectionBaseCell
7. } else {
8. cell = collectionView.dequeueReusableCellWithReuseIdentifier(kNormalCellID, forIndexPath: indexPath) as! CollectionBaseCell
9. }
12. return cell
13. }

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

1. func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
2. if indexPath.section == 1 {
3. return CGSize(width: kItemW, height: kPrettyItemH)
4. } else {
5. return CGSize(width: kItemW, height: kNormalItemH)
6. }
7. }

• 效果如下:
  

来源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2280