tableView Cellにボタンを追加したのですが、AutoLayoutがうまくできません

Question

swiftでアプリ開発をしています。
tableView Cellにボタンを追加したのですがAutoLayoutがうまくできません。
下図のように、設定ができません。
どうしたらAutoLayoutを使えるのでしょうか？

Comments

[TsukubaDepot]

tableView ではなくて TableView Cell だと思いますが、Style は Custom になっていますでしょうか。
Custom であれば、普通は問題なくボタンを配置できるはずです。
逆に、Custom以外だとConstraint をつけることができません（そもそも TableView Cell に載らない）

[Tommy2020]

ご回答ありがとうございます。
TableView Cell ですね。失礼しました。
Styleなのですが、Coustomにするとできました。
しかし、SubTitleで行いたいです。
Custom以外だとConstraint が付けられない、ということはSubTitleは無い方向で進めるしかないのでしょうか・・？

Answer 1

Custom 以外の、たとえば Subtitle なセルであっても、それに対応するカスタムクラスを作れば、あとからボタンなどを追加することは可能です。

ただ、そうなるとコードベースで UI 部品を追加することになるので、それに対する知識は必要となってきます。

たとえば、Subtitle を選び、カスタムセルにButtonTableViewCellというクラスを紐づけます。

ButtonTableViewCell は次のような感じにします。

import UIKit

class ButtonTableViewCell: UITableViewCell {
    @IBOutlet weak var title: UILabel!
    @IBOutlet weak var subTitle: UILabel!
    
    var indexPath: IndexPath?
    
    lazy var button: UIButton = {
        let b = UIButton(type: .system)
        b.setImage(UIImage(systemName: "pencil"), for: .normal)
        b.addTarget(self, action: #selector(buttonPushed), for: .touchUpInside)
        
        return b
    }()
    
    @objc func buttonPushed(_ sender: UIButton) {
        if let row = indexPath?.row {
            print("(row) 番目のセルが押された")
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        
        contentView.addSubview(button)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        button.translatesAutoresizingMaskIntoConstraints = false
        
        button.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -12).isActive = true
        button.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

Interface Builder (StoryBoard) で制約をつけられないので、コードで制約をつけています。
awakeFromNib() で contentView にボタンを追加し、layoutSubViews() で制約をつけます。
また、ボタンを押された時の処理も記述しておきます。

呼び出す方のコードは通常の TableView の処理とあまり変わりません。
今回の場合、セル内部に indexPath.row に相当する値を保存しておくので、それを代入する程度でしょうか。

import UIKit

class ViewController: UIViewController, UITableViewDataSource {
    @IBOutlet weak var tableView: UITableView!
    
    // ダミーデータ
    var cellTitle = [Int](100...110).map { String($0) }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    
        tableView.dataSource = self
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        cellTitle.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! ButtonTableViewCell
    
        cell.title.text = cellTitle[indexPath.row]
        cell.subTitle.text = cellTitle[indexPath.row] + "番目のセルです"
        cell.indexPath = indexPath
    
        return cell
    }
}

こうなってくると、すでに準備されているセルに新たに部品を追加するよりも、すべてカスタムセルとして作ってしまってもそれほど手間は変わらないことに気づかれると思います。

なので、Interface Builder で TableViewCell に手を加えるのであればカスタムで作り（あるいは xib ファイルを作り）、それを使うのが一番応用が効くように思えます。

Comments

[Tommy2020]

ご回答ありがとうございます。
上記のコード、やっと理解できました。
したいことができるようになりました。
感謝いたします。
また機会ありましたらよろしくお願いします。