很多时候我们需要列表和宫格视图的来回切换，就像苹果的天气应用一样，我之前见过一个用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()
}
})
}
}
我们是在布局切换完之后又重新刷了一下数据。
运行程序，效果如下
至此，基本的内容已经讲解完，通过这些我们可以完成更复杂的内容。
