2枚の上図のように、2つの正方形を常に同じ距離で、全ての端末の全ての向きでセンター配置する方法をご紹介します。
土台となるUI Viewをセンター配置する
わかりやすいように少しだけグレーにしてありますが、2つのオブジェクトを等間隔でセンター配置したい場合、その2つのオブジェクトを配置する土台となるComponentを作成し、そのComponentをセンター配置します。(上図)
また、幅も丁度いいサイズにconstraintsで設定しておきます。
土台となるComponentの中に等間隔にUI Viewを配置する
次に先ほど作成した土台(Base Viewと命名)の下に、等間隔で配置したい2つのUI View(Green ViewとBlue View)を配置します。
Base Viewに対するConstraintsを指定すれば完成
最後に、Base Viewの中に配置したBlue ViewとGreen Viewに対して、Constraintsを設定すれば完成です。
これで、280px幅の土台に120px × 120pxの２つのUI Viewを配置することが出来、土台は常にセンター配置になるため、すべての端末で表示崩れすることなく、描写されることになります！
Autolayout難しいですね笑
