search
LoginSignup
1

More than 1 year has passed since last update.

posted at

【Swift】1画面に2種類のCollectionViewを実装する方法

まずlazy varで2種類のCollectionViewを定義

    lazy var collectionView1 : UICollectionView = {

        let layout = UICollectionViewFlowLayout()
        let collectionView = UICollectionView(
            frame: self.view.bounds,
            collectionViewLayout: layout)

        collectionView.backgroundColor = UIColor.hex(string: "#eeeeee", alpha: 1)
        collectionView.delegate = self
        collectionView.dataSource = self

        collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "cellId")
        self.cellidentifier = "cellId1"

        return collectionView
    }()


    lazy var collectionView2 : UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        let collectionView = UICollectionView(
            frame: self.view.bounds,
            collectionViewLayout: layout)

        collectionView.backgroundColor = UIColor.hex(string: "#eeeeee", alpha: 1)
        collectionView.delegate = self
        collectionView.dataSource = self

        collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "cellId2")
        self.cellidentifier = "cellId2"

               return collectionView2
    }()

次にアイテムの個数や表示内容、タッチ時の処理collectionViewの設定を設定します。

 // 表示するアイテムの数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if collectionView == self.collectionView2 {
            //collectionView2で設定したいアイテム数
            self.array_count = array2.count
        }
        else{
            //collectionView1で設定したいアイテム数
            self.array_count = array1.count
        }
        return self.array_count
    }
    // アイテムの大きさ
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let size = self.view.frame.width / 3.5
        return CGSize(width: size, height: size)
    }
    // 上下左右の余白設定
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        let inset =  (self.view.frame.width / 4) / 8
        return UIEdgeInsets(top: inset, left: inset, bottom: inset, right: inset)
    }
    // 余白の最小値を設定
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return (self.view.frame.width / 4) / 6
    }
    // アイテムの表示内容(UICollectionViewDataSource が必要)
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        if collectionView == self.collectionView2 {
            let cellA = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId2", for: indexPath) as! CollectionViewCell
            cellA.backgroundColor = UIColor.lightGray
            let item = array1[indexPath.row]
            cellA.setUpContents(item)
            //他のファイルで設定したカスタムセルを呼び出す
            return cellA
        }

        else {
            let cellB = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId1", for: indexPath) as! CollectionViewCell
            cellB.backgroundColor = UIColor.lightGray
            let item = array2[indexPath.row]
            cellB.setUpContents(item)
            //他のファイルで設定したカスタムセルを呼び出す
            return cellB
        }
    }
    // タッチ時の処理
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        if collectionView == self.collectionView2 {
            //collectionView2で設定したいタッチ処理
            print("collectionView2 is tapped!")
        }
        else{
            //collectionView1で設定したいタッチ処理
            print("collectionView1 is tapped!")
        }
    }

関数内の処理をif文で分けるのがポイント
参考記事:How can I add multiple collection views in a UIViewController in Swift?

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1