利用UICollectionView实现列表和宫格视图的切换

很多时候我们需要列表和宫格视图的来回切换，就像苹果的天气应用一样，我之前见过一个用tableview和collectionview来实现这种效果的，我本人不太喜欢这个，那么有没有更好的方法呢？答案是：有

初识UICollectionView

UICollectionView是一个比UITableView更灵活强大的控件。其他怎么使用这个控件这里不讲述，这里只说列表和宫格的切换。我们查看UICollectionView的API，可以发现有这么一个方法：

open func setCollectionViewLayout(_ layout: UICollectionViewLayout, animated: Bool) // transition from one layout to another

他的解释是转换一个布局到另一个布局。这不就是我们想要的嘛，我们实现两个布局，通过该方法，来回切换布局就行了。

接下来我们通过代码来实现

我们创建一个工程，命名为ListAndGrid，我们直接在默认创建的ViewController中先写这么几个属性 

var collectionView: UICollectionView!
var datas: [String] {
        var d = [String]()
        for i in 1...100 {
            d.append("\(i)")
        }
        return d
    }

 let listLayout = UICollectionViewFlowLayout() // 列表布局

 let gridLayout = UICollectionViewFlowLayout() // 宫格布局

接下来我们在viewDidLoad方法中对这几个属性进行初始设置

代码如下

override func viewDidLoad() {
        super.viewDidLoad()
        
        listLayout.itemSize = CGSize(width: UIScreen.main.bounds.size.width, height: 100)
        
        gridLayout.itemSize = CGSize(width: (UIScreen.main.bounds.size.width - 4) / 3.0, height: 50)
        gridLayout.minimumLineSpacing = 2
        gridLayout.minimumInteritemSpacing = 2
        
        collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: listLayout)
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.register(UINib.init(nibName: "LabelCell", bundle: nil), forCellWithReuseIdentifier: "LabelCell")

        collectionView.backgroundColor = UIColor.white
        view.addSubview(collectionView)
        // Do any additional setup after loading the view, typically from a nib.

 }

然后实现UICollectionView相应的代理方法

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return datas.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "LabelCell", for: indexPath) as! LabelCell
       cell.label.text = datas[indexPath.row]
       return cell
}

至此我们已经实现所有基本代码，接下来我们需要触发setCollectionViewLayout这个方法，我这里是在导航控制器上添加了一个item，这里给出触发事件的代码

@IBAction func clickItem(_ sender: UIBarButtonItem) {
        if collectionView.collectionViewLayout == listLayout {
            collectionView.setCollectionViewLayout(gridLayout, animated: true)
        } else {
           collectionView.setCollectionViewLayout(listLayout, animated: true)
        }
}

运行程序，效果如下图

切换之后改变cell样式

这是cell样式一样的情况，如果我们要在不用的布局中用不同的cell样式该怎么办呢？

我们首先要在viewDidLoad中添加另一个cell的注册代码，以便复用

collectionView.register(UINib.init(nibName: "LabelCell2", bundle: nil), forCellWithReuseIdentifier: "LabelCell2")

然后func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell代理中也需要做一些改变，我们需要区分是哪种布局，改为下面这样

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if collectionView.collectionViewLayout == listLayout {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "LabelCell", for: indexPath) as! LabelCell
            cell.label.text = datas[indexPath.row]
            return cell
        } else {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "LabelCell2", for: indexPath) as! LabelCell2
            cell.label.text = datas[indexPath.row]
            return cell
        }
}

最后关键的地方来了，我们如果用之前的切换布局方法会发现根本达不到目的，我们查看API发现有一个类似的方法是：func setCollectionViewLayout(_ layout: UICollectionViewLayout, animated: Bool, completion: ((Bool) -> Swift.Void)? = nil)，这个方法比之前那个多一个完成之后的回调，我们可以利用回调来重新加载一下数据就可以了，这次触发时间里的代码如下：

@IBAction func clickItem(_ sender: UIBarButtonItem) {
        if collectionView.collectionViewLayout == listLayout {
            collectionView.setCollectionViewLayout(gridLayout, animated: true, completion: { (com) in
                    if com {
                        self.collectionView.reloadData()
                    }
            })
            
        } else {
            collectionView.setCollectionViewLayout(listLayout, animated: true, completion: { (com) in
                    if com {
                        self.collectionView.reloadData()
                    }
            })
            
        }
}

我们是在布局切换完之后又重新刷了一下数据。

运行程序，效果如下

至此，基本的内容已经讲解完，通过这些我们可以完成更复杂的内容

本工程代码请点击下载