このような、すべてのデバイスで縦向き・横向き関わらず、正方形のビンゴカードを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を付与
最後に１番親になる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が完成です！
