UITableView 内の UILabel を複数行に対応させる方法

• 概要
• 環境
• ラベルの高さを調整する
• 行数を 0 にする
• 同一セル内にある他のコンポーネントの高さを調整する
• 動作確認
• UITableViewAutomaticDimension は Storyboard を使っている場合はいらない
• 最後に

概要

UIViewController を使って UITableView を管理している場合に UILabel を複数行で表示させたい場合があると思います
UILabel だけであればそこまで大変ではないのですが他のコンポーネントも同じセル内にある場合は少し考えることが増えます
今回はセル内に UILabel と UISwitch がある場合にラベルの表示を複数行に対応させる方法を紹介します

環境

• macOS 10.15.1
• Xcode 11.2.1 (11B500)

ラベルの高さを調整する

まずはセル内にある UILabel の高さを調整します
ポイントは Constraints の高さの条件を「Greater Than or Equal」にする点です
セルの最低の高さを指定することで逆にどこまで高さを許容することで複数行に対応します

ちなみにセルの高さは指定せず Automatic にチェックを入れておきます

行数を 0 にする

次に UILabel の Lines を「0」にします
こうすることで行数を指定せず何行でも表示することができます

同一セル内にある他のコンポーネントの高さを調整する

今回は同一セル内に UISwitch があります
セル内に UILabel しかない場合は上記で OK ですが他の UI コンポーネントがある場合はそれも考慮する必要があります

ポイントは高さの Constraints を指定しないことです
例えば上下のマージンなどを指定するとそのマージン以上は大きくならないのでなるべく指定しないようにします
今回であれば Vertical の Constraints を「Align Center Y」にすることでセルの高さに依存しないようにしています

動作確認

これで起動するとちゃんと複数行表示されていることがわかります
要するにセルとその中にある UI コンポーネントの高さを決定するような Constraints や設定を入れないのがポイントです

UITableViewAutomaticDimension は Storyboard を使っている場合はいらない

よく調べると UITableViewAutomaticDimension を設定するという記事を見かけますが Storyboard 上でしっかり設定できていればコード上での設定は不要です

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = cellHeight

不要なコードですが入れたい場合は入れても問題ないです

最後に

UITableView 内で使用する UILabel を複数行で表示する方法を紹介しました
ポイントはセルの高さを決めるような Constraints や設定を入れない点です
セルの高さはセル内に存在するすべてのコンポーネントから影響を受けるのでうまくいかない場合は高さを決め打ちしているようなコンポーネントがないか確認してみましょう