【Swift】AutoLayoutで、等間隔で2つのComponentをセンター配置する方法

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の2つのUI Viewを配置することが出来、土台は常にセンター配置になるため、すべての端末で表示崩れすることなく、描写されることになります!

Autolayout難しいですね笑

ABOUTこの記事をかいた人

新卒でノマドワーカー(webデザイナー)として独立し、半年で月収100万円を達成する。その後、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んできました。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは、お金のことを考えずに、様々な企業でエンジニア修行をさせていただきながら、複数のメディアやアプリとweb制作事務所を運営しています。 趣味は株式投資(米国・日本株メイン)で、トレードを楽しむ日も多いです!