スポンサーリンク

【Swift】CollectionView上のどの画像をclickしたかを取得する方法。

Swift
スポンサーリンク

今回の記事はCollectionViewのCellにImageViewを配置して画像を表示させた後、どの画像をクリックしたかに関しての補足記事になります。本記事では、以前の記事を参考にしている箇所が多いのでリンク記事を並行して確認していただければ幸いです。

では早速メインの記事に進みます。

スポンサーリンク

CollectionViewに画像の表示方法

画像の表示に関してはそこまで難しい話ではないので以前の記事をご参照ください。

【Swift】CollectionViewでインスタのように画像を表示させる方法

CollectionViewの画像クリックの判定方法

画像クリックに関しても私の下記記事に参考記事があるのでそちらのリンクから確認ください。

【Swift】CollectionViewのクリックを取得する方法

CollectionViewのどのimageをクリックしたか取得

上記で設定したCollectionViewのCellクリックを取得できるdelegateとプロトコル関数で下記のようなコードを書くことでCollectionViewのどのImageを取得したかを判定することができます。

このCellのIndexPath情報をどこかに保存できれば何をクリクしたかわかると考えられます。

そこで今回利用するのが配列です。配列のintやstringにクリックしたIndexpathに紐ずく情報を格納させておけば特に問題なく使用できると思います。

そこで下記の様なコードを作成しました。

全て、ViewController内に格納しております。


import UIKit
var select_photos:[String] = []



class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource  {
    
    var myCollectionView : UICollectionView!
    let photos = ["bachikan","fororomano","korosseo","nabonahiroba","panteon","pintyonooka","santanzyero","shinzitunokuchi","supeinhiroba","torebi"]
    
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath as IndexPath)
        
        let imageView = cell.contentView.viewWithTag(1) as! UIImageView
        
        // 画像配列の番号で指定された要素の名前の画像をUIImageとする
        let cellImage = UIImage(named: photos[indexPath.row])
        // UIImageをUIImageViewのimageとして設定
        imageView.image = cellImage

        cell.backgroundColor = UIColor.white
     
        return cell
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    
    }
    //Cellがクリックされた時によばれます
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        
        
        if select_photos.firstIndex(of: photos[indexPath.row]) != nil {
            print("選択済み")
            select_photos.remove(at: select_photos.firstIndex(of: photos[indexPath.row])!)
            
        } else {
            select_photos.append(photos[indexPath.row])
        }
        print(indexPath.row)
                  
    }
    
       //Cellの合計数
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        // section数は1つ
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int {
        // 要素数を入れる、要素以上の数字を入れると表示でエラーとなる
        return photos.count
    }
    
    @IBAction func make_modelcourse(_ sender: Any) {
        
        print(select_photos)
        
        //didSelectItemAt indexPath: IndexPath
        
    }
    

}

CollectionViewのCell内に配置したimage view(配置されているのはCell上なのでほぼCellとして扱っている)を一度クリックされた際にselect_photosに IndexPathに紐ずく画像の名前を取得して配列に格納しております。2度目のクリックでは配列何すでにクリックされた画像の名前が入っている様なら作事するコードになっております。
3度目のクリックは1度目のクリックの繰り返しみたいな感じで配列に履いているか入っていないかのTrueとfalseみたいな感じと考えれば良いです。

他にももっと簡単なSelect判定があると思いますがひとまずはこれで可能です。

では今回の記事は以上になります。他にも多数のSwift関連記事を記載しているので気になる方は是非参考にしてみてください。

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

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

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

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

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

Swift
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

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