UICollectionView使用

1,017 阅读2分钟

在项目中看到有使用多种collectionViewCell,和header的情况,感觉用起来还是比较方便。之前遇到类似的界面,都没有想到😂. 看下效果图吧:

tu.gif
先说下思路,这整个一块是一个collectionView,然后分为3组 第一组:十点便宜图片是图+一个label为headerA,然后cellA的个数返回0 第二组:详细信息的label为headerB,然后cellB返回10个。 第三组:推荐为headerC,然后cellC返回50个。 当然其中的透视图和cell都是自定义的,这里我用的xib比较快可以达到我想要的效果。

1.再来看看实现的过程,首先是实例化collectionView,然后给他一个默认的布局方式。

let flow:UICollectionViewFlowLayout = {
        let flow = UICollectionViewFlowLayout()
        flow.itemSize = CGSize(width: 50, height: 50)
        flow.minimumLineSpacing = 1;
        flow.minimumInteritemSpacing = 1;
        flow.scrollDirection = .vertical;
        return flow
    }()
    var collection:UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        //初始化
        collection = UICollectionView(frame: view.bounds, collectionViewLayout: flow)
        collection.dataSource = self;
        collection.delegate = self;
        collection.backgroundColor = UIColor.white
        view.addSubview(collection)
        
        //MARK:-----------注册cell-------------//
        collection.register(UINib(nibName: "CellA", bundle: nil), forCellWithReuseIdentifier: "cellA")
        collection.register(UINib(nibName: "CellB", bundle: nil), forCellWithReuseIdentifier: "cellB")
        collection.register(UINib(nibName: "CellC", bundle: nil), forCellWithReuseIdentifier: "cellC")
        
        //MARK:-----------注册Header-------------//
        collection.register(UINib(nibName: "HeaderA", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headA")
        collection.register(UINib(nibName: "HeaderB", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headB")
        collection.register(UINib(nibName: "HeaderC", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headC")
    }

2.再到我们的拓展里面来实现代理,这里要注意的是要遵守 UICollectionViewDelegateFlowLayout代理,然后才能进行自定义的布局的cell大小、header的宽高、cell之间的边距。然后就是根据不同的组返回不同的cell和header了。还是比较简单。

extension ViewController:UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
    
    //布局的代理
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        switch indexPath.section {
        case 0:
            return CGSize.zero
        case 1:
            return CGSize(width: 100, height: 50)
        case 2:
            return CGSize(width: (UIScreen.main.bounds.width-30) / 2.0, height: 100)
        default:
            return CGSize.zero
        }
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        switch section {
        case 0:
            return CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height / 2.0)
        case 1:
            return CGSize(width: UIScreen.main.bounds.width, height: 50)
        case 2:
            return CGSize(width: UIScreen.main.bounds.width, height: 100)
        default:
            return CGSize.zero
        }
    }
    //自定义头头
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        switch indexPath.section {
        case 0:
            let headA = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "headA", for: indexPath)
            headA.backgroundColor = UIColor.cyan
            return headA;
        case 1:
            let headB = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "headB", for: indexPath)
            headB.backgroundColor = UIColor.gray
            return headB;
        default:
            let headC = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "headC", for: indexPath)
            headC.backgroundColor = UIColor.brown
            return headC;
        }
        
        
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        switch indexPath.section {
        case 0:
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellA", for: indexPath)
            return cell
        case 1:
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellB", for: indexPath)
            return cell
        default:
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellC", for: indexPath)
            return cell
        }
        
        
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if section == 0 { return 0 }
        if section == 1 { return 10 }
        return 20
    }
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 3
    }
}