1.描述
An object that manages an ordered collection of data items and presents them using customizable layouts.(一个管理集合数据元素和使用自定义布局展现它们的一个对象)
class UICollectionView : UIScrollView
image.png
集合视图(UICollectionView)和表视图大体相同,所以不进行详细介绍.这里只说一下不同之处.
集合是图是可以多列的,而且其布局需要UICollectionViewLayout支持.这是一个抽象类,具体实现需要使用其子类,系统提供给我们一个UICollectionViewFlowLayout,也可以自己集成,根据提供的接口进行实现自定义布局.
关键属性:
minimumLineSpacing //最小行间距
minimumInteritemSpacing //最小item的列间距
itemSize //item的大小,可以不指定,cell会根据自适应设置
sectionInset //每段内容的上下左右内间距
系统会根据Cell大小,minimumLineSpacing,minimumInteritemSpacing,sectionInset来进行行和列的布局.
集合视图也支持Cell的重用,使用方法类型于表视图.
2.代码示例
2.1.storyboard创建方式
添加UICollectionView,会自带一个Cell,对Cell进行设置重用标识
image.png
image.png
Cell中添加Label
image.png
设置Label的tag,用于后面方便获取
image.png
设置好集合视图的Layout的关键属性
image.png
image.png
当Estimate Size为自动时候,Cell Size则不会受到影响,只会根据Cell里内容进行自适应.
设置ViewController为Collection的delegate和dataSource,并且关联Collection对象
image.png
代码部分:
import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
@IBOutlet weak var myCollectionView: UICollectionView!
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 100
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
2
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = myCollectionView.dequeueReusableCell(withReuseIdentifier: "defaultCell", for: indexPath)
let label = cell.contentView.viewWithTag(111) as! UILabel
label.text = "Cell:\(indexPath.section)-\(indexPath.item)"
return cell;
}
override func viewDidLoad() {
super.viewDidLoad()
}
}
2.2.xib方式创建
该方式无法自动计算Cell的itemSize,只能通过设置固定大小方式,创建自定义的Cell类
image.png
制定Cell的重用标识
image.png
核心代码:
import UIKit
class SecondViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
@IBOutlet weak var myCollectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.myCollectionView.register(UINib.init(nibName: "SecondCollectonViewCell", bundle: nil), forCellWithReuseIdentifier: "SecondCollectonViewCell")
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 100
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
2
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell : SecondCollectonViewCell = myCollectionView.dequeueReusableCell(withReuseIdentifier: "SecondCollectonViewCell", for: indexPath) as! SecondCollectonViewCell
cell.configLabel(labelStr: "Cell:\(indexPath.section)-\(indexPath.item)")
return cell;
}
}
import UIKit
class SecondCollectonViewCell: UICollectionViewCell {
@IBOutlet weak var myLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
func configLabel(labelStr : String){
self.myLabel.text = labelStr
}
}
2.3.纯代码方式
创建Collection时候需要初始化UICollectionViewFlowLayout,layout的关键属性可以使用属性赋值,也可以使用代理方法赋值
import UIKit
class ThirdViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
var myCollection : UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
self.navigationItem.title = "代码方式创建"
let layout = UICollectionViewFlowLayout()
layout.minimumLineSpacing = 1.0;
layout.minimumInteritemSpacing = 1.0;
//这里不用属性而用方法设置,二者没有区别,用方法可以对制定的item定制
// layout.itemSize = CGSize.init(width: 100, height: 50)
self.myCollection = UICollectionView.init(frame: CGRect.zero, collectionViewLayout: layout)
self.myCollection.backgroundColor = UIColor.white
self.myCollection.translatesAutoresizingMaskIntoConstraints = false
myCollection.register(ThirdCollectionViewCell.self, forCellWithReuseIdentifier: "ThirdCollectionViewCell")
self.myCollection.delegate = self
self.myCollection.dataSource = self
self.view.addSubview(myCollection)
let constraintV = NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[myCollection]-0-|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: ["myCollection" : self.myCollection!])
let constraintH = NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[myCollection]-0-|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: ["myCollection" : self.myCollection!])
self.view.addConstraints(constraintV)
self.view.addConstraints(constraintH)
}
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize.init(width: 100, height: 50)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 200
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell : ThirdCollectionViewCell = self.myCollection.dequeueReusableCell(withReuseIdentifier: "ThirdCollectionViewCell", for:indexPath) as! ThirdCollectionViewCell
cell.configLabel(labelStr: "Cell:\(indexPath.section)-\(indexPath.item)")
return cell
}
}
import UIKit
class ThirdCollectionViewCell: UICollectionViewCell {
let myLabel = UILabel()
override init(frame: CGRect) {
super.init(frame: frame)
self.contentView.addSubview(self.myLabel)
self.myLabel.translatesAutoresizingMaskIntoConstraints = false
self.myLabel.textAlignment = .center
let constraintV = NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[myLabel]-0-|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: ["myLabel" : self.myLabel])
let constraintH = NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[myLabel]-0-|", options: NSLayoutConstraint.FormatOptions(), metrics: nil, views: ["myLabel" : self.myLabel])
self.contentView.addConstraints(constraintV)
self.contentView.addConstraints(constraintH)
self.contentView.backgroundColor = UIColor.systemGreen
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func configLabel(labelStr : String){
self.myLabel.text = labelStr
}
}
- 工程下载地址:
https://github.com/DeveloperZhang/SwiftStudyDemo
3.总结
UICollectionView是一个最基础常见的视图类,可以参考文档进行深入学习:UIKit->Views and Controls->UICollectionView