Posted at

AutoLayoutで親Viewのサイズにあわせた正方形をつくる

More than 3 years have passed since last update.

最終的にこんな感じに、画面を縦にしたときは横のサイズに合わせた正方形になって、横にした時は縦のサイズに合わせた正方形になります。(青いView)


環境


  • Xcode 7.3.1


必要なViewを配置

親となるViewと正方形にする子のViewを配置する。

親は適当に画面いっぱにひろげる感じで、子Viewは現時点では適当に配置します。


親Viewの制約

親Viewの制約です。

とりあえず、適当に次のように設定しておきます。


子Viewの制約


中央寄せ

親Viewの中央に配置されるようにします。


縦横比率

正方形なので縦横を1:1の比率に設定します。

Aspect Ratioにチェックします。

Inspectorのほうで先ほどAspect Ratioを1:1に変更します。


サイズ

親Viewとサイズを同じにする設定とかです。ここがややこしいです。


Equal Widths

子Viewから親Viewへcontrol押しながらドラッグアンドドロップして、Equal Heithsを選択します。

親サイズとイコールではなく親サイズ以下にする必要があるので、Inspectorのほうから変更します。


Equal Heights

Widthの時と同様にやっていきます。

子Viewから親Viewへcontrol押しながらドラッグアンドドロップして、Equal Heithsを選択します。

これも同じくInspectorから親サイズ以下になるようにします。


さらにEqual WidthsとEqual Heights

ここまでうまくいきそうなんですけど、エラーがでてます。さらに設定が必要です。

同じようにEqual Widthsをもう一つ作ります。で、これを今度はイコールのままでPriorityをHighに変更します。

Equal Heightももう一つ作って、同じようにPriorityを変更します。


Update Frames

最後に子ViewをUpdate Framesをして、終わりです。


最終的な子Viewの制約