【Xcode】Autolayoutうまくいかないと思ったらときの手順確認

Xcode

ボタンの比率が正しく表示されない

いい感じにレイアウトができたと思い

シミュレーターで確認すると、意図したところとは

想定とは全く違ったところにボタンやラベルが表示されることはありませんか?

iOS端末は、それぞれの画面のサイズが異なります

ボタンやラベルの位置は『AutoLayout』誓約を設定する必要があります

始めよくわからずかなり手こずってしまいました

実際の手順

実際の手順を確認しましょう!

右上のプラスボタンをクリック

オブジェクトライブラリが表示されます

Buttonをドラッグアンドドロップします

ちょっと小さいですね

ボタンの大きさを変更します

TextColor と background を変更して、「ボタンの色」と「フォントの色」を変更します

デバイスを切り替えても、ボタンの大きさの比率が保たれるように設定していきます

右下のアイコンをクリック、Accept Ratioにチェックを入れます

Add 1 Constraintボタンをクリックします

ボタンとViewを紐づけます

ボタンをControlを押しながら、Viewへドラッグアンドドロップします

Equal Widthsを選択します

右下のアイコンをクリック、Horizonatally in Containerにチェックを入れます

Add 1 Constraintボタンをクリックします

x軸の位置が中央に固定されました

iPad Pro 12.9 から iPhone SE へ切り替えて確認してみます

ボタンサイズのサイズ比率が維持されています

まとめ:Autolayoutは慣れが必要

デバイスを切り替えても、ボタンの比率が維持されるように

設定を追加する手順をまとめました

知っていれば簡単なことかもしれませんが

知らないとかなり困惑しますね

今回はボタン一つで解説しましたが

当然画面にを作る場合は多くのオブジェクトを使用します

Autolayoutの設定を行いながらどのデバイスにも対応できる

画面レイアウトを作成していきましょう

最後まで読んでくれてありがとうございました!

コメント

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