LoginSignup
0
1

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

Last updated at Posted at 2021-03-01

まず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?

Swiftのお役立ち情報

0
1
0

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
  3. You can use dark theme
What you can do with signing up
0
1