帶殼截圖工具OneScreen跟最開始想的一樣，確實不好上架，不過也不妨礙將其中使用到的技巧分享給大家。
在很多工具類應用中，特別是包含了多種屬性設定的應用，例如視訊編輯類、圖片編輯類，一個頁面通常承載了多個資料來源及它的操作。
今天我為大家帶來一個用CollectionView實現多個功能區設定的方式。每個CollectionView的資料可以相互關聯，也可以不用相互關聯，我今天舉的例子中資料相互關聯了，當然我會在後文指定的地方告訴大家改為不關聯。
主要涵蓋的內容是：
1.建立多個CollectionView
2.多個CollectionView載入不同的資料來源
3.多個CollectionView各自的操作函式
4.多個CollectionView之間是否相互關聯資料
一、建立CollectionView
在OneScreen的標準模式中，允許使用者設定機型、顏色、角度三個屬性，因此在這個例子中，我先在Main.stroyboard中建立了三個CollectionView。
同時為了後續的載入資料，分別設定了他們的tag為0、1、2，其中按照順序進行設定。
二、基礎繫結CollectionView
來到三個CollectionView所在的DeviceViewController.swift和DeviceViewControllerViewCell.swift中，我們按照最基本的要求設定好每個Cell的ID,同時繫結好資料，就像我們只有1個CollectionView那樣一一繫結：
class DeviceViewController:
UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{
...
}
複製程式碼三、設定CollectionView的不同高度
因為三個屬性在我的規劃中包含不同的尺寸要求，因此利用tag我們先設定了三個CollectionView的高度：
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
let width = self.phoneCollectionView.frame.width
var height = self.phoneCollectionView.frame.height
switch collectionView.tag {
case 0:
//phone
height = self.phoneCollectionView.frame.height
return CGSize(width: width/5, height: height)
case 1:
//color
height = self.colorCollectionView.frame.height
return CGSize(width: height-24, height: height-24)
case 2:
//direction
height = self.directionCollectionView.frame.height
return CGSize(width: (width-16)/3, height: height)
default:
return CGSize(width: width/5, height: height-8)
}
}
複製程式碼四、分別載入CollectionView的資料
接下來最重要的是三個CollectionView顯示和載入不同的資料，因為程式碼太長，這裡我就做一部分出來，供大家參考。
同樣利用了CollectionView的tag值，分別返回cellA、cellB、cellC。
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
switch collectionView.tag {
case 0:
//PHONE
let cellA = collectionView.dequeueReusableCell(withReuseIdentifier: "phoneCell", for: indexPath) as! DeviceCollectionViewCell
//這裡設定cellA的相關值...
return cellA
case 1:
//COLOR
let cellB = collectionView.dequeueReusableCell(withReuseIdentifier: "colorCell", for: indexPath) as! DeviceCollectionViewCell
//這裡設定cellB的相關值...
return cellB
default:
//COLOR
let cellC = collectionView.dequeueReusableCell(withReuseIdentifier: "directionCell", for: indexPath) as! DeviceCollectionViewCell
//這裡設定cellC的相關值...
return cellB
}
}
複製程式碼五、設定CollectionView的不同操作函式
最後設定他們的點選函式，也就更清晰了，這裡我用了傳參函式的形式將點選函式分別放在了self.SelectedPhone、SelectedColor、SelectedDirection裡面。
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print(indexPath.row)
switch collectionView.tag {
case 0:
self.SelectedPhone(index: indexPath.row)
case 1:
self.SelectedColor(index: indexPath.row)
case 2:
self.SelectedDirection(index: indexPath.row)
default:
print("none")
}
}
複製程式碼六、設定CollectionView資料關係（是否關聯）
文初提到的關聯在這裡解釋一下。如下為三個CollectionView各自的點選函式，其中當點選第一個時，後面兩個都會重新整理；當點選第二個時候，第三個會重新整理。當然在我的Json資料中，第一個資料決定了後面兩個資料的範圍，第二個資料決定第三個資料的範圍，因此在此例中他們是關聯的。
具體的原因是，一個手機的機型決定了有幾個顏色和角度，一個手機的顏色有不同的角度，因此會這樣處理。如果在你使用的過程中，三個資料毫無關聯，大可不必這樣操作，只需要對應的CollectionView點選後執行指定的reloadData即可。
func SelectedPhone(index:Int){
self.DeviceIndex = index
self.ColorIndex = 0
self.DirectionIndex = 0
self.phoneCollectionView.reloadData()
self.colorCollectionView.reloadData()
self.directionCollectionView.reloadData()
delegate?.StanDeviceLoad(DeviceIndex: self.DeviceIndex, ColorIndex: self.ColorIndex, DirectionIndex: self.DirectionIndex)
}
func SelectedColor(index:Int){
self.ColorIndex = index
self.DirectionIndex = 0
self.colorCollectionView.reloadData()
self.directionCollectionView.reloadData()
delegate?.StanDeviceLoad(DeviceIndex: self.DeviceIndex, ColorIndex: self.ColorIndex, DirectionIndex: self.DirectionIndex)
}
func SelectedDirection(index:Int){
self.DirectionIndex = index
self.directionCollectionView.reloadData()
delegate?.StanDeviceLoad(DeviceIndex: self.DeviceIndex, ColorIndex: self.ColorIndex, DirectionIndex: self.DirectionIndex)
}
複製程式碼最後，我們還是看看效果：
GitHub：OneSwift - iOS Tips Based On Swift
微博：xDEHANG