こんにちは、コン（@pippi_kon）です。
iPhoneやiPadをターゲットとしたアプリを作る場合、画面サイズを意識しないと端末によっては表示が崩れてしまいますよね。
iPhone7の画面だと全画面表示されていたViewが、iPhoneXやiPadの画面だと全画面表示されてなかったりとか…。
そこで今回は、AutoLayoutという仕掛けを用いて、どの端末でも同じような表示となるレスポンシブな画面設計を行う方法をご紹介します。
なお、AutoLayoutを応用した「ダミーViewによるレスポンシブ設計」というものがあります。
この方法を使えば、Viewなどの大きさを画面サイズに対する比率で設定することができるため、端末が変わって画面サイズが変わったときでも表示が崩れることはありません。
AutoLayoutの設定方法
今回は、storyboardに配置したViewをレスポンシブに設定する方法をご紹介します。
まず、storyboardにViewを配置します。
この例ではわかりやすいようにViewの色を緑色にしています。
次に、AutoLayoutの設定画面を開きます。
上記の赤枠で囲んだボタンを押すと、AutoLayoutの設定画面が表示されます。
赤線部分をこのように変更してください。
4辺の0は、「Viewの各辺を画面の端とぴったりにする」ことを示しています。
この設定をすれば、iPhoneやiPadの画面が変わったときでも、それぞれの「画面の端」が適用されますので、常に全画面表示することができます。
また、「Constrain to margins」のチェックは外してください。
設定が終わったら、もう一度以下を確認し「Add 4 Constrains」をクリックしてください。
- 4辺にそれぞれ0を入力する。
- 「I」マークが点線から実線になったことを確認する。
- Constrain to marginsのチェックを外す。
これでAutoLayoutによるレスポンシブ設定は完了です。
「Add 4 Constrains」を押すと、Viewがこのように画面いっぱいに大きくなります。
この画面では、iPhone8で全画面表示されている状態です。
こちらはiPadの画面です。
iPhone8と同様に全画面表示されています。
AutoLayoutが正しく設定できていることが確認できました。
今回はViewを全画面表示させるためにAutoLayout設定時に4辺を0にしました。
これを例えば上だけ0にした場合は、Viewの幅と高さは変わらずにViewが画面上に表示されます。
上と下を0にした場合は、Viewの幅は変わらずにViewが画面の上から下まで長く伸びて表示されます。
最後に
今回は、AutoLayoutという仕掛けを用いて、どの端末でも同じような表示となるレスポンシブな画面設計を行う方法をご紹介しました。
このレスポンシブ設計は、画面を回転させることを許可しているアプリではほぼ必須と言えます。
画面の向きを固定させる場合でも、ハードによっては画面の比率が変わることがあるので、常にレスポンシブ画面を意識した設計を行いましょう。
