Swift

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

こんにちは、コンジ(@pippi_kon)です。

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

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

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

 

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

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

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

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

【Swift】回転を防ぐ!アプリ画面を縦や横に固定させる方法『アプリを作成するときに画面を回転させない(向きを固定させる)方法』についてご紹介します。...

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

初心者向け!Swift入門にオススメの参考書_サムネ
【2020年版】初心者向け!Swift入門にオススメの参考書『Swift初心者にオススメしたいSwiftプログラミング参考書』をご紹介します。...
無料体験あり!初心者におすすめの人気プログラミングスクール3選_サムネ
無料体験あり!初心者におすすめの人気プログラミングスクール3選『プログラミングを学ぶことができる人気のプログラミングスクール』についてご紹介します。...
ABOUT ME
コンジ
コンジ
自分のやりたいことでお金を稼げる生活に憧れて脱サラ。 アプリ開発やブログ運営をしながらのんびり暮らしています。