UITableViewCellの高さをネットワークから取得した画像に合わせて動的に変更する

Kenji Abe
3 min readJan 17, 2018

--

実行例として下のように右寄せでチャット系の画像っぽい感じです。
(だいぶ雑)

ViewController.swift

普通の設定です。

rowHeight には UITableViewAutomaticDimension を設定して自動で高さを計算するようにしています。

CustomCell.xib

Cellのレイアウトです。適当に右寄せで画像を表示してAutoLayoutを設定します。UIImageViewのContentModeは AspectFit にしてあります。

AutoLayoutは左側を >= で設定して、あとは、 Aspect Ratio を設定してます。この比率の制約はIBOutletとしてコードから使用します。その他は普通にマージンを設定しています。

CustomCell.swift

Cellのコードです。IBOutletでUIImageViewと比率の制約を関連付けます。

画像ライブラリにはNukeを使ってますが、他のライブラリでも似たような感じになるかと思います。

ここでは画像キャッシュが無い時は画像の取得を行い、 tableView.reloadRows を呼んでリロードをかけて、次に呼びされた時はキャッシュがあるので、そこで画像の設定と制約を更新しています。

制約の更新ですが、比率はmultiplierで設定しますが、extensionで定義してます。(後述)

NSLayoutConstraintExtension.swift

multiplierは更新することが出来ず、新しく作る必要があります。extensionとして定義しました。

まとめ

画像を取得後になんとかして高さを変えようとして必死にやってたのですが、キャッシュさせてリロードさせるのを見かけて、なるほどーってなりました。

ググり方が悪いのか載ってるやり方をやってもうまく行かず、本当に挫けそうでした。

AutoLayoutもそうですが、このあたりまったく改善されませんね…
もう2018年ですよ?

参考

--

--

Kenji Abe

Programmer / Gamer / Google Developers Expert for Android, Kotlin / @STAR_ZERO