定义collectionView的布局类型，流式布局
let layout = UICollectionViewFlowLayout()
设置item（cell）的大小
layout.itemSize = CGSize(width: width/2, height: height/3)
设置滑动方向
/**
默认方向是垂直
UICollectionViewScrollDirection.vertical 省略写法是.vertical
水平方向
UICollectionViewScrollDirection.horizontal 省略写法是.horizontal
*/
layout.scrollDirection = .vertical
设置每个item之间最小的间距
layout.minimumInteritemSpacing = 0
设置每行之间最小的间距
layout.minimumLineSpacing = 0
定义一个UICollectionView
let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: width, height: height), collectionViewLayout: layout)
collectionView.backgroundColor = UIColor.red
设置collectionView的代理 (注意：设置完代理之后会有错误，原因是代理的必要方法没有实现)
collectionView.delegate = self
collectionView.dataSource = self
collectionViewCell的注册
collectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "MyCell")
header 的注册
collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headView")
加载collectionView
self.view.addSubview(collectionView)
实现collectionView的相关代理方法
使用关键字extension继承代理，方法如下
extension MainViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout
numberOfSections方法，该方法为 可选 方法，返回sections的个数，默认return 1
// MARK: UICollectionViewDataSource 代理方法
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
numberOfItemsInSection方法，该方法为 必选 方法，返回section中item的个数
// MARK: UICollectionviewDataSource 代理方法
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 8
}
cellForItemAt方法，该方法为 必选 方法，返回绘制collectionView的cell
// MARK: UICollectionviewDataSource 代理方法
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! CollectionViewCell
cell.imageView.image = UIImage(named: "\((indexPath as NSIndexPath).row + 2).png")
cell.label.text = "美景\((indexPath as NSIndexPath).row + 1)"
return cell
}
didSelectItemAt方法，该方法为 可选 方法，当点击某个item之后的响应
// MARK: UICollectionViewDelegate的代理方法
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print("(\((indexPath as NSIndexPath).section), \((indexPath as NSIndexPath).row))")
}
referenceSizeForHeaderInSection方法，该方法为 可选 方法，return: header的大小
// MARK: UICollectionViewDelegateFlowLayout的代理方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: width, height: 17)
}
sizeForItemAt方法，该方法为 可选 方法，return: item的大小
// MARK: UICollectionViewDelegateFlowLayout的代理方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if (indexPath as NSIndexPath).row % 2 == 1 {
return CGSize(width: width/2, height: height/3)
}
else {
return CGSize(width: width/2, height: height/2)
}
}
完整代码
class MainViewController: UIViewController {
// 屏幕的宽和高
let width = UIScreen.main.bounds.width
let height = UIScreen.main.bounds.height
override func viewDidLoad() {
super.viewDidLoad()
// 加载UICollectionView
self.setupCollectionView()
}
// MARK: 加载UICollectionView
func setupCollectionView() {
// 1. 定义collectionView的布局类型，流布局
let layout = UICollectionViewFlowLayout()
// 2. 设置cell的大小
layout.itemSize = CGSize(width: width/2, height: height/3)
// 3. 滑动方向
/**
默认方向是垂直
UICollectionViewScrollDirection.vertical 省略写法是.vertical
水平方向
UICollectionViewScrollDirection.horizontal 省略写法是.horizontal
*/
layout.scrollDirection = .vertical
// 4. 每个item之间最小的间距
layout.minimumInteritemSpacing = 0
// 5. 每行之间最小的间距
layout.minimumLineSpacing = 0
// 6. 定义一个UICollectionView
let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: width, height: height), collectionViewLayout: layout)
collectionView.backgroundColor = UIColor.red
// 7. 设置collectionView的代理和数据源
collectionView.delegate = self
collectionView.dataSource = self;
// 8. collectionViewCell的注册
collectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "MyCell")
// 9. header 的注册
collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headView")
self.view.addSubview(collectionView)
}
}
extension MainViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
// MARK: UICollectionViewDataSource 代理方法
/**
该方法为可选方法，默认为1
return: collectionView中section的个数
*/
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
// MARK: UICollectionviewDataSource 代理方法
/**
改方法为必选方法
return: section中的item的个数
*/
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 8
}
// MARK: UICollectionviewDataSource 代理方法
/**
改方法为必选方法
return: 绘制collectionView的cell
*/
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! CollectionViewCell
cell.imageView.image = UIImage(named: "\((indexPath as NSIndexPath).row + 2).png")
cell.label.text = "美景\((indexPath as NSIndexPath).row + 1)"
return cell
}
// MARK: UICollectionViewDelegate的代理方法
/**
Description: 当点击某个item之后的回应
*/
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print("(\((indexPath as NSIndexPath).section), \((indexPath as NSIndexPath).row))")
}
// MARK: UICollectionViewDelegateFlowLayout的代理方法
/**
return: header的大小
*/
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: width, height: 17)
}
/**
可以定制不同的item
return： item的大小
*/
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if (indexPath as NSIndexPath).row % 2 == 1 {
return CGSize(width: width/2, height: height/3)
}
else {
return CGSize(width: width/2, height: height/2)
}
}
}
网友评论