オートレイアウト(制約のみで整列)

制約のみでラベルを整列表示させてみます(スタックビュー無し)

完成形はこれ

オートレイアウト(Autolayout)で綺麗に整列させましょう

オートレイアウトの設定

まず初めにViewを配置します


次に、Viewの高さ“300”に固定して画面中央寄せにします


次に、ラベルを4個配置します。


1つ目のラベルを左上寄せに配置します


2つ目のラベルを右上寄せで配置。残り2つのラベルも同じ要領で左下、右下に配置してください。


下の画像のようになってたらOKです(=´∀`)


再度、ラベルにオートレイアウトの制約を付けていきます〜


制約を付けても特に見た目に変化はありません・・・最後に一気に仕上げます


ラベルをすべて選択した状態で、Equal widths / heightsにチェックを入れて完了

4個のラベルをすべて選択した状態で制約を付ける


こんな感じになりましたか?

最後に、ラベルに数字背景色を設定して整えたら完成

おしまい(´∀`)

コメント

タイトルとURLをコピーしました