完成形はこれ
なんてことない数字の並んだ四角形のマスです
オートレイアウト（Autolayout）で綺麗に整列させましょう
スタックビューを使う
まずはスタックビューという便利な位置調整のビューを１個配置します
タテヨコの寸法を300に固定して、画面中央寄せに配置します
その後、スタックビューのDistributionの設定を変更します
さらにスタックビューを追加で２個配置します
Distributionの変更も忘れずに行います
次に、説明が難しいですが、、、
追加したスタックビュー２つを、オレンジ色のスタックビューと親子関係にします
すると、下のようになるはずです
次にラベルを４つ配置します
Alignmentをセンターにしておきます
Labelの名前を数字に変更します
数字をタテに並べたいので
スタックビューのAxisをHorizontalからVerticalに変更します
下の画像のようになったらほぼ完成です
最後にラベルのフォントや背景色を変更したら完成です
最後にビルトで確認しましょう
ちなみに、stackViewを使用してるので
数字を増やしても常に均等に整列して表示してくれます
おしまい
コメント