Tips

Swiftワンポイント学習 Auto Layout⑤Pinメニューの使い方その2

Swiftワンポイント学習 Auto Layout⑤Pinメニューの使い方その2

Pinメニューの続きを見ていきましょう。

・Width、Height

s5_1
オブジェクトの高さ・幅を指定した値に固定します。
この設定は1つまたは複数のオブジェクトを選択している際に使用することができます。

ラベルやボタンなどのオブジェクトは、「Size to Fit Content」というものが働くため、
表示される文字といったものの内容に合わせてサイズが変動するようになっています。
今、このラベルはサイズインスペクタの値を変更してタテ:100px、ヨコ:100pxに調整しています。
s5_2
このときラベルのテキストを長いものに変更してみましょう。
テキストを変更するには2つの方法があります。
この2つではちょっと動作が違うので確認してみましょう。(どうでもいいようなことですが…)
①storyboard上のラベルをダブルクリックして文字を入力する
s5_3
そうすると、入力したテキストの長さに合わせてラベルの横幅が変わりました。
「Size to Fit Content」の動作が働くのですね。
s5_4
②アトリビュートインスペクタのText欄に文字を入力する
s5_5
今度はラベルの横幅が変わらずに文字が入りきらないのでテキストが省略されています。
s5_6
この方法では「Size to Fit Content」が動作しないのが確認できます。

「Size to Fit Content」が働いていないオブジェクトに再度「Size to Fit Content」を適用するには、
「Editer」→「Size to Fit Content」をクリックします。
s5_7

ちょっと話が逸れてしまいましたが、「Width」と「Height」に戻りましょう。
これらに値を指定し制約を設けると、「Size to Fit Content」の動作を行わずに固定長の
サイズになります。

固定のサイズになりますのでボタン等のアクションによってラベル内のテキストの長さが変わった場合
など、文字がすべて表示されないといったことも起こってしまいますので使用する際は気をつける必要があります。

・Equal Widths、Equal Heights

s5_8
選択したオブジェクトの高さ・幅を揃えます。
この設定は複数のオブジェクトを選択している際に使用することができます。

では、実際に試してみましょう。まず緑色のラベルだけを選択しタテ・ヨコ100pxで固定します。
s5_9

次に2つのラベルを選択し、Equal WidthとEqual Heightsの両方にチェックを入れてaddボタンを押してみましょう。
s5_10

するとピンク色のラベルが緑色のラベルと同じサイズになりました。
s5_11

今回はここまでにしたいと思います。

TechProjin 開発系基礎講座 連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

AIなどで注目急上昇!これから学ぶならPython!!
独学で学ぶ-pythonプログラミング 連載

汎用性◎ 定番プログラミング言語JAVA
Java基礎講座 連載

Recent News

Recent Tips

Tag Search