tableViewCellの中に配置したUIButtonをラジオボタンのようにしたい

Question

tableViewCellのなかにUIButtonを配置しています。
そのボタンをラジオボタンのような機能にしたいです。
１、押されたらボタンの色が変化する（実装済み）
２、一つしか選択できない。（すでに他のボタンが押されていたら押されていた方のボタンの色が元に戻る）
この2番ができなくて詰まっております。
押されたボタンの色が変化するまでのコードは下記の通りです。

import UIKit


class SettingViewController: UIViewController,UITableViewDelegate,UITableViewDataSource,UITextFieldDelegate{
    
    
    
    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var plusButton: UIButton!
    @IBOutlet weak var saveCheck: UILabel!
    @IBOutlet weak var doneButton: UIButton!
    @IBOutlet weak var rouletteTitle: UITextField!
    @IBOutlet weak var checkBox: UIButton!
    
    var cell = TableViewCell()
    
    var cellCount = 0
    var checkCount = 0
    
    let colorArray: [UIColor] =
        [UIColor(red: 255/255, green: 255/255, blue: 0/255, alpha: 1.0),UIColor(red: 255/255, green: 190/255, blue: 0/255, alpha: 1.0),UIColor(red: 255/255, green: 35/255, blue: 0/255, alpha: 1.0),UIColor(red: 255/255, green: 0/255, blue: 255/255, alpha: 1.0), UIColor(red: 200/255, green: 70/255, blue: 255/255, alpha: 1.0),UIColor(red: 30/255, green: 120/255, blue: 255/255, alpha: 1.0),UIColor(red: 80/255, green: 220/255, blue: 255/255, alpha: 1.0),UIColor(red: 0/255, green: 255/255, blue: 0/255, alpha: 1.0),UIColor(red: 40/255, green: 40/255, blue: 190/255, alpha: 1.0),UIColor(red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0)]
    
    override func viewDidLoad() {
        super.viewDidLoad()

       tableView.delegate = self
       tableView.dataSource = self
       rouletteTitle.delegate = self
        
        tableView.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "cellSample")
        tableView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height - (plusButton.frame.size.height + saveCheck.frame.size.height + doneButton.frame.size.height))
        tableView.separatorStyle = .singleLine
        tableView.allowsSelection = false
        
        
        
    }
        

    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        navigationController?.isNavigationBarHidden = false
        
    }
    
    
    //セルの数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        return cellCount
        
    }
    
    //セクションの数
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    
    //セルの構築
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        cell = tableView.dequeueReusableCell(withIdentifier: "cellSample") as! TableViewCell
        //セル上のボタン（色）
        
        cell.colorButton.tag = indexPath.row
        cell.colorButton.addTarget(self, action: #selector(pushButton(_:)), for: .touchUpInside)
        if indexPath.row % 10 == 0{
            cell.colorButton.backgroundColor = colorArray[0]
        }else if indexPath.row % 10 == 1{
            cell.colorButton.backgroundColor = colorArray[1]
        }else if indexPath.row % 10 == 2{
            cell.colorButton.backgroundColor = colorArray[2]
        }else if indexPath.row % 10 == 3{
            cell.colorButton.backgroundColor = colorArray[3]
        }else if indexPath.row % 10 == 4{
            cell.colorButton.backgroundColor = colorArray[4]
        }else if indexPath.row % 10 == 5{
            cell.colorButton.backgroundColor = colorArray[5]
        }else if indexPath.row % 10 == 6{
            cell.colorButton.backgroundColor = colorArray[6]
        }else if indexPath.row % 10 == 7{
            cell.colorButton.backgroundColor = colorArray[7]
        }else if indexPath.row % 10 == 8{
            cell.colorButton.backgroundColor = colorArray[8]
        }else if indexPath.row % 10 == 9{
            cell.colorButton.backgroundColor = colorArray[9]
        }
        
        
        
       //セル上のテキストフィールド（タイトル）
        cell.itemTitle.placeholder = "項目タイトル"
        cell.itemTitle.textAlignment = .center
        
        
        //セル上のテキストフィールド（比率）
        cell.raitoInit.text = "1"
        cell.raitoInit.textAlignment = .center
        cell.raitoInit.keyboardType = UIKeyboardType.numberPad
        cell.raitoLabel.text = "比率"
        
        
        return cell
        
    }
    
    //セルの高さ
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        
        return view.frame.size.height/10
        
    }
    
    //colorButtonを押したとき
    @objc private func pushButton(_ sender: UIButton) {

        let row = sender.tag
        
        //押したボタンの色を切り替える
        if row % 10 == 0{
            sender.backgroundColor = colorArray[0].withAlphaComponent(0.6)
        }else if row % 10 == 1{
            sender.backgroundColor = colorArray[1].withAlphaComponent(0.6)
        }else if row % 10 == 2{
            sender.backgroundColor = colorArray[2].withAlphaComponent(0.6)
        }else if row % 10 == 3{
            sender.backgroundColor = colorArray[3].withAlphaComponent(0.6)
        }else if row % 10 == 4{
            sender.backgroundColor = colorArray[4].withAlphaComponent(0.6)
        }else if row % 10 == 5{
            sender.backgroundColor = colorArray[5].withAlphaComponent(0.6)
        }else if row % 10 == 6{
            sender.backgroundColor = colorArray[6].withAlphaComponent(0.6)
        }else if row % 10 == 7{
            sender.backgroundColor = colorArray[7].withAlphaComponent(0.6)
        }else if row % 10 == 8{
            sender.backgroundColor = colorArray[8].withAlphaComponent(0.6)
        }else if row % 10 == 9{
            sender.backgroundColor = colorArray[9].withAlphaComponent(0.6)
        }
        
        
    }
    
    //すでに色が薄くなっているものを戻す
    func backColor(){
        
        
        
    }
    
    
    //項目を追加ボタン
    @IBAction func cellPlus(_ sender: Any) {
        
        cellCount += 1
        
        tableView.reloadData()
        
    }

参考サイト
このサイトを見他のですがやはり他のボタンが押されたときに元々選択されていたボタンを元に戻すやり方がいまいち理解できません。このサイトではfor文が使われているのですがこのfor文も理解できてるようなできていないような感じです。
何かアドバイスくださると嬉しいです。
よろしくお願い致します。

Comments

[hoshi-takanori]

参考サイトでは TableView は使われてませんが、TableView の場合はやり方が変わります。
というか、TableView の使い方は理解されてますでしょうか？

[kai]

確かにそうですね！
tableViewの使い方は理解しきれてないと思います。。

Answer 1

参考サイトでは、ラジオボタンとして使われてるボタンたちは普通に配置されているので、常に存在しますが、TableView のセルは画面に表示されてない部分は存在しません。（というか、スクロール時に使いまわされます。）
なので、データソース（SettingViewController）の中でセルに表示するために必要な情報を持って、必要に応じて tableView(_:, cellForRowAt:) の中で設定してやる必要がありますが、今回必要な情報はどのボタンが押されてるかだけなので、まずその変数を checkCount の下あたりに用意します。

    var cellCount = 0
    var checkCount = 0

    // 押されたボタンの番号、押されてない時は -1
    var pushedRow = -1

次にセルの構築ですが、押されたボタンがスクロールなどで再表示される場合があるので、押された場合とそうでない場合と両方に対応するように書く必要があります。
ちなみに、そこにあった if 〜 else if 〜 の羅列は実は 1 行で書けます。

    //セルの構築
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        cell = tableView.dequeueReusableCell(withIdentifier: "cellSample") as! TableViewCell
        //セル上のボタン（色）

        cell.colorButton.tag = indexPath.row
        cell.colorButton.addTarget(self, action: #selector(pushButton(_:)), for: .touchUpInside)
        // ここにあった if 〜 else if 〜 を次のコードで置き換える
        let color = colorArray[indexPath.row % 10];
        if indexPath.row == pushedRow {
            cell.colorButton.backgroundColor = color.withAlphaComponent(0.6)
        } else {
            cell.colorButton.backgroundColor = color
        }

        // 略
    }

最後にボタンを押した時の処理ですが、押されたボタンの番号を変数にセットしたら、あとはテーブル全体を再描画するだけです。

    //colorButtonを押したとき
    @objc private func pushButton(_ sender: UIButton) {

        pushedRow = sender.tag

        tableView.reloadData()

    }

試してませんが、たぶんこれでいけるはず。

Comments

[kai]

すごく丁寧にありがとうございます！
早速試してみます！

[kai]

完璧にいけました！
ありがとうございました！