collectionViewCellにチェックマークをつける

はじめに

今日できた実装の記録として書いているので説明はざっくりとしてます
これから少しずつ直したり，補足したりしていきます！
言語はSwiftで，Xcodeのバージョンは14.0.1です
collectionViewの実装ができていることを前提にして書いていきます〜

1. 新しくUICollectionViewCellがサブクラスのファイルをつくる

① 写真のようにフォルダマークの項目の上を指2本でクリック→New File(新規ファイル)をクリック

② 写真のとおりに選択してNext

③ 写真のとおりに設定してNext → その後表示されるウィンドウの右下のCreateクリック

2. CustomCellファイルに書き込む

「1. 新しくUICollectionViewCellがサブクラスのファイルをつくる」で作ったファイルにプログラムを書いていきます

準備： チェックマークの画像をネットで見つけて保存 → XcodeのAssetに入れる

画像の形を正方形にしておくこと！(あとでチェックマークの大きさを調整する時に楽)

① 以下のプログラムを書く

Swift

import UIKit

class CustomCell: UICollectionViewCell {
    let checkmarkImage: UIImage = UIImage(named: "check")!
    var checkmarkView: UIImageView!
    var isMarked: Bool = false {
        didSet {
            if isMarked {
                checkmarkView.frame = CGRectMake(-7,0,35,25) //チェックマークの設定
                self.contentView.addSubview(self.checkmarkView!)
            } else {
                self.checkmarkView?.removeFromSuperview()
            }
        }
    }
    func clearCheckmark() -> Void {
        self.isMarked = false
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.checkmarkView = UIImageView(image: self.checkmarkImage)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

• let checkmarkImage: UIImage = UIImage(named: "check")!の""内はXcodeに取り込んだ画像の名前です
• チェックマークの設定とコメントしている行でチェックマークを表示させる位置と大きさを設定します
  • CGRectMake(x座標, y座標, 横幅, 縦幅)だったはず

3. ViewControllerのファイル(collectionViewの宣言をしているファイル)にプログラムを書く

① クラスがUICollectionViewDelegateも継承するようにする

class MemoCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

みたいな感じ

② override func viewDidLoad(){}の{}の中に下4行のプログラムを書く

collectionView.register(CustomCell.self, forCellWithReuseIdentifier: "Cell")
collectionView.delegate = self
self.view.addSubview(collectionView)
self.collectionView.allowsMultipleSelection = true

③ override func viewDidLoad(){}の後ろに以下のプログラムを書く

// Cell がタップで選択されたときに呼ばれる
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        guard let cell: CustomCell = collectionView.cellForItem(at: indexPath) as? CustomCell else { return }
        if self.collectionView.allowsMultipleSelection {
            cell.isMarked = true
        }
    }
        
    // Cell がタップで選択解除されたときに呼ばれる
    func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
        guard let cell: CustomCell = collectionView.cellForItem(at: indexPath) as? CustomCell else { return }
        if self.collectionView.allowsMultipleSelection {
            cell.isMarked = false
        }
    }

おしまい！

完成イメージ

参考にしたサイト

おわりに

次はcollectionViewCellをスワイプすることでそのCell自体を削除する機能を作ろうと思ってます
最後まで読んでいただきありがとうございました！