前回のつづき

今回は、Labelの文字列の長さによって自動的に高さが変わるサンプルです。

サンプルコード: https://github.com/stack3/iOSAutoLayoutSamples

サンプルを起動してResize Labelを選択すると以下の画面が表示されます。

01

上の方のLong Textを押しましょう。以下のようになります。

02

Label1のテキスト内容が変わって、複数行になり、それに合わせてLong Textボタンの位置も下に移動しました。

下の方のLong Textを押しましょう。以下のようになります。

03

Label2のテキスト内容はLabal1と同じになったのですが、右端にはみ出てしまいます。Long Textの位置も移動しません。

Constraintの確認

STResizeLabelViewController.mを開きましょう。

以下のようにそれぞれボタンを押した時に長いテキストをLabelに入れるようにしています。

- (void)didTapLongTextButton1
{
    _label1.text = @"Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooon Text";
}

- (void)didTapLongTextButton2
{
    _label2.text = @"Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooon Text";
}

STResizeLabelViewController.storyboardを開いて、Label1を選択します。以下のようにConstraint(青線)が確認できます。

01

 

Size Inspectorを開くとConstraintは以下のようになっています。

02

Constraintはそれぞれ以下を意味します。

Top Space to: Top Layout Guide 上端の間隔を0pxで固定
Leading Space to: Superview
Equals: 20
左端の間隔を20pxで固定
Trailing Space to: Superview
Equals: 20
右端の間隔を20pxで固定
Bottom Space to: Button – Long Text
Equals: 8
下端とLong Text Buttonとの間隔を8pxで固定

 

Attributes Inspectorを開くと以下のように設定されています。つまり複数行表示に対応しています。

08

 

今度はLabel1の下にあるLong Text Buttonを選択します。Constraintが確認できます。

03

Size InspectorのConstraintを見てみましょう。

07

Top Space to: Label – Label1
Equals: 8
上端とLabel1の間隔を8pxで固定
Trailing Space to: Superview
Equals: 20
右端の間隔を20pxで固定

テキストの変更による高さの自動調整

Label1のConstraintは、あくまでSuperviewとLong Text Buttonとの間隔のみが設定されており、それ自身の高さは設定されていません。テキストが変わっても、そのConstraintを保持するために高さが自動調整されるようになっています。

Long Text Buttonの移動

Label1とLong Text Buttonの垂直方向の間隔を8px固定というConstraintがあります。Label1の高さが変わっても、それを守ろうとするので、Long Text Buttonは下へ移動するというからくりです。

Label2のテキストがはみ出る理由

Label2には何もConstraintが設定されていません。よってLabel2のテキストが変わっても、ただ横へ幅が伸びるだけで画面からはみ出てしまいます。

Long Buttonも何もConstraintが設定されていません。

自分でConstraintを設定してみる

Label2とその下のLong Text ButtonのConstraintを設定してみましょう。

Label2を選択します。何もConstraintがありませんね。

09

 

Pinボタンを押して、以下のようにConstraintを設定し、Add 4 Constraintsボタンを押します。

10

 

Constraintが追加されました。

06

Long Text ButtonとのConstraintがオレンジ色になっています。これはLong Text Buttonの垂直方向のConstraintが不足しているからです。

Long Text Buttonを選択し、Pinボタンを押しましょう。Superview右端とのConstraintを設定しAdd 1 Constraintボタンを押します。

08

 

Constraintが追加されました。そして先ほどオレンジ色だったConstraintが青色になりました。

13

 

起動して確認してみましょう。

14

Long Text Buttonを押します。

15

今度はLabel2のテキストに合わせて、Long Text Buttonが下へ移動しました。

横画面もうまく表示されます。

16

 

上の方のLong Text Buttonを押してみましょう。

18a

Label1の高さが変わり、Long Text Buttonが下に移動するのと一緒に、Label2とその下のLong Text Buttonの位置も下に移動します。

もう一度、Label2のConstraintを確認してみましょう。

09

Label2から上のLong Text ButtonへConstraintが設定されています。よってLong Button Textが下へ移動すると、一緒にLabel2も下へ移動します。

では、Label2のNavigationBarからの間隔を固定して、上のLong Button Textの移動に影響しないようにしてみましょう。

Label2を選択して、Pinボタンを押し、上端のConstraintを選択します。

20

上端のConstraintのプルダウンを選択。以下の様なメニューが出るので、Top Layout Guideを選択します。

11

そしてAdd 1 Constraintボタンを押すと、SuperviewとLabel2の間にConstraintができます。

12

 

次にLong Text ButtonとのConstraintを選択します。

13

これをDeleteキーを押して削除します。

 

起動して確認してみましょう。上のLong Text Buttonを押しても、Label2の位置が変わらないのを確認できるはずです。

27

以上、Labelの自動リサイズについて説明しました。

その5へつづく