もちゅろぐ
iOS
UITableView
【初心者向け】UITableViewでボタンやテキスト入力の使い方や注意事項

【初心者向け】UITableViewでボタンやテキスト入力の使い方や注意事項

2019-9-29

Table of Contents

サンプル
タップの反応が遅い
セルのタップが反応してしまう
セルの状態が消える

UITableViewのセル(UITableViewCell)にButtonやTextFieldをセットした場合の注意点についてまとめました。

サンプル

検証コードになります。
セルにUIButtonとUITextFieldを配置しています。

class ViewController: UIViewController {
    @IBOutlet private weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 15
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableCell", for: indexPath)
        if let c = cell as? TableCell {
            c.setup(buttonTitle: "ボタン", valueText: "でふぉると") { (button, tf) in
                button.setTitle("ぼたん", for: .normal)
                tf.text = ""
            }
        }
        return cell
    }
}

class TableCell: UITableViewCell {
    @IBOutlet private weak var button: UIButton!
    @IBOutlet private weak var textField: UITextField!

    typealias Handler = (UIButton, UITextField) -> Void

    private var handler: Handler?

    @IBAction func onTouchedButton(_ sender: Any) {
        handler?(button, textField)
    }

    func setup(buttonTitle: String, valueText: String, tapHandler: @escaping Handler) {
        button.setTitle(buttonTitle, for: .normal)
        textField.text = valueText
        handler = tapHandler
    }
}

Interface Builderは次のようなレイアウトです。

セルのカスタマイズについて分からない場合はこちらの記事をどうぞ。

【初心者向け】UITableViewCellをカスタマイズする

簡単なユーザー情報を表示するテーブルを題材に話を進めます。

タップの反応が遅い

セル上にボタンがあると、タップしてから遅延があります。
これをなくすには、

tableView.delaysContentTouches = false

を設定することで遅延がなくなります。

セルのタップが反応してしまう

次のようにセルをタップできてしまい、タップしたらハイライトがついてしまいます。セル上のボタンは動いて欲しいが、セルには反応してほしくないと思います。その場合は、セルのタップを無効化にします。

UITableViewDelegate の tableView(_:shouldHighlightRowAt:) -> Boolをfalseを返すとハイライトにならず、タップが無効になります。

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.delegate = self
    // ...
}
extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, shouldHighlightRowAt indexPath: IndexPath) -> Bool {
        return false
    }
}