UILabelを複数行表示をプログラミングで行う方法と、Interface Builder + Auto Layoutで行う方法を説明します。

UILabelの複数行表示をプログラムで行う方法

_label.numberOfLines = 0; // 行数無制限
_label.lineBreakMode = NSLineBreakByWordWrapping; // 単語の途中で改行されないようにする
_label.text = @"English (U.S.), English (UK), Chinese (Simplified), Chinese (Traditional), French, French (Canadian), French (Switzerland), German, Italian, Japanese (Romaji, Kana), Korean, Spanish"; // 表示するテキストの設定

ただしUILabelの高さを適切に設定しないと、このように途中で表示が切れてしまいます。高さを適切に設定する方法はいくつかありますが、手軽なのはsizeToFitメソッドを使うことです。

01

_label.frame = CGRectMake(0, 0, 200, 0); // heightは自動計算するので0にしておく
[_label sizeToFit]; // 自動的に適切な高さにする

02

ちなみにlineBreakModeをNSLineBreakByCharWrappingにすると、このように単語の途中でも改行されるようになります。

03

このLabelの下に別のSubview(今回はUIButton)を配置したいときは、このようにします。

CGRect labelFrame = _label.frame; // sizeToFit後は自動調整された高さが設定されたframeを得られる
CGRect buttonFrame;
buttonFrame.origin.x = 0;
buttonFrame.origin.y = labelFrame.origin.y + labelFrame.size.height + 8/*margin*/;
buttonFrame.size.width = 200;
buttonFrame.size.height = 37;
_button.frame = buttonFrame;

04

プログラムで実装するとちょっと面倒です。Interface Builder + Auto Layoutで実現できそうなら、そうしたほうが楽で良いでしょう。

UILabelの複数行表示をInterface Builder + Auto Layoutで行う方法

このようにUILabelとUIButtonを配置します。

06

UILabelのConstraintは以下のように設定します。

11

07

大事なことはWidthは固定値でHeightはConstraintを存在させないことです。ドラッグアンドドロップで配置した後に高さを触らなければHeightは存在しないはずです。存在しないということは高さが自動調整されるということです。

またUILabelのプロパティを複数行対応することを忘れてはいけません。

08-1

ここはInterface Builderでなくともプログラムで設定しても良いです。

※ 自分はレイアウト以外のことはInterface Builderでやらない主義なので、プログラムでやります。

UIButtonのConstraintは以下のように設定します。

12

09

WidthとHeightのConstraintを固定値することでサイズを保ちます。Top Space to; LabelというConstraintがUILabelの下にUIButtonを配置することを保ちます。UILabelの高さが変わってもです。

Auto LayoutのConstraintの設定などは、以下のチュートリアルに詳しく書いているので参考になればと思います。

Auto Layoutチュートリアル

またプログラムでやる方が良い場合とそうでない場合は、以下の記事が参考になるかもしれません。

Interface Builderを使う場合・使わない場合