小碼哥-玩轉【鬥魚直播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