【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の設定を行いながらどのデバイスにも対応できる

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

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

未経験からエンジニアへ転職しよう!

プログラマー・ITエンジニア等の人材は、不足しています

プログラマの単価(1月の金額)は60~80万円が相場です

スマホの普及、IoT社会の発展によりプログラマの需要は今後も高いでしょう

未経験からでもプログラマーへの転職を目指すのは大いにありです

転職活動自体は、リスクゼロなので、まずは転職サイトに登録して

どんな転職先があるのか調べていくことを進めていくことをおすすめします

おすすめの転職サイト
マイナビジョブ20's

マイナビジョブ20's

マイナビジョブ20’sは、20代の転職を専門とする転職エージェントです

精通したキャリアアドバイザーから、最適な会社を提案してもらえます

カウンセリング、書類添削等就職活動を手厚くサポート!

20代・第二新卒・既卒の転職ならマイナビジョブ20's!!
・20代の転職を専門とする転職エージェント
・転職活動をしっかりサポート
・サービス利用料は¥0

コメント

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