【Swift3】AutoLayoutでレスポンシブ設計

iPhoneやiPadをターゲットとしたアプリを作る場合、画面サイズを意識しないと端末によっては表示が崩れてしまいますよね。
iPhone7の画面だと全画面表示されていたViewが、iPadの画面だと全画面表示されずに左上にあったり…。
このようなことを防ぐためには、AutoLayoutという仕掛けを用いてレスポンシブな画面設計を行いましょう。
storyboardで画面設計すれば簡単に実現できます。

スポンサーリンク

バージョン

Xcode:8.3.3
Swift:3.1

storyboardにViewを配置する


storyboardを開き、Viewを配置します。


わかりやすいように緑色にしました。


iPhone7の画面で全画面表示されるように横幅・縦幅を広げました。


同じ画面をiPad proで表示すると、全画面表示ではなく左上にずれて表示されてしまいます。
これは、Viewの横幅・縦幅が固定値で設定されているためです。

AutoLayoutを設定する

iPhone7でもiPadでも全画面表示されるように設定します。


赤線で囲ったボタンを押すとこのような画面が表示されます。


赤線部分をこのように変更してください。
4辺の0は、「Viewの各辺を画面の端とぴったりにする」ことを示しています。
この設定をすれば、iPhoneやiPadの画面が変わったときでも、それぞれの「画面の端」が適用されますので、常に全画面表示することができます。

以下を確認し「Add 4 Constrains」をクリックしてください。
・4辺にそれぞれ0を入力する。
・「I」マークが点線から実線になったことを確認。
 点線のままの場合はクリックすると実線になります。
・Constrain to marginsのチェックを外す。


するとiPhone7の画面では全画面表示されました。


iPad proの画面に切り替えても全画面表示されました。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告