UITableViewでチェックリストを作成する

Question

UITableViewでチェックリストを作ってみたのですが、現在Cellを押すとチェックリストのUIImageが変更されます。Cellを押すと別のUITableViewに移動でき、UIImageを押下時にのみ画像が変更されるようにするにするにはどうすればいいでしょうか？

 
class ViewController : UIViewController, UITableViewDelegate, UITableViewDataSource {
     
    let statusBarHeight = UIApplication.shared.statusBarFrame.height
 
    var checkListItem: [String : Bool] = [
        "アイテム1" : false,
        "アイテム2" : false,
    ]
     
    let tableView = UITableView()
     
    override func viewDidLoad() {
        super.viewDidLoad()
     
        // UITableView の作成
        tableView.frame = CGRect(
            x: 0,
            y: statusBarHeight,
            width: self.view.frame.width,
            height: self.view.frame.height - statusBarHeight
        )
        tableView.delegate = self
        tableView.dataSource = self
        self.view.addSubview(tableView)
    }
     
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
         
        var keys = [String](checkListItem.keys)
         
        keys.sort()
         
        let cellText = keys[indexPath.row]
         
        let cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
        cell.textLabel?.text = cellText
         
        if self.checkListItem[cellText]! {
            cell.imageView?.image = UIImage(named: "checked")
        } else {
            cell.imageView?.image = UIImage(named: "unchecked")
        }
         
        return cell
    }
 
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
         
        if let cell = tableView.cellForRow(at: indexPath) {
             
            let cellText = cell.textLabel?.text
             
            if cell.imageView?.image == UIImage(named: "checked") {
                 
                self.checkListItem.updateValue(false, forKey: cellText!)
                cell.imageView?.image = UIImage(named: "unchecked")
            } else {
 
                self.checkListItem.updateValue(true, forKey: cellText!)
                cell.imageView?.image = UIImage(named: "checked")
            }
             
            cell.isSelected = false
        }
    }
     
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 56
    }
     
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.checkListItem.count
    }
}

Comments

[fuzzball]

タイトルと質問内容があっていないような気がするのですが？

Answer 1

セルをカスタムして UIButtonを乗せて通常、選択時の画像を設定、押された時に画像を切り替えるのが簡単では無いでしょうか。

@IBAction func pushButton(_ sender: UIButton) {
    sender.isSelected = !sender.isSelected
}

Comments

[taiki9696]

チェックリストを含むUITableViewですが実は80ページほど作成する必要があります。やはりカスタムセルでは厳しいでしょうか？

[_Kentarou]

同じデザインのViewならば何ページあっても作成するのは1つなのでなんの問題もないと思いますが。

[taiki9696]

カスタムセルの場合ですとMainstoryboardに80個のUITableViewを作成する必要があると認識しているのですが、一つのカスタムセルをMainstoryboardで作成すると同じデザインであればコードのみで複製が作れるのでしょうか？
各UITableViewによってセルやUIButtonの数、textの中身など微妙に異なるものを考えております。

[_Kentarou]

> Mainstoryboardに80個のUITableViewを作成する必要があると認識しているのですが

Storyboardは分割できますので一つのStoryboardに80個は配置する必要がないと思います。
それに80個つくらなくてもUITableViewを使いまわせると思いますがいかがでしょう？

カスタムセルはxibで作成して読み込む様にすれば良いと思います。（コードで複製ができるというのと同じです。）

> 各UITableViewによってセルやUIButtonの数、textの中身など微妙に異なるものを考えております。

微妙に違うくらいでしたら、まとめてもよいと思います。
こちらもデザイン的に違うセルが10個とかある感じですか？そのくらいなら普通に作ってもよいと思いますが。

[taiki9696]

なるほど、カスタムセルをxibで作成して読み込むという方法があるのですね。丁寧な回答ありがとうございます。

Answer 2

まあカスタムセルでごり押しすると慣れない間は面倒なこともありますけどね。

＜注意点＞
・UIButtonを乗せることでcellのtextLabelとの位置関係もずれたりするので場合によっては全部自分で作ることになる可能性がある。
・セルの上に乗せた際にその上をタップしてもdidSelectRowが呼ばれない

あたりですかね
この場合、少なくとも、cell.textLabelのtextAlignmentはcenterかrightに設定する必要があると思います。(ボタンで隠れるので)

Answer 3

UIImageViewにUITapGestureRecognizerを乗せて下さい。
なお、UIImageViewは、デフォルトではタップに反応しませんので、userInteractionEnabledをtrueにして下さい。

Answer 4

それはつまり、画像の部分とその他の部分を押された時に判別したいというかことですよね？であるとすると、カスタムセルを作り、その上にボタンを乗せ、ボタンにsetImageする形になると思います。
カスタムセルでどのセルがタップされたのかを判別するには
カスタムセルの基本
を参考にして下さい。