UITableViewの高さを可変、UITableView内の画像の幅を固定、UITableView内の文字を折り返しにしたい。

Question

前提・実現したいこと

以前の質問で作成したUITableViewに以下の3つの機能を実装したいです。（※コード全容は記事下部にあります）
・UITableView内のテキストを折り返しにしたい。
・UITableViewの高さをテキストの多さによって可変
・UITableView内のImageViewの幅を固定してAspectFitにしたい
（※折り返しにして文字の高さによってUITableViewが可変になるが画像サイズはそのまま。というイメージ）

現状、ラベルは三点リーダで省略されてしまう。

発生している問題・エラーメッセージ

######問題点①TableView内のテキストを折り返ししようとすると、UIが崩れる

文字を折り返しをするために
こちらのサイトを参考に以下のコードを追加したところ

cell.textLabel?.numberOfLines=0

画像がどっかーんってなりました。

でも文字はちゃんと縦になっているので、
改行はされていると思われます。

######問題点②TableView内のimageViewが制御できない。

問題点①はおそらく
「UITableView内のImageViewの高さと幅が固定されていないからだな」
と思ったので、こちらのサイトを参考に以下のコードを「cellForRowAt indexPath」に追加

@IBOutlet weak var image: UIImageView!

--省略--

image.frame = CGRect(x: 0, y: 0, width: 50, height: 50)

すると以下のエラーコード

The image outlet from the ViewController to the UIImageView is invalid. Outlets cannot be connected to repeating content. [12]

和約：ViewControllerからUIImageViewへの画像アウトレットが無効です。 コンセントを繰り返しコンテンツに接続することはできません。 [12]

繰り返し…？
TableViewを繋げているから、
その中のImgeviewを繋げようとして怒られるのでしょうか…？

TableView内のImageViewをOutlet接続以外で制御する方法を知りたいです。

######問題点③セルの可変

こちらのサイトを参考に以下のコードを追加したいのですが、問題点①と②の影響で、正しいのかどうかを確認できず。

一旦これをなくしたら画像が大きくならないのかを確認してみようと思います。

commentTableView.estimatedRowHeight = 66
commentTableView.rowHeight = UITableViewAutomaticDimension

該当のソースコード

import UIKit

struct HogeItem: Decodable {
    let Name: String
    let Image: String
}

struct HogeSection: Decodable {
    let SectionName: String
    let Items: [HogeItem]
}

var _items: [HogeSection] = []

class ViewController: UIViewController,UITableViewDelegate, UITableViewDataSource {
       // MARK: - pattern②Plistあり
    @IBOutlet weak var commentTableView: UITableView!
    @IBOutlet weak var image: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let path = Bundle.main.path(forResource: "DisneyCharacterList", ofType:"plist" ) {
            let data = try! Data(contentsOf: URL(fileURLWithPath: path))
            _items = try! PropertyListDecoder().decode([HogeSection].self, from: data)
        }
        
        //高さを可変にする
        commentTableView.estimatedRowHeight = 66
        commentTableView.rowHeight = UITableView.automaticDimension
    }
    
    // 設定
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return _items.count
    }
    
    // 設定（行数）
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return _items[section].Items.count
    }
    
    //セクション数の設定
    func numberOfSections(in tableView: UITableView) -> Int {
        return _items.count
    }
    
    // 設定（セクションタイトル）
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return _items[section].SectionName
    }
    
    // 設定（セル）
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let item = _items[indexPath.section].Items[indexPath.row]
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "DisneyCell", for: indexPath as IndexPath)
        cell.textLabel?.numberOfLines=0
        cell.textLabel?.text = item.Name
        cell.imageView?.image = UIImage(named: item.Image)
        
        //セルのサイズを指定
        image.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
        return cell
    }
    
    //セルタップ時にセルの内容を取得する
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let item = _items[indexPath.section].Items[indexPath.row]
        
        print(item.Name)
    }
}

AssetCatalog

info.Plist

Answer 1

UITableViewCell の AutoLayout の制約の付け方だと思います。

width, height を 50pt に設定して，上下の制約を 12pt にしてみたら下記です。
(数字は前後させてください)
ポイントは bottom の制約を >= 12 にすることです。
一行の場合は画像の方のマージンにしたいからです。

ラベル側も考え方は同じで
上の制約をここでは画像の中央にするために 27pt 与えています。
こちらのポイントも bottom の制約を >= 12 にすることです。

ラベルの方が複数行になる場合，ラベルの高さが増えても
画像の下の制約が 12pt 以上を満たすため問題ないです。

セルの自動計算は上下の制約が破綻していなければ聞いてくれます。
問題点③は書いておいた方がいいかなと思います。

self.tableView.estimatedRowHeight = 74 // 数字は適当でもいい
self.tableView.rowHeight = UITableView.automaticDimension

サンプルコード書いたのでよかったら参考にしてください。

https://github.com/MilanistaDev/FlexibleCellSample

Comments

[Risney]

TakuyaAso様
ご回答ありがとうございます。
画像はサイズを指定することでサイズが爆発することはなくなりました！

Plist内の文字を改行したところ、
3行以下の場合は問題なく表示されましたが、
3行以上にすると3点リーダで省略されてしまいます。

現状、ラベルはStoryBoardに配置していないのですが、
ViewController内でラベルの高さを可変にできるのでしょうか？
（Labelを配置するとサブクラスを作成しないといけないので…）

[TakuyaAso]

AutoLayoutによる制約をコードで書けば可能だと思います。
セルのレイアウト想定図をみて
どのアイテムとどのアイテムの制約かを確認しながら
equalTo と greaterThanOrEqualTo を使ってセットすればわかりやすいかと思います。
参考
https://qiita.com/dddisk/items/8001598ea7951bcdcc30

[Risney]

気になって色々試していたら、ラベルも可変になっていることが判明しました。
画像を縦40×横40サイズだと2行になり、縦80×横80サイズにすると4文字表示される。
というようにラベル自体は可変になっておりました。
これもやはりAutoLayoutの制約で解決するのでしょうか？

また、AutoLayoutの制約方法ですが、
Viewの場合は以下の方法で可能ですが、
今回のようなtextの場合はviewと同じ方法（以下のような制約方法）でできるのでしょうか…
色々試してみたのですが出来ずでした…

let redView = UIView()
redView.backgroundColor = UIColor.red
redView.frame = view.frame
redView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(redView)

redView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
---以下略---