在ViewController.中
ViewController.swift:
//UICollectionViewDelegate是父协议UICollectionViewDelegateFlowLayout是子协议
//遵循了子协议就不用遵循父协议了
class ViewController: UIViewController ,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
//定义重用标识
let itemIdentifier = "item"
//区头 区尾
let headerIdentifier = "header"
//注册重用标识
let footerIdentifier = "footer"
override func viewDidLoad() {
super.viewDidLoad()
//创建布局对象
let flowLayout = UICollectionViewFlowLayout()
//设置item的大小
flowLayout.itemSize = CGSize(width: 100, height: 100)
//设置滚动的方向 horizontal水平混动
flowLayout.scrollDirection = .vertical
//设置最小行间距
flowLayout.minimumLineSpacing = 1
//设置最小列间距
flowLayout.minimumInteritemSpacing = 40
//设置分区缩进量
flowLayout.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 20, right: 10)
//设置区头的大小
flowLayout.headerReferenceSize = CGSize(width: 0, height: 100)
flowLayout.footerReferenceSize = CGSize(width: 0, height: 60)
//创建一个UICollectionView对象
//UICollectionView布局比较复杂，所以专门为他设计了一个布局类UICollectionView，但是很少直接使用他的基类，都是实用他的子类UICollectionViewFlowLayout
let collectionView = UICollectionView(frame: UIScreen.main.bounds, collectionViewLayout: flowLayout)
collectionView.backgroundColor = UIColor.cyan
//注册item
//UICollectionViewCell就是一个视图上面什么控件都没有，当我们要展示文字或图片，就需要自定义cell
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: itemIdentifier)
//注册区头
collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier)
//注册区尾
collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier)
//指定数据源代理
collectionView.dataSource = self
//指定业务代理
collectionView.delegate = self
//添加到父类视图
self.view.addSubview(collectionView)
}
//MARK:_UICollectionViewDataSource的协议方法
//返回区头区尾视图的代理方法
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
//返回区头视图
if kind == UICollectionElementKindSectionHeader{
let headerview = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier, for: indexPath)
headerview.backgroundColor = UIColor.red
return headerview
}else{
//返回区尾视图
let footerview = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier, for: indexPath)
footerview.backgroundColor = UIColor.purple
return footerview
}
}
//返回CollectionView有多少分区
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 3
}
//返回一个分区有多少个Item的方法
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return section % 2 == 0 ? 10 : 20
}
//返回UICollectionViewCell视图
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: itemIdentifier, for: indexPath)
cell.backgroundColor = #colorLiteral(red: 0, green: 0.9768045545, blue: 0, alpha: 1)
return cell
}
//MARK:- UICollectionDelegateFlowLayout协议方法
//选中item会触发的方法//加导航栏
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// print("item所在分区的下标\(indexPath.section)")
// print("item所在分区中的下标\(indexPath.item)")
let detailVC = DetailViewController()
self.navigationController?.pushViewController(detailVC, animated: true)
}
//返回item高度的方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return indexPath.section % 2 == 0 ? CGSize(width: 80, height: 80) : CGSize(width: 120, height: 120)
}
//返回分区缩进量的方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
if section == 0 {
return UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
}
else{
return UIEdgeInsets(top: 30, left: 10, bottom: 30, right: 10)
}
}
//返回区头大小的方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
if section == 0 {
return CGSize(width: 0, height: 200)
}else{
return CGSize(width: 0, height: 50)
}
}
//返回区尾视图的方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
if section != 0 {
return CGSize(width: 0, height: 20)
}
else{
return CGSize(width: 0, height: 100)
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat{
return 1
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat{
return 40
}
//跳转界面
DetailViewController.swift:
class DetailViewController: UIViewController ,UICollectionViewDataSource{
//给item
let itemIdentifier = "item"
let headerIdentifier = "header"
let footerIdentifier = "footer"
override func viewDidLoad() {
super.viewDidLoad()
// self.view.backgroundColor = UIColor.yellow
//创建布局对象
let flowView = UICollectionViewFlowLayout()
flowView.itemSize = CGSize(width: 100, height: 100)
//表头标尾视图大小
flowView.headerReferenceSize = CGSize(width: 0, height: 120)
flowView.footerReferenceSize = CGSize(width: 0, height: 40)
//创建UICollectionView对象
let collectionView = UICollectionView(frame: UIScreen.main.bounds, collectionViewLayout: flowView)
collectionView.backgroundColor = #colorLiteral(red: 0, green: 0.9768045545, blue: 0, alpha: 1)
//配置数据源代理
collectionView.dataSource = self
//
// collectionView.delegate = self
//注册cell
collectionView.register(Image_CollectionViewCell.self, forCellWithReuseIdentifier: itemIdentifier)
//注册区头区尾
collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier)
collectionView.register(FooterView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier)
//添加到父视图
self.view.addSubview(collectionView)
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: itemIdentifier, for: indexPath) as! Image_CollectionViewCell
cell.imageView.image = UIImage(named: "e.jpg")
return cell
}
```
```c
然后自定义cell：（布局）
Image CollectionViewCell.swift:
class Image_CollectionViewCell: UICollectionViewCell {
var imageView:UIImageView!
override init(frame: CGRect) {
super.init(frame: frame)
self.setupViews()
}
func setupViews() {
imageView = UIImageView(frame:self.contentView.bounds)
imageView.backgroundColor = UIColor.yellow
self.contentView.addSubview(imageView)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
if kind == UICollectionElementKindSectionHeader{
let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: headerIdentifier, for: indexPath) as!HeaderView
headerView.headerPic.image = UIImage(named: "c.jpg")
return headerView
}
else{
let footer = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: footerIdentifier, for: indexPath) as! FooterView
footer.sectionNumberLabel.text = "第几\(indexPath.section)分区"
return footer
}
}
新建界面UICollectionReusableView
class HeaderView: UICollectionReusableView {
var headerPic : UIImageView!
override init(frame: CGRect) {
super.init(frame: frame)
self.setupView()
}
func setupView(){
headerPic = UIImageView(frame: self.bounds)
headerPic.backgroundColor = #colorLiteral(red: 0.9098039269, green: 0.4784313738, blue: 0.6431372762, alpha: 1)
self.addSubview(headerPic)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
FooterView.swift:新建界面UICollectionReusableView
class FooterView: UICollectionReusableView {
var sectionNumberLabel:UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
self.setupViews()
}
func setupViews(){
sectionNumberLabel = UILabel(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 40))
sectionNumberLabel.backgroundColor = #colorLiteral(red: 1, green: 0.2527923882, blue: 1, alpha: 1)
self.addSubview(sectionNumberLabel)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
