Swift

【Swift4】サイズを合わせる!AutoLayoutでレスポンシブな画面設計

こんにちは!KON(@pippi_kon)です。

iPhoneやiPadをターゲットとしたアプリを作る場合、画面サイズを意識しないと端末によっては表示が崩れてしまいますよね。

iPhone7の画面だと全画面表示されていたViewが、iPhoneXやiPadの画面だと全画面表示されてなかったりとか…。

そこで今回は、AutoLayoutという仕掛けを用いて、どの端末でも同じような表示となるレスポンシブな画面設計を行う方法をご紹介します。

storyboardで画面設計すれば簡単に実現できます。プログラムコードは不要です。

 

なお、AutoLayoutを応用した「ダミーViewによるレスポンシブ設計」というものがあります。

この方法を使えば、Viewなどの大きさを画面サイズに対する比率で設定することができるため、端末が変わって画面サイズが変わったときでも表示が崩れることはありません。

あわせて読みたい
【Swift4】ダミーViewを使用したレスポンシブな画面設計 この記事では、SwiftのダミーView(ダミービュー)を使用したレスポンシブな画面設計についてご紹介します。 ダミー...
バージョン情報

この記事は以下のバージョンで記載しています。

Xcode:9.2

Swift:4.0.3

この記事をおすすめしたい人
  • レスポンシブ画面を設定したい方

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という仕掛けを用いて、どの端末でも同じような表示となるレスポンシブな画面設計を行う方法をご紹介しました。

このレスポンシブ設計は、画面を回転させることを許可しているアプリではほぼ必須と言えます。

あわせて読みたい
【Swift4】回転を防ぐ!アプリ画面を縦や横に固定させる方法 iPhoneアプリの画面は、端末を傾けたり回転させたときに画面も一緒に回転します。 iPhoneの設定で画面の回転をロック...

画面の向きを固定させる場合でも、ハードによっては画面の比率が変わることがあるので、常にレスポンシブ画面を意識した設計を行いましょう。