转载

在同一个页面中添加多个CollectionView

OneSwift - iOS Tips Based On Swift

带壳截屏工具OneScreen跟最开始想的一样，确实不好上架，不过也不妨碍将其中使用到的技巧分享给大家。

在很多工具类应用中，特别是包含了多种属性设置的应用，例如视频编辑类、图片编辑类，一个页面通常承载了多个数据源及它的操作。

今天我为大家带来一个用CollectionView实现多个功能区设置的方式。每个CollectionView的数据可以相互关联，也可以不用相互关联，我今天举的例子中数据相互关联了，当然我会在后文指定的地方告诉大家改为不关联。

主要涵盖的内容是：

1.创建多个CollectionView

2.多个CollectionView加载不同的数据源

3.多个CollectionView各自的操作函数

4.多个CollectionView之间是否相互关联数据

一、创建CollectionView

在OneScreen的标准模式中，允许用户设置机型、颜色、角度三个属性，因此在这个例子中，我先在Main.stroyboard中创建了三个CollectionView。

在同一个页面中添加多个CollectionView

同时为了后续的加载数据，分别设置了他们的tag为0、1、2，其中按照顺序进行设置。

在同一个页面中添加多个CollectionView

二、基础绑定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)
}

最后，我们还是看看效果：

在同一个页面中添加多个CollectionView