在同一个页面中添加多个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,其中按照顺序进行设置。

设置tag值

二、基础绑定CollectionView

来到三个CollectionView所在的DeviceViewController.swiftDeviceViewControllerViewCell.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显示和加载不同的数据,因为代码太长,这里我就做一部分出来,供大家参考。 同样利用了CollectionViewtag值,分别返回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.SelectedPhoneSelectedColorSelectedDirection里面。

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演示

GitHub:OneSwift - iOS Tips Based On Swift

微博:xDEHANG