在项目中看到有使用多种collectionViewCell,和header的情况,感觉用起来还是比较方便。之前遇到类似的界面,都没有想到😂. 看下效果图吧:
先说下思路,这整个一块是一个collectionView,然后分为3组 第一组:十点便宜图片是图+一个label为headerA,然后cellA的个数返回0 第二组:详细信息的label为headerB,然后cellB返回10个。 第三组:推荐为headerC,然后cellC返回50个。 当然其中的透视图和cell都是自定义的,这里我用的xib比较快可以达到我想要的效果。1.再来看看实现的过程,首先是实例化collectionView,然后给他一个默认的布局方式。
let flow:UICollectionViewFlowLayout = {
let flow = UICollectionViewFlowLayout()
flow.itemSize = CGSize(width: 50, height: 50)
flow.minimumLineSpacing = 1;
flow.minimumInteritemSpacing = 1;
flow.scrollDirection = .vertical;
return flow
}()
var collection:UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.white
//初始化
collection = UICollectionView(frame: view.bounds, collectionViewLayout: flow)
collection.dataSource = self;
collection.delegate = self;
collection.backgroundColor = UIColor.white
view.addSubview(collection)
//MARK:-----------注册cell-------------//
collection.register(UINib(nibName: "CellA", bundle: nil), forCellWithReuseIdentifier: "cellA")
collection.register(UINib(nibName: "CellB", bundle: nil), forCellWithReuseIdentifier: "cellB")
collection.register(UINib(nibName: "CellC", bundle: nil), forCellWithReuseIdentifier: "cellC")
//MARK:-----------注册Header-------------//
collection.register(UINib(nibName: "HeaderA", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headA")
collection.register(UINib(nibName: "HeaderB", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headB")
collection.register(UINib(nibName: "HeaderC", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headC")
}
2.再到我们的拓展里面来实现代理,这里要注意的是要遵守 UICollectionViewDelegateFlowLayout代理,然后才能进行自定义的布局的cell大小、header的宽高、cell之间的边距。然后就是根据不同的组返回不同的cell和header了。还是比较简单。
extension ViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
//布局的代理
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
switch indexPath.section {
case 0:
return CGSize.zero
case 1:
return CGSize(width: 100, height: 50)
case 2:
return CGSize(width: (UIScreen.main.bounds.width-30) / 2.0, height: 100)
default:
return CGSize.zero
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
switch section {
case 0:
return CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height / 2.0)
case 1:
return CGSize(width: UIScreen.main.bounds.width, height: 50)
case 2:
return CGSize(width: UIScreen.main.bounds.width, height: 100)
default:
return CGSize.zero
}
}
//自定义头头
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
switch indexPath.section {
case 0:
let headA = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "headA", for: indexPath)
headA.backgroundColor = UIColor.cyan
return headA;
case 1:
let headB = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "headB", for: indexPath)
headB.backgroundColor = UIColor.gray
return headB;
default:
let headC = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "headC", for: indexPath)
headC.backgroundColor = UIColor.brown
return headC;
}
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
switch indexPath.section {
case 0:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellA", for: indexPath)
return cell
case 1:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellB", for: indexPath)
return cell
default:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellC", for: indexPath)
return cell
}
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if section == 0 { return 0 }
if section == 1 { return 10 }
return 20
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 3
}
}