布局推荐界面

实现效果

• 今天内容完成效果
  

推荐界面分析

• 上层有无限轮播器(之后再完成)
• 滚动的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
6. // MARK:- 懒加载属性
7. private lazy var collectionView : UICollectionView = {[unowned self] in
8. // 1.创建布局
9. let layout = UICollectionViewFlowLayout()
10. layout.itemSize = CGSize(width: kItemW, height: kNormalItemH)
11. layout.minimumLineSpacing = 0
12. layout.minimumInteritemSpacing = kItemMargin
13. layout.headerReferenceSize = CGSize(width: kScreenW, height: kHeaderViewH)
14. layout.sectionInset = UIEdgeInsets(top: 0, left: kItemMargin, bottom: 0, right: kItemMargin)
15. // 2.创建UICollectionView
16. let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
17. collectionView.dataSource = self
18. collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: kNormalCellID)
19. return collectionView
20. }()

• 实现UICollectionView的数据源方法

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

• 展示效果如下：
  

布局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 {
2. let cell : CollectionBaseCell!
3. if indexPath.section == 1 {
4. cell = collectionView.dequeueReusableCellWithReuseIdentifier(kPrettyCellID, forIndexPath: indexPath) as! CollectionBaseCell
5. } else {
6. cell = collectionView.dequeueReusableCellWithReuseIdentifier(kNormalCellID, forIndexPath: indexPath) as! CollectionBaseCell
7. }
8. return cell
9. }

• 另外,因为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. }

• 效果如下: