画面内の部品位置を自動で調整する
整列と制約
前レッスンで作った標高表示アプリですが、ちょっとした不具合があります。
画面サイズが違うiPhoneで動かしたり、画面を横にしたりすると、中央の十字マークや標高のラベルがズレてしまいます。
画面のサイズや向きが変わってもズレないようにしてみましょう。
学習内容
・整列の使い方
・制約の使い方
・アプリの表示名を変更する
1．こんな感じでズレます
『Main.storyboard』をクリックしてインターフェイスビルダーを表示してください。
下の方に『View as：iPhone7』などと表示されています。
一つ左のiPhone Plusシリーズを選んでみてください。
＋ラベルと標高ラベルがちょっとズレてしまいました。
次は、右のiPhone 4sを選んください。
かなりズレてしまいました。Autoresizingではこうなってしまうんですね。
iPhoneSEでもズレが大きくなっています。
横画面では話になりません。
＋ラベルと標高ラベルはAutoresizingを設定しましたが、それゆえマージンが固定されてしまい、位置がズレてしまいます。
一方で、左下と右下のSNSボタンやMapViewは、適切な位置とサイズに調整されています。
画面全体に広がっていたり、画面の隅にあったりする部品はサイズや向きが変わっても大丈夫です。しかし、画面の中央などに表示される部品は位置がうまく調整されません。
これが、『スマホの画面サイズによってレイアウトが崩れてしまう問題』です。
2.整列と制約
この問題を解決するために、整列と制約という機能を使います。
インターフェイスビルダーの右下を見てください。目立たないアイコンがいくつか並んでいます。
よく使うのは『整列』と『制約』です。
まずは整列を使ってみましょう。
3.整列
＋ラベルをクリックして選択状態にしたら、整列ボタンを押してください。
すると下の画像のようになります。
『Horizontally in Container』と『Vertically in Container』にチェックを入れて、『Add 2 Constraints』をクリックしてください。
『Horizontally in Container』は水平方向のセンタリングで、『Vertically in Container』は垂直方向のセンタリングです。
これで＋ラベルが画面の中央に固定されます。
最初と同じように、さまざまな画面のサイズや向きを試してみてください。
どうやら問題なさそうです。
次は標高ラベルをクリックして整列ボタンを押してください。
『Horizontally in Container』にチェックを入れて『Add 1 Constraints』をクリックしてください。
標高ラベルは＋ラベルのすぐ下に配置したいので、垂直方向のセンタリングは設定しません。
水平方向のセンタリングだけでOKです。
4．制約
標高ラベルを＋ラベルのちょっと下に配置するためには『制約』を使います。
標高ラベルをクリックして選択状態にしたら、『制約』ボタンをクリックしてください。
上の方に8と書かれたドロップダウンボックスがあります。その下に赤い点線があるのでクリックして有効にしてください。
次に、WidthとHeightにチェックを入れてください。これで幅と高さが固定されます。
『8』というのは＋ラベルからの距離です。つまり、これで標高ラベルは常に＋ラベルの8ピクセル下に配置されるようになります。
位置とサイズの制約を有効にしたら、『Add 3 Constraints』をクリックしてください。
標高ラベルは水平方向のセンタリング、＋ラベルからの距離、幅と高さが指定されています。
5.試してみる
＋ラベルと標高ラベルの『整列と制約』を設定しました。これでいい具合に自動調整されるはずです。
アプリを実行して試してみてください。
画面の回転ロックを外して画面を横にしてみてください。
＋ラベルと標高ラベルが中央に表示されたら成功です。
6.アプリの画面表示を縦に固定する方法
このように、整列と制約をうまく利用すれば横画面でもレイアウトを崩さずに表示できるようになります。
ただ、アプリによっては横画面にするとどうしても表示内容が破綻してしまうことがあります。
破綻させないために多大な努力が必要な場合もあります。
そういう時は無理せず、横画面を禁止にしましょう。
アプリの設定を変更すれば横画面を禁止することができるのです！
上のように順にクリックして、『Device Orientation』の『Landscape』のチェックを2つ外してください。
これで画面の回転ロックが解除されている状態で画面を横にしても回転しなくなります。
有名なアプリでも、横画面を禁止にしてしまっているアプリは結構あります。
縦画面のみに制限してしまったほうが開発が楽だからです。
7.アプリの表示名を変更する
一瞬でできるので、ついでにアプリの表示名を変更してみてください。
さっき変更した『Device Orientation』の上の方に『Display Name』というのがあります。
そこを書き換えると、iPhoneのホーム画面に表示されるアプリ名が変わります。
好きな名前に変えて構いません。とりあえず『AltitudeMap』としました。『標高地図』など日本語でも構いません。
入力したらエンターキーを押して確定してください。
アプリを実行すればホーム画面に表示されるアプリ名が書き換わります。
アルファベットなら12文字程度、日本語なら6文字くらいまで入ります。長すぎると『A…DEF』のように省略されてしまいます。
8.復習 アイコンと起動画面を変更してみてください
今回の内容は以上で終わりです。
復習として、アイコンと起動画面を変更しましょう。
手順を忘れてしまった方は『アプリの起動画面とアイコンを変更しよう』を参照してください。
素材は下のものを使ってください。
アイコン 1024 * 1024
起動画面 1080 * 1920
さて、できましたか？