iOS Swift CollectionView 列表与网格布局之间切换（带动画）

iOS Swift CollectionView 列表与网格布局之间切换（带动画）

//
//  ViewController.swift
//  ChangeList
//
//  Created by wumeng on 2021/5/7.
//

import UIKit

let SCREEN_WIDTH = UIScreen.main.bounds.size.width
let SCREEN_HEIGHT = UIScreen.main.bounds.size.height


class ViewController: UIViewController ,UICollectionViewDelegate ,UICollectionViewDataSource ,UICollectionViewDelegateFlowLayout{
    
    private lazy var listCVLayout: UICollectionViewFlowLayout = {
        
        let collectionFlowLayout = UICollectionViewFlowLayout()
        collectionFlowLayout.sectionInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 30)
        collectionFlowLayout.itemSize = CGSize(width: SCREEN_WIDTH, height: 80)
        collectionFlowLayout.minimumInteritemSpacing = 0
        collectionFlowLayout.minimumLineSpacing = 0
        collectionFlowLayout.scrollDirection = .vertical
        return collectionFlowLayout
    }()
    
    private lazy var gridCVLayout: UICollectionViewFlowLayout = {
        
        let collectionFlowLayout = UICollectionViewFlowLayout()
        collectionFlowLayout.scrollDirection = .vertical
        collectionFlowLayout.sectionInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 30)
        collectionFlowLayout.itemSize = CGSize(width: (SCREEN_WIDTH - 80) / 2 , height: SCREEN_HEIGHT*0.16)
        collectionFlowLayout.minimumInteritemSpacing = 20
        collectionFlowLayout.minimumLineSpacing = 20
        return collectionFlowLayout
    }()
    
    
    private var listCV:UICollectionView!
    private var isListView:Bool = true
    
    private let reuseIdentifier = "Cell"
    private let reuseHeaderIdentifier = "headerView"
    private let reuseFooterIdentifier = "footerView"
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        self.initColleionView()
        
        //
        let controlView = UIControl.init(frame: CGRect.init(x: 10, y: 10, width: 50, height: 50));
        controlView.backgroundColor = UIColor.blue;
        self.view.addSubview(controlView)
        controlView.addTarget(self, action: #selector(WM_FUNC_changeClick(sender:)), for: UIControl.Event.touchUpInside)
        
    }
    

    
    func initColleionView()
    {
        self.listCV =  UICollectionView.init(frame: self.view.frame,collectionViewLayout: self.gridCVLayout)

        //        //注册一个cell
        listCV.register(UICollectionViewCell.self, forCellWithReuseIdentifier:reuseIdentifier)
        //        //注册一个headView
        listCV.register(UICollectionReusableView.self, forSupplementaryViewOfKind:UICollectionView.elementKindSectionHeader, withReuseIdentifier: reuseHeaderIdentifier)
        //        //注册一个footerView
        listCV.register(UICollectionReusableView.self, forSupplementaryViewOfKind:UICollectionView.elementKindSectionFooter, withReuseIdentifier: reuseFooterIdentifier)
        listCV.delegate = self;
        listCV.dataSource = self;
        listCV.backgroundColor = UIColor.white
        //设置每一个cell的宽高
        self.view.addSubview(listCV)
        
    }
    
    // MARK: UICollectionViewDataSource
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }
    
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of items
        return 100
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)
        
        // Configure the cell
        cell.backgroundColor = UIColor.red;
        
        return cell
    }
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView{
        var view:UICollectionReusableView =  UICollectionReusableView();
        if kind == UICollectionView.elementKindSectionHeader
        {
            view = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: reuseHeaderIdentifier, for: indexPath);
            view.backgroundColor = UIColor.lightGray;
        }
        else
        {
            view = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: reuseFooterIdentifier, for: indexPath);
            view.backgroundColor = UIColor.darkGray;
        }
        
        return view;
    }
    
    
    
    // MARK: UICollectionViewDelegate
    
    /*
     // Uncomment this method to specify if the specified item should be highlighted during tracking
     func collectionView(_ collectionView: UICollectionView, shouldHighlightItemAt indexPath: IndexPath) -> Bool {
     return true
     }
     */
    
    /*
     // Uncomment this method to specify if the specified item should be selected
     func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
     return true
     }
     */
    
    /*
     // Uncomment these methods to specify if an action menu should be displayed for the specified item, and react to actions performed on the item
     func collectionView(_ collectionView: UICollectionView, shouldShowMenuForItemAt indexPath: IndexPath) -> Bool {
     return false
     }
     
     func collectionView(_ collectionView: UICollectionView, canPerformAction action: Selector, forItemAt indexPath: IndexPath, withSender sender: Any?) -> Bool {
     return false
     }
     
     func collectionView(_ collectionView: UICollectionView, performAction action: Selector, forItemAt indexPath: IndexPath, withSender sender: Any?) {
     
     }
     */

    //change
    @objc func WM_FUNC_changeClick(sender:Any) -> Void {
        self.isListView = !self.isListView;
        self.WM_FUNC_changeLayout()
    }
    
    //更新布局
    func WM_FUNC_changeLayout() -> Void {
        self.listCV.setCollectionViewLayout(isListView ? self.listCVLayout : self.gridCVLayout, animated: true) { isfinish in
            print("isfinish == \(isfinish)")
        }
    }
    
    
}

图片示例：