XcodeのAuto LayoutのStack Viewを使って、常に正方形で均等配置したビンゴカードを作る方法

このような、すべてのデバイスで縦向き・横向き関わらず、正方形のビンゴカードをXcodeのAutoLayoutを使って作る方法を、自分への備忘録も兼ねて、ご紹介いたします。

横一列で正方形を5つ並べたStack Viewを作成する

まずは、適当に正方形のUIViewを5つ並べます。

そして、その5つの正方形を同時に選択した状態で、Stack Viewを選択します(右下のアイコンから選択できます)。

そして、そのStack Viewの設定は以下のようにしてください。

  • Distribution・・・Fill Equally
  • Spacing・・・10

作成したStack Viewを5つ複製する

横一列のStack Viewが作成できたら、そのStack Viewを縦に5つ並べるように複製します。

Stack Viewを5つ含むStack Viewを作る

複製したStack View5つすべてを選択した状態で、再度Stack Viewを設定してください。

Stack Viewが5つ含まれる1つの大きなStack Viewを制作するイメージです。

そして、そのStack Viewの設定も同じく、

  • Distribution・・・Fill Equally
  • Spacing・・・10

になります。(HorizontalとVerticalの違いに気をつけてください。)

最後に親となるStack Viewに複数のConstraintsを付与

最後に1番親になるStack Viewに複数のConstraintsを設定して完成です。

  • 上下中央配置
  • 左右中央配置
  • 縦幅・横幅のAspect Ratio を 1:1
  • Super Viewとwidthを同じに
  • Super Viewよりもwidthは小さく(こちらがPriority高め)
  • Super Viewとheightを同じに
  • Super Viewよりもheightは小さく(こちらがPriority高め)

基本的なConstraintsの使い方ですが、少しだけ特殊なのは、

Super Viewに対して同じwidthになるConstraintとSuper Viewよりもwidthが小さくなるConstraintを同時にかけている点です。

※Equal WidthはStack Viewを選択した状態で、Controlを押しながら上位のViewに対して、ドラッグ・アンド・ドロップすると設定できます。

これで、全てのデバイスで崩れのないビンゴカードのAutoLayoutが完成です!

ABOUTこの記事をかいた人

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