完成形はこれ
なんてことない数字の並んだ四角形のマスです
オートレイアウト(Autolayout)で綺麗に整列させましょう

スタックビューを使う
まずはスタックビューという便利な位置調整のビューを1個配置します


タテヨコの寸法を300に固定して、画面中央寄せに配置します
その後、スタックビューのDistributionの設定を変更します



さらにスタックビューを追加で2個配置します
Distributionの変更も忘れずに行います

次に、説明が難しいですが、、、
追加したスタックビュー2つを、オレンジ色のスタックビューと親子関係にします

すると、下のようになるはずです

次にラベルを4つ配置します
Alignmentをセンターにしておきます

Labelの名前を数字に変更します

数字をタテに並べたいので
スタックビューのAxisをHorizontalからVerticalに変更します

下の画像のようになったらほぼ完成です
最後にラベルのフォントや背景色を変更したら完成です


最後にビルトで確認しましょう

ちなみに、stackViewを使用してるので
数字を増やしても常に均等に整列して表示してくれます

おしまい
コメント