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)")
}
}
}
图片示例：
2.gif
