在同一个页面中添加多个CollectionView
带壳截屏工具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