スポンサーリンク

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

Swift
スポンサーリンク

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

スポンサーリンク

CollectionViewとCellの設定

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

この上にある小さい四角形が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を教えてくれます。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Swift
スポンサーリンク
スポンサーリンク

コメント

  1. […] 【Swift】CollectionViewCellをクリックしたかの判定を行う方法。 […]

タイトルとURLをコピーしました