【はじめてのiPhoneアプリ開発】レイアウトの調整

【はじめてのiPhoneアプリ開発】レイアウトの調整

レイアウトの調整が必要な理由

前回の 『【はじめてのiPhoneアプリ開発】文字の出力』 で作成した文字ですが、レイアウトの設定を行っていないため、デバイスによって表示がズレます。例えば iPad で開くと以下のような感じ。

この問題を解決するために レイアウト について知っておく必要があります。

オートレイアウト（Auto Layout）

XCodeには有り難いことに オートレイアウト機能 があります。これは Main.storyboard 上のラベルやボタンなどを自動的にレイアウト調整してくれる機能。早速使ってみましょう。

Step.1　オートレイアウト範囲の確認

まずXCode左のファイル一覧から Main.storyboard を選択。次にファイル群の右側に表示される View Controller Scene を左クリック。そして View Controller を左クリック。これでオートレイアウトの範囲を指定できました。

Step.2　オートレイアウトの設定

次は XCode上のスマホ画面下の |-△-| のようなボタンを左クリックし、表示されたリスト内から Add Missing Constraints を選択。これでオートレイアウトのセッティング完了です。

XCode左から 2番目のファイル郡に Constraints というフォルダが新しく作成されたことが確認できます。

Step.3 オートレイアウトの結果確認

それではレイアウトが整ったか再度シュミレーターを起動して、 iPad で確認してみましょう。

あれっ、残念ながらオートレイアウトが効いていません。

このようにオートレイアウトが効かない場合は、手動でレイアウトを調整する必要があります。

Step.4　オートレイアウトの無効化

オートレイアウトから手動レイアウトに切り替えるため、一旦先ほどのオートレイアウトを無効化します。

無効化は、 XCode左から 2番目のファイル群にある View Controller を選択した状態で、画面中央のスマホ画面下に表示されている |-△-| ボタンをクリック。そして Clear Constrains を選択。

すると先ほど自動作成された Constrains フォルダが消えていることが確認できます。

手動でレイアウトを調整

Step.1 レイアウト調整する要素を確認

手動でレイアウトを調整する場合は、 Main.storyboard で表示されるスマホ画面上の要素一つずつを調整する必要があります。まずは Labelで貼り付けた文字を左クリック。

Step.2　水平方向の調整

Label をクリックした後、XCode中央に表示されているスマホ画面下の Alignボタン（|＝）　をクリック。次に Horizontally in Container にチェック。最後に Add 1 Constraint ボタンを左クリック。これで横方向のレイアウトが中央に表示されるように調整できました。

Step.3　垂直方向の調整

縦方向（垂直方向）のレイアウト設定は、XCode画面中央に表示されているスマホ画面下の |-□-| ボタンを左クリック。すると垂直方向と水平方向の余白を調整できる画面が登場。今回は画面上から 150ポイント のところに Label を設置しました。

Step.4　手動レイアウトの確認

それでは上手くレイアウトできたか、シュミレーターを起動して iPad で確認してみます。

上手く中央表示で、設定したとおりの上部余白も取れていますね。

設定後のレイアウト編集

先ほど設定した上部余白地を変更したい場合は、 Main.storyboard → View Controller → Constrains → Hello Swift.top = Safe Ar・・・ ボタンをクリック。

そして右サイドバー上部の ものさしマーク をクリック。その中の Constrain 欄の数値を編集します。

まとめ

Web開発を経験されたことのある方なら、「XCodeって簡単にレイアウト調整できて便利」 と思ったはず。今回はレイアウト調整のご紹介でしたが、右サイドバーやスマホ画面下の Alignボタンなどをもっと熟知するとレイアウトも楽しくなりそうですね。

「XCodeにあわせて Swiftの基礎スキルも習得したい」という方、 オンライン × マンツーマン で定評のある CodeCamp いかがでしょうか？ 無料体験や無料相談も行っていますよ。お気軽にどうぞ。