在项目中看到有使用多种collectionViewCell，和header的情况，感觉用起来还是比较方便。之前遇到类似的界面，都没有想到😂.
看下效果图吧：
先说下思路，这整个一块是一个collectionView，然后分为3组
第一组：十点便宜图片是图+一个label为headerA，然后cellA的个数返回0
第二组：详细信息的label为headerB，然后cellB返回10个。
第三组：推荐为headerC，然后cellC返回50个。
当然其中的透视图和cell都是自定义的，这里我用的xib比较快可以达到我想要的效果。
1.再来看看实现的过程，首先是实例化collectionView，然后给他一个默认的布局方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| 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.再到我们的拓展里面来实现代理，这里要注意的是要遵守
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| 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
}
}
|
