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

この記事は2015年10月24日に書かれたものです。内容が古い可能性がありますのでご注意ください。


今回でPinメニューの使い方も最後になります。
では、残った項目を見ていきましょう。

・Aspect Ratio

s6_1
オブジェクトのタテ・ヨコの比率を指定した一定の割合に保ちます。
この設定は1つまたは複数のオブジェクトを選択している際に使用することができます。

今、この緑色のラベルはStoryboard上にタテ100px、ヨコ150pxのサイズで配置されています。
この制約を追加するとデフォルトでstoryboard上に配置されているオブジェクトの比率が採用されます。
タテ100px、ヨコ150pxですので、タテ:ヨコ=2:3となります。
では、「Aspect Ratio」の制約を追加してみましょう。
s6_2
すると、プレビュー画面ではラベルが左上に寄ってしまいましたね。そして心なしか小さくなったように
見えます。
現状だとラベルの位置の制約を決めていませんのでX座標、Y座標共に0pxの位置、つまり親ビュー画面の
左上に配置されてしまっているのですね。また、サイズの制約も決めていませんので、ラベル内のテキストの
サイズに合わせた「Size to Fit Content」の動作が働いています。
s6_3
ただし、「Aspect Ratio」の制約は効いていますので比率の2:3はキープされています。
Alignメニューからこのラベルを画面の中央に配置する制約と、PinメニューからWidthを300pxにする制約を
追加してみましょう。
s6_4
s6_5
ヨコが300pxに固定され、タテ:ヨコ=2:3に比率も固定されているため、縦幅も200pxとなりました。
s6_6
今の2:3の比率を変更するにはドキュメントアウトラインで該当する「constraints」を選択して、
右側のサイズインスペクタの「Multiplier」を変更します。
s6_7
試しに、この部分を1:1に変更してみましょう。
s6_8
Widthの制約の300pxに合わせて1:1となり、ラベルが正方形になりました。

・Align

s6_9
オブジェクト同士の「揃え」に関する制約を設けることができます。
この設定は複数のオブジェクトを選択している際に使用することができます。

複数のオブジェクトを選択してこのAlignの項目をみてみると、
Alignメニューの中にあった項目と同じものがあるのが確認できるかと思います。
s6_10
s6_11
使い方は同じです。複数のオブジェクトで左端の位置を揃えたいときなどにこちらのPinメニューから
制約を設けることもできるのです。
Alignメニュー、Pinメニューのどちらで制約を加えても問題ありませんので、好きな方を使えば良いでしょう。

これでPinメニューの説明を終わります。

次回からは「Issues」メニューについて解説していきたいと思います。

  • このエントリーをはてなブックマークに追加

PAGE TOP