今回の記事は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数は１つ
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関連記事を記載しているので気になる方は是非参考にしてみてください。
コメント