很多時候我們需要列表和宮格視圖的來回切換，就像蘋果的天氣應(yīng)用一樣幽勒，我之前見過一個用tableview和collectionview來實現(xiàn)這種效果的嗜侮，我本人不太喜歡這個，那么有沒有更好的方法呢啥容？答案是：有
初識UICollectionView
UICollectionView是一個比UITableView更靈活強大的控件锈颗。其他怎么使用這個控件這里不講述，這里只說列表和宮格的切換咪惠。我們查看UICollectionView的API击吱，可以發(fā)現(xiàn)有這么一個方法：
open func setCollectionViewLayout(_ layout: UICollectionViewLayout, animated: Bool) // transition from one layout to another
他的解釋是轉(zhuǎn)換一個布局到另一個布局。這不就是我們想要的嘛遥昧，我們實現(xiàn)兩個布局覆醇，通過該方法，來回切換布局就行了炭臭。
接下來我們通過代碼來實現(xiàn)
我們創(chuàng)建一個工程永脓，命名為ListAndGrid，我們直接在默認創(chuàng)建的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方法中對這幾個屬性進行初始設(shè)置
代碼如下
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.
}
然后實現(xiàn)UICollectionView相應(yīng)的代理方法
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
}
至此我們已經(jīng)實現(xiàn)所有基本代碼鞋仍，接下來我們需要觸發(fā)setCollectionViewLayout這個方法常摧，我這里是在導(dǎo)航控制器上添加了一個item，這里給出觸發(fā)事件的代碼
@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的注冊代碼，以便復(fù)用
collectionView.register(UINib.init(nibName: "LabelCell2", bundle: nil), forCellWithReuseIdentifier: "LabelCell2")
然后func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell代理中也需要做一些改變溃斋，我們需要區(qū)分是哪種布局界拦，改為下面這樣
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
}
}
最后關(guān)鍵的地方來了，我們?nèi)绻弥暗那袚Q布局方法會發(fā)現(xiàn)根本達不到目的梗劫，我們查看API發(fā)現(xiàn)有一個類似的方法是：func setCollectionViewLayout(_ layout: UICollectionViewLayout, animated: Bool, completion: ((Bool) -> Swift.Void)? = nil)享甸，這個方法比之前那個多一個完成之后的回調(diào)，我們可以利用回調(diào)來重新加載一下數(shù)據(jù)就可以了在跳，這次觸發(fā)時間里的代碼如下：
@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()
}
})
}
}
我們是在布局切換完之后又重新刷了一下數(shù)據(jù)枪萄。
運行程序，效果如下
至此猫妙，基本的內(nèi)容已經(jīng)講解完瓷翻，通過這些我們可以完成更復(fù)雜的內(nèi)容。
