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

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

2020/12/24 13:58

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

Tommy2020

2020/12/24 14:21

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

Swift
1import UIKit
2
3class ButtonTableViewCell: UITableViewCell {
4    @IBOutlet weak var title: UILabel!
5    @IBOutlet weak var subTitle: UILabel!
6    
7    var indexPath: IndexPath?
8    
9    lazy var button: UIButton = {
10        let b = UIButton(type: .system)
11        b.setImage(UIImage(systemName: "pencil"), for: .normal)
12        b.addTarget(self, action: #selector(buttonPushed), for: .touchUpInside)
13        
14        return b
15    }()
16    
17    @objc func buttonPushed(_ sender: UIButton) {
18        if let row = indexPath?.row {
19            print("(row) 番目のセルが押された")
20        }
21    }
22    
23    override func awakeFromNib() {
24        super.awakeFromNib()
25        // Initialization code
26        
27        contentView.addSubview(button)
28    }
29    
30    override func layoutSubviews() {
31        super.layoutSubviews()
32        
33        button.translatesAutoresizingMaskIntoConstraints = false
34        
35        button.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -12).isActive = true
36        button.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
37    }
38
39    override func setSelected(_ selected: Bool, animated: Bool) {
40        super.setSelected(selected, animated: animated)
41
42        // Configure the view for the selected state
43    }
44
45}

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

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

Swift
1import UIKit
2
3class ViewController: UIViewController, UITableViewDataSource {
4    @IBOutlet weak var tableView: UITableView!
5    
6    // ダミーデータ
7    var cellTitle = [Int](100...110).map { String($0) }
8    
9    override func viewDidLoad() {
10        super.viewDidLoad()
11        // Do any additional setup after loading the view.
12    
13        tableView.dataSource = self
14    }
15    
16    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
17        cellTitle.count
18    }
19    
20    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
21        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! ButtonTableViewCell
22    
23        cell.title.text = cellTitle[indexPath.row]
24        cell.subTitle.text = cellTitle[indexPath.row] + "番目のセルです"
25        cell.indexPath = indexPath
26    
27        return cell
28    }
29}