TableViewCellの高さを自動調節したい(時刻表を作ろうとしています)

Question

###前提・実現したいこと
私はiOSアプリ開発初めて一か月で、プログラミング経験も浅い状態です。
現在私は時刻表を作ろうとしています。
そのためTableViewCellの上にLabelを3つ配置させて、それぞれのLabelに時間帯や分刻みの時刻を振り分けようとしています。

イメージはこのような形です。
https://hajihaji-lemon.com/smartphone/swift/table-view-cell/

分刻みの時刻の値の数が多いため、Label内で改行できて
Labelの高さに合わせてTableViewCellの高さを自動調節できるようにしたいです。

###発生している問題
Label内での改行は可能になったのですが、Labelの高さに合わせてTableViewCellの高さを自動調節できません。
Labelの高さに合わせてTableViewCellの高さを自動調節できる様にするにはどの様にすればよいでしょうか

![
###該当のソースコード

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    var dataList = ["時,平日,土日祝日","6,1,1","7,1,1","8,1,1","9,1,1","10,1,1","11,1,1","12,1,1","13,1,1","14,1,1","15,1,1","16,1,1","17,1 2 3 4 5 6 7 8 9 10 11 12 13 14,1","18,1,1","19,1,1","20,1,1","21,1,1","22,1,1","23,1,1"]
  
    
    @IBOutlet weak var TableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        TableView.estimatedRowHeight = 5 //ここでCellの高さ自動調節を命じています
        TableView.rowHeight = UITableView.automaticDimension
    }
    
    
    func tableView(_ tableView:UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
           
      
        let cell = tableView.dequeueReusableCell(withIdentifier: "TimeCell", for: indexPath)
    
           
           let label1 = cell.viewWithTag(1) as! UILabel
           let label2 = cell.viewWithTag(2) as! UILabel
           let label3 = cell.viewWithTag(3) as! UILabel
           
           
           let arr = dataList[indexPath.row].components(separatedBy: ",")
           
           
           label1.text = arr[0]
           label2.text = arr[1]
           label3.text = arr[2]
        
        label2.numberOfLines = 0
        label2.sizeToFit()  //ここで改行を命じてします
           return cell
       }
    func tableView(_ tableView:UITableView, numberOfRowsInSection section:Int) -> Int {
        return dataList.count
    }
}

Answer 1

Labelの高さに合わせてTableViewCellの高さを自動調節するには、CellのサイズをLabelのサイズに合わせるようにAutoLayoutを設定する必要があります。

(参考)
https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithSelf-SizingTableViewCells.html

https://qiita.com/ytakzk/items/d7bb8182d43cdfc9b580

質問する際は、teratailの使い方をよく読んで、リンクやコードの部分はMarkdown記法で正しく整形して質問していただけると、質問を読む側は読みやすいです。

(参考)
https://teratail.com/help/question-tips#questionTips3-7

https://teratail.com/help#about-markdown

Comments

[tsuyoshi0126]

回答ありがとうございます。

質問する際は、teratailの使い方をよく読んで、リンクやコードの部分はMarkdown記法で正しく整形して質問していただけると、質問を読む側は読みやすいです。
→ご指導ありがとうございます。今後気を付けさせて頂きます。

Labelの高さに合わせてTableViewCellの高さを自動調節するには、CellのサイズをLabelのサイズに合わせるようにAutoLayoutを設定する必要があります。
→
こちらを実行するために
TableView.estimatedRowHeight = 5
TableView.rowHeight = UITableView.automaticDimension
を定義しました。

またリンク先に書かれていた

To define the cell’s height, you need an unbroken chain of constraints and views (with defined heights) to fill the area between the content view’s top edge and its bottom edge.

を実行するためにLabelのAdd New Constraintでcontent viewからの上下の距離を0にしたのですが、LabelがCellの左端に配置されてうまく改行、表示ができません。

AutoLayout設定がうまくできていないようなのですが、ご指導いただけますでしょうか。

[TakeOne]

上下の距離を0にして縦方向の制約を設定するだけでなく、横方向の制約も設定してLabelの横方向の表示位置を確定させていますか? 横方向の制約もちゃんと設定してLabelの表示位置が確定されるように(AutoLayoutのエラーが出ないように)しないと、そのLabelに対する制約は、縦方向の制約含めて無効になってしまうと思います。

[tsuyoshi0126]

回答ありがとうございます。
横の制約も付け、TableViewCellの上の3つのLabelに制約をかけたところ問題解決しました。
ありがとうございました。