TableView_Dynamic_2

Created with Sketch.

TableView_Dynamic_2

こんにちはEverDaySoft代表の永田です。

今回はTableViewの背景色を文字数と同じ横幅、縦幅に合わせるという、テクニックを紹介します。

SwiftUIで実装する場合は特別な事をしなくても対応出来るので、今回はUIkitバージョンを紹介します。

縦幅の動的可変は最近のTableViewは自動で実施してくれます。

オートレイアウトで縦のデザインと横のデザインを合わせています。

Align Center X toを決定。

ポイントは、
Align Center X toを >=-375(-デバイス横幅)にします。Width>=0にします。

Align Center X toとWidthが横幅を計算し、オートレイアウトをして正しい文字幅を決定します。Widthは文字幅に応じて、サイズが伸びます。Widthの数値が増えると、Align Center X toの制約数が-375(デバイス横幅)から0に近づきます。0の状態はデバイスの横幅と同じになります。

Align Center X toを設定しないとWidthの横幅がデバイスピッタリまで伸びません。理由は、はっきりわからないですが、

Trailing ≥ Back Label.trailingは横幅までの余白部分ですが、右側の制約、Trailing ≥ Back Label.trailingを>=0にすると背景Labelの横幅がデバイスの横幅までピッタリ伸びませんでした。

成功パターン

https://github.com/daisukenagata/TableView
Xcode12.2、Swift5.3.1の今現在最新のソースコードです。

SwiftUIとUIkit両方できますが、今回はUIkitでの対応情報がないパターンでしたので、作成し、紹介させて頂きました。

以上、貴重なお時間お読み下さいまして、誠にありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です