Swift基础~UICollectionView

这里是Swift简单的UICollectionView的创建和使用,
其中的CollectionViewCell是自定义的cell,
ZLLCollectionReusableView是自定义的标题头,
ZLLFootCollectionReusableView是自定义的脚部.

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
    
    //全局变量
    var screen_width:CGFloat!
    var screen_height:CGFloat!
    
    
    var collectionView:UICollectionView!
    
    //MARK: -
    //MARK: init
    override func viewDidLoad() {
        super.viewDidLoad()
        screen_height = UIScreen.main.bounds.size.height
        screen_width = UIScreen.main.bounds.size.width
        
        self.setCollectionView()
    }

    //MARK: -
    //MARK: UI
    func setCollectionView() {
        //1, 流布局
        let layout = UICollectionViewFlowLayout.init()
        
        //2, 设置每个item的大小
        layout.itemSize = CGSize(width: screen_width/2, height: screen_height/3)
        
        //3, 垂直和水平滑动
        //        UICollectionViewScrollDirection.vertical  省略写法  .vertial
        //        UICollectionViewScrollDirection.horizontal  省略写法  .horizontal
        layout.scrollDirection = .vertical
        
        //4, 每个item之间的最小距离 inter 之间
        layout.minimumInteritemSpacing = 10
        
        //5, 每行之间的最小距离
        layout.minimumLineSpacing = 10
        
        //6, 定义collectionView
        collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: screen_width, height: screen_height), collectionViewLayout: layout)
        
        //7, 注册collectionViewCell
        collectionView.register(UINib (nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "CollectionViewCell")
        
        //8, 注册header
        collectionView.register(UINib (nibName: "ZLLCollectionReusableView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "ZLLCollectionReusableView")
        //设置页头尺寸
        layout.headerReferenceSize = CGSize.init(width: screen_width, height: 50)

        //9, 注册底部
        collectionView.register(UINib (nibName: "ZLLFootCollectionReusableView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "ZLLFootCollectionReusableView")
        //设置底部尺寸
        layout.footerReferenceSize = CGSize(width: screen_width, height: 50)
        
        //10, 设置delegate
        collectionView!.delegate = self
        collectionView!.dataSource = self
        
        //11, 分页显示效果
        collectionView.isPagingEnabled = true
        
         collectionView.backgroundColor = UIColor.white
        
        self.view.addSubview(collectionView)
    }
    
    
    //MARK: -
    //MARK: collection datasource
    
    func numberOfSections(in collectionView: UICollectionView) -> Int
    {
        return 1
    }
    
    //必选方法
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    {
        return 8
    }
    
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView
    {
       
        
        if (kind as String) == UICollectionElementKindSectionHeader  {
            //返回头部
            let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "ZLLCollectionReusableView", for: indexPath)
            
            return header
        }else
        {
            //返回底部
            let footer = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "ZLLFootCollectionReusableView", for: indexPath)
            return footer
        }
    }
    
    //必选方法
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as!CollectionViewCell
        
        cell.iconImageView.image = UIImage(named:"textImage")
        cell.backgroundColor = UIColor.red
        return cell
    }
    
    //MARK: -
    //MARK: delegateFlowlayout
    
    //返回header的大小
//    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize
//    {
//        return CGSize(width: screen_width, height: 50)
//    }

    
    //可以定制不同的item  return: item的大小
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
    {
        if (indexPath as IndexPath).row % 2 == 1 {
            return CGSize(width: (screen_width - 20)/2, height: screen_height/2)
        }else{
            return CGSize(width: (screen_width - 20)/2, height: screen_height/3)
        }
    }

    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

自定义的cell是继承UICollectionViewCell

import UIKit

class CollectionViewCell: UICollectionViewCell {
    
    //图片属性
    @IBOutlet weak var iconImageView: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

}

cell的头部和脚部都的自定义都是继承 UICollectionReusableView, 这和oc里是一样的
这里使用的是.xib文件, 脚和头一样,所以就只展示一下头的代码就行,其实也没什么内容,所有展示都在.xib上,我这里没有添加属性.

import UIKit

class ZLLCollectionReusableView: UICollectionReusableView {

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    
}

你可能感兴趣的