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

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

・Aspect Ratio

オブジェクトのタテ・ヨコの比率を指定した一定の割合に保ちます。
この設定は1つまたは複数のオブジェクトを選択している際に使用することができます。
今、この緑色のラベルはStoryboard上にタテ100px、ヨコ150pxのサイズで配置されています。
この制約を追加するとデフォルトでstoryboard上に配置されているオブジェクトの比率が採用されます。
タテ100px、ヨコ150pxですので、タテ:ヨコ=2:3となります。
では、「Aspect Ratio」の制約を追加してみましょう。

すると、プレビュー画面ではラベルが左上に寄ってしまいましたね。そして心なしか小さくなったように
見えます。
現状だとラベルの位置の制約を決めていませんのでX座標、Y座標共に0pxの位置、つまり親ビュー画面の
左上に配置されてしまっているのですね。また、サイズの制約も決めていませんので、ラベル内のテキストの
サイズに合わせた「Size to Fit Content」の動作が働いています。

ただし、「Aspect Ratio」の制約は効いていますので比率の2:3はキープされています。
Alignメニューからこのラベルを画面の中央に配置する制約と、PinメニューからWidthを300pxにする制約を
追加してみましょう。

ヨコが300pxに固定され、タテ:ヨコ=2:3に比率も固定されているため、縦幅も200pxとなりました。

今の2:3の比率を変更するにはドキュメントアウトラインで該当する「constraints」を選択して、
右側のサイズインスペクタの「Multiplier」を変更します。

試しに、この部分を1:1に変更してみましょう。

Widthの制約の300pxに合わせて1:1となり、ラベルが正方形になりました。

・Align

オブジェクト同士の「揃え」に関する制約を設けることができます。
この設定は複数のオブジェクトを選択している際に使用することができます。
複数のオブジェクトを選択してこのAlignの項目をみてみると、
Alignメニューの中にあった項目と同じものがあるのが確認できるかと思います。

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