迟到的Swift入门 - UICollectionView

UICollectionView入门操作

1.基础操作

1.0 初始化UICollectionView

// 懒加载
lazy var collectView: UICollectionView = {
   			// FlowLayout自定义设置
        let layout = UICollectionViewFlowLayout.init()
  			// 设置item的排列方式 ( horizontal , vertical)
  			layout.scrollDirection = .vertical
 				// 设置item的size
        layout.itemSize = CGSize(width: self.view.frame.size.width/4, height: self.view.frame.size.width/4)
  			// 列间距
        layout.minimumLineSpacing = 1
  			// 行间距
        layout.minimumInteritemSpacing = 1
        // 设置item的四边边距
        layout.sectionInset =UIEdgeInsetsMake(10, 0, 10, 0)
        // 设置页头尺寸
        layout.footerReferenceSize = CGSize(width: self.view.frame.size.width, height: 50)
  			// 设置页尾尺寸
        layout.headerReferenceSize = CGSize(width: self.view.frame.size.width, height: 50)
        // 初始化
  			let collectview = UICollectionView.init(frame: self.view.bounds, collectionViewLayout: layout)
  			// 设置背景颜色
        collectview.backgroundColor = .green
        // 设置代理对象
        collectview.delegate = self
        // 设置数据源对象
        collectview.dataSource = self
        collectview.showsVerticalScrollIndicator = true
  			// 设置垂直滚动是否滚到item的最底部
  			collectview.alwaysBounceVertical = true
  			// 设置水平滚动是否滚到item的最右边
        collectview.alwaysBounceHorizontal = true
  			// 开启uicollectionView的分页显示效果
        collectview.isPagingEnabled = true
        // 注册Cell
        collectview.register(ProfessTypeViewCell.self, forCellWithReuseIdentifier: "ProfessTypeViewCell")

        // 注册Hearder
  			collectview.register(UICollectionReusableView.self, forSupplementaryViewOfKind:UICollectionView.elementKindSectionHeader, withReuseIdentifier: "reusable")
        return collectview
 }()

1.1 UICollectionViewDelegate

extension LZCollectionVC : UICollectionViewDelegate{
     //    MARK: - item 点击
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("响应点击事件")
    }
}

1.2 UICollectionViewDataSource

extension LZCollectionVC : UICollectionViewDataSource{
    // 设置组数
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 6
    }
    // 设置每组item格式
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 9
    }
    // 注册cell
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cellString = "ProfessTypeViewCell"
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellString, for: indexPath)
        cell.backgroundColor = .red
        return cell
    }
}

1.3 UICollectionViewDelegateFlowLayout

extension ViewController : UICollectionViewDelegateFlowLayout{
    //    MARK: - item Size
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.frame.width / 3.73
        return CGSize(width: width, height: width + 20 )
    }
	 //     MARK: - 边框距离
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
    }
    //    MARK: - 行最小间距
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 20
    }
    //    MARK: - 列最小间距
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 20
    }
}

1.4 header和footer 设置

//   MARK: - 设定header和footer的方法，根据kind不同进行不同的判断即可
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        if kind == UICollectionView.elementKindSectionHeader{
            let headerV = collectionView .dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "headerIdentifier", for: indexPath)
            headerV.backgroundColor = armColor()
            return headerV
        }else if kind == UICollectionView.elementKindSectionFooter{
            let footerV = collectionView .dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: "footIdentifier", for: indexPath)
            footerV.backgroundColor = armColor()
            return footerV
        }
        return UICollectionReusableView.init()
    }
    
    //    MARK: - headerView 高
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSize (width: screenW, height: 100)
    }
    
    //    MARK: - footerView 高
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
        return CGSize (width: screenW, height: 100)
    }

1.5 item 高亮处理

  //    MARK: - 是否高亮
    func collectionView(_ collectionView: UICollectionView, shouldHighlightItemAt indexPath: IndexPath) -> Bool{
        return true
    }
    
    //    MARK: - 高亮颜色
    func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath){
        let cell = collectionView .cellForItem(at: indexPath)
        cell?.backgroundColor = armColor()
    }
    
    //    MARK: - 取消长按颜色
    func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath){
        let cell = collectionView .cellForItem(at: indexPath)
        cell?.backgroundColor = kColor(red: 53, green: 49, blue: 59)
    }
    
    func armColor()->UIColor{
        let red = CGFloat(arc4random()%256)/255.0
        let green = CGFloat(arc4random()%256)/255.0
        let blue = CGFloat(arc4random()%256)/255.0
        print("red:\(red),green:\(green),blue:\(blue)")
        return UIColor(red: red, green: green, blue: blue, alpha: 1.0)
    }

备注：

【 采用该方式实现代理协议是对ViewController单独的函数方式：“extension LZCollectionVC : UICollectionViewDataSource” 】

整体说明：

import UIKit

class LZCollectionVC: UIViewController{
    
  
    lazy var hearderImage:UIImageView = {
        let hearderImage = UIImageView()
        hearderImage.image = UIImage(named: "doctor")
        return hearderImage
    }()

    
    lazy var collectView: UICollectionView = {
        let layout = UICollectionViewFlowLayout.init()
        // 设置item大小
        layout.itemSize = CGSize(width: self.view.frame.size.width/4, height: self.view.frame.size.width/4)
        layout.minimumLineSpacing = 1
        layout.minimumInteritemSpacing = 1
        layout.scrollDirection = .vertical
        //
        layout.footerReferenceSize = CGSize(width: self.view.frame.size.width, height: 50)
        layout.headerReferenceSize = CGSize(width: self.view.frame.size.width, height: 50)
        let collectview = UICollectionView.init(frame: self.view.bounds, collectionViewLayout: layout)
        collectview.backgroundColor = .green
        collectview.delegate = self
        collectview.dataSource = self
        collectview.showsVerticalScrollIndicator = true
        collectview.isPagingEnabled = true
        // 注册Cell
        collectview.register(ProfessTypeViewCell.self, forCellWithReuseIdentifier: "ProfessTypeViewCell")

        //
//        collectview.register(UICollectionReusableView.self, forSupplementaryViewOfKind:UICollectionView.elementKindSectionHeader, withReuseIdentifier: "reusable")
        return collectview
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.creatUI()
    }
    
    func creatUI() -> Void {
        self.view.addSubview(self.collectView)
        self.collectView.snp.makeConstraints { (make) in
            make.edges.equalToSuperview().inset(UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0))
        }
    }
}


extension LZCollectionVC : UICollectionViewDelegate{
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("响应点击事件")
    }
}

extension LZCollectionVC : UICollectionViewDataSource{
    // 设置组数
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 6
    }
    // 设置每组item格式
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 9
    }
    // 注册cell
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cellString = "ProfessTypeViewCell"
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellString, for: indexPath)
        cell.backgroundColor = .red
        return cell
    }
}

extension ViewController : UICollectionViewDelegateFlowLayout{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.frame.width / 3.73
        return CGSize(width: width, height: width + 20 )
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 20
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 20
    }
}

2. UICollectionViewCell 自定义

### 1.基础举例

import Foundation
class ProfessTypeViewCell: UICollectionViewCell {
    
    lazy var mTextLabel: UILabel = {
        let mTextLabel = UILabel()
        mTextLabel.font = UIFont.systemFont(ofSize: 14)
        mTextLabel.textAlignment = NSTextAlignment.center
        mTextLabel.layer.masksToBounds = true
        mTextLabel.layer.cornerRadius = 18
        mTextLabel.text = "Item"
        return mTextLabel
    }()
    
    lazy var mImage: UIImageView = {
        let mImage = UIImageView()
        mImage.image = UIImage(named: "gridman")
        return mImage
    }()
    
    override init(frame:CGRect) {
        
        super.init(frame: frame)
        
        let cellWidth:CGFloat = self.frame.size.width
        let cellHeight:CGFloat = self.frame.size.height
        
        self.contentView.addSubview(self.mImage)
        
        self.mImage.snp.makeConstraints { (make) in
            make.centerX.equalTo(self)
            make.centerY.equalTo(self).offset(-10)
            make.width.equalTo(cellWidth/3)
            make.height.equalTo(cellHeight/3)
        }
        
        self.contentView.addSubview(self.mTextLabel)
        
        self.mTextLabel.snp.makeConstraints { (make) in
            make.centerX.equalTo(self)
            make.top.equalTo(self.mImage.snp.bottom).offset(10)
            make.width.equalTo(cellWidth)
            make.height.equalTo(20)
        }
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:)has not been implemented")
    }
}