【Swift】CollectionViewのどのCellをクリックしたかを取得する方法。〜 Xcode設定とSwiftコード〜

Swift

2021.04.11

今回の記事は「CollectionViewのどのCellをクリックしたかを取得する方法をご紹介します。結論から言うとCollectionViewのdelegateにどのCellをクリックしたかを判別するものがあるので非常に楽にどのCellをクリックしたかを取得することができます。

CollectionViewとCellの設定
CollectionViewのクリック判定取得コード

CollectionViewとCellの設定

まずいつも通りにXcodeのプロジェクトを作成します。特に変わったことはありません。
storyboardにCollectionViewをセットして前面にべったりくっつく様に余白を全て０にして配置。

この上にある小さい四角形がCellにあたります。このCellをクリックしてインスペクションのidentiferを「Cell」と設定します。

別に分ける必要はないかもですがCollection Viewには設定がもう1つあります。
CollectionViewの空白のところから「control」+ 「ドッラグ」でstoryboard上部の丸い印に持っていくと上記の写真の様に選択肢が出てきます。
dataSourceとdelegateをクリックします。一度クリックするとこの表示が消えるので二つにチェックをつけるために2度操作してください。
これでOKです。あとはコード側で操作していきます。

CollectionViewのクリック判定取得コード

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource  {
    
    var myCollectionView : UICollectionView!
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath as IndexPath) 
        cell.backgroundColor = UIColor.white
     
        return cell
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 50, height: 50)
        layout.sectionInset = UIEdgeInsets(top: 16, left: 16, bottom: 32, right: 16)//マージン
        layout.headerReferenceSize = CGSize(width: 100, height: 30)
        myCollectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
        myCollectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
            
        myCollectionView.delegate = self
        myCollectionView.dataSource = self
        self.view.addSubview(myCollectionView)
        // Do any additional setup after loading the view.
    }
    //Cellがクリックされた時によばれます
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
           print("選択しました: \(indexPath.row)")
    }
       //Cellの合計数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
           return 25
    }

}

こちらのコードは特にstoryboardと紐付ける必要もないので（おそらく先ほどのdataSource、delegateで設定されている？ため）このままbuildして見て下さい。

右の様にエミュレータに表示されているはず。
Cellをクリックすると写真のコンソール部分に表示ある様にクリックされたIndexpathを教えてくれます。