多section分区的collectionView
UICollectionView 组件和 UITableView 组件一样,也是可以设置多个 section(分区、分组)。每个 section 我们可以设置不同的 header 和 footer,同时每个分区内还可以显示不同数量和内容的单元格。
虽然我们也可以在 tableViewCell 中嵌入 collectionView 来实现同样的效果,但会更加麻烦些,特别是如果每个 collectionView 内单元格数量不同,collectionView 还要实现动态高度。
所以如果能满足需求的话,还是建议使用多 section 的 collectionView 来实现。
1,效果图
(1)collectView 的每一个分区对应一个月份的图书列表。
(2)分区头显示月份标题。分区尾背景设为灰色,内容为空。
(3)分区内单元格显示当月所有书籍封面图片,数量不定,分区高度自适应。
2,实现步骤
(1)打开 StoryBoard,删除默认的 View Controller。拖入一个 Collection View Controller,并将其设置为初始 VC。
(2)选中这个 Scene,点击菜单“Editor”->“Embed In”->“Navigation Controller”添加一个导航控制器。
(3)选中 Collection View,在其属性面板中保持 Layout 属性为 Flow 不变。勾选上“Section Header”和“Section Footer”,分别增加分区头和分区尾。
(4)调整好头部的尺寸,并将其 Identifier 设置为 HeaderView
(5)往头部中拖入一个 Label 并设置好相关约束。同时将 Label 的 Tag 设置为 1。
(6)调整好分区尾部的尺寸,将其背景色设为灰色。同时将其 Identifier 设置为 FooterView。
(7)调整好单元格尺寸,将其 Identifier 设置为 MyCell
(8)往单元格里拖入一个 ImageView,并设置好相关约束。同时将 ImageView 的 Tag 设为 1。
(9)选中 Collection View,在尺寸样式面包中设置好内边距和单元格间距。
(10)新建一个 CollectionViewController 类(继承 UICollectionViewController)。并在 StoryBoard 中作绑定。
(11)CollectionViewController.swift 完整代码如下
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
|
import UIKit
//每月书籍 struct BookPreview {
var title: String
var images:[ String ]
} class CollectionViewController : UICollectionViewController {
//所有书籍数据
let books = [
BookPreview (title: "五月新书" , images: [ "0.jpg" , "1.jpg" , "2.jpg" , "3.jpg" ,
"4.jpg" , "5.jpg" , "6.jpg" ]),
BookPreview (title: "六月新书" , images: [ "7.jpg" , "8.jpg" , "9.jpg" ]),
BookPreview (title: "七月新书" , images: [ "10.jpg" , "11.jpg" , "12.jpg" , "13.jpg" ])
]
override func viewDidLoad() {
super .viewDidLoad()
}
//获取分区数
override func numberOfSections( in collectionView: UICollectionView ) -> Int {
return books.count
}
//获取每个分区里单元格数量
override func collectionView(_ collectionView: UICollectionView ,
numberOfItemsInSection section: Int ) -> Int {
return books[section].images.count
}
//分区的header与footer
override func collectionView(_ collectionView: UICollectionView ,
viewForSupplementaryElementOfKind kind: String ,
at indexPath: IndexPath ) -> UICollectionReusableView {
var reusableview: UICollectionReusableView !
//分区头
if kind == UICollectionElementKindSectionHeader {
reusableview = collectionView.dequeueReusableSupplementaryView(ofKind: kind,
withReuseIdentifier: "HeaderView" , for : indexPath)
//设置头部标题
let label = reusableview.viewWithTag(1) as ! UILabel
label.text = books[indexPath.section].title
}
//分区尾
else if kind == UICollectionElementKindSectionFooter {
reusableview = collectionView.dequeueReusableSupplementaryView(ofKind: kind,
withReuseIdentifier: "FooterView" , for : indexPath)
}
return reusableview
}
//返回每个单元格视图
override func collectionView(_ collectionView: UICollectionView ,
cellForItemAt indexPath: IndexPath ) -> UICollectionViewCell {
//获取单元格
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell" ,
for : indexPath)
//设置单元格中的图片
let imageView = cell.viewWithTag(1) as ! UIImageView
imageView.image = UIImage (named: books[indexPath.section].images[indexPath.item])
return cell
}
override func didReceiveMemoryWarning() {
super .didReceiveMemoryWarning()
}
} |
原文链接:http://www.hangge.com/blog/cache/detail_1592.html