こんにちは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での対応情報がないパターンでしたので、作成し、紹介させて頂きました。
以上、貴重なお時間お読み下さいまして、誠にありがとうございます。