布局推荐界面
实现效果
- 今天内容完成效果
![](http://ww2.sinaimg.cn/large/65e4f1e6gw1f7xv4s0ev8g20af0iiu0y.gif)
推荐界面分析
- 上层有无限轮播器(之后再完成)
- 滚动的UIScrollView或者UICollectionView(之后再完成)
- 下面是UICollectionView,并且有HeaderView
- UICollectionView的Cell大小基本一致,但是在颜值处Cell的高度有变化。
- 该UICollectionView一共12组,第一组8个Item,其他组均4个Item
布局UICollectionView
- 在控制器的View中添加UICollectionView
- 懒加载UICollectionView
- 将UICollectionView添加到控制器的View中
- 特殊属性设置:
- headerReferenceSize : 设置头部的Size
- sectionInset :设置每组的内边距
private let kItemMargin : CGFloat = 10
private let kItemW : CGFloat = (kScreenW - 3 * kItemMargin) / 2
private let kNormalItemH : CGFloat = kItemW * 3 / 4
private let kPrettyItemH : CGFloat = kItemW * 4 / 3
private let kHeaderViewH : CGFloat = 50
// MARK:- 懒加载属性
private lazy var collectionView : UICollectionView = {[unowned self] in
// 1.创建布局
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: kItemW, height: kNormalItemH)
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = kItemMargin
layout.headerReferenceSize = CGSize(width: kScreenW, height: kHeaderViewH)
layout.sectionInset = UIEdgeInsets(top: 0, left: kItemMargin, bottom: 0, right: kItemMargin)
// 2.创建UICollectionView
let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
collectionView.dataSource = self
collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: kNormalCellID)
return collectionView
}()
// MARK:- 遵守UICollectionView的数据源协议
extension RecommendViewController : UICollectionViewDataSource {
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 12
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if section == 0 {
return 8
}
return 4
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(kNormalCellID, forIndexPath: indexPath)
cell.backgroundColor = UIColor.redColor()
return cell
}
}
- 展示效果如下:
![](http://bbs.520it.com/editormd/uploads/201609/20160918092551_841985.png)
- 实现效果
![](http://bbs.520it.com/editormd/uploads/201609/20160918092607_454950.png)
- 实现思路
- 自定义UICollectionReusableView, 用于作为HeaderView
- 可以通过Xib直接描述
![](http://bbs.520it.com/editormd/uploads/201609/20160918092638_621644.png)
- 在注册Cell时,使用Nib进行注册
- 代码如下:
collectionView.registerNib(UINib(nibName: "RecommendHeaderView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: kHeaderViewID)
- 效果如下:
![](http://bbs.520it.com/editormd/uploads/201609/20160918092657_540506.png)
布局普通的UICollectionViewCell
- 实现效果
![](http://bbs.520it.com/editormd/uploads/201609/20160918093127_466601.png)
- 实现思路
- 自定义UICollectionViewCell,用于作为普通的Cell
- 可以通过Xib直接描述
![](http://bbs.520it.com/editormd/uploads/201609/20160918093142_861519.png)
- 在注册Cell时,使用Nib进行注册
- 代码如下:
collectionView.registerNib(UINib(nibName: "CollectionNormalCell", bundle: nil), forCellWithReuseIdentifier: kNormalCellID)
- 效果如下:
![](http://bbs.520it.com/editormd/uploads/201609/20160918093202_305383.png)
布局颜色的UICollectionViewCell
- 实现效果
![](http://bbs.520it.com/editormd/uploads/201609/20160918093218_270572.png)
- 实现思路
- 自定义UICollectionViewCell,用于作为颜值的Cell
- 可以通过Xib直接描述
![](http://bbs.520it.com/editormd/uploads/201609/20160918093259_743107.png)
- 在注册Cell时,同时注册颜值的Cell
- 代码如下
collectionView.registerNib(UINib(nibName: "CollectionPrettyCell", bundle: nil), forCellWithReuseIdentifier: kPrettyCellID)
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell : CollectionBaseCell!
if indexPath.section == 1 {
cell = collectionView.dequeueReusableCellWithReuseIdentifier(kPrettyCellID, forIndexPath: indexPath) as! CollectionBaseCell
} else {
cell = collectionView.dequeueReusableCellWithReuseIdentifier(kNormalCellID, forIndexPath: indexPath) as! CollectionBaseCell
}
return cell
}
- 另外,因为NormalCell&PrettyCell高度不同, 因此需要设置代理,并且实现代理方法
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
if indexPath.section == 1 {
return CGSize(width: kItemW, height: kPrettyItemH)
} else {
return CGSize(width: kItemW, height: kNormalItemH)
}
}
- 效果如下:
![](http://bbs.520it.com/editormd/uploads/201609/20160918092918_745463.png)