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



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

【はじめてのiPhoneアプリ開発】では、 「XCodeを触ったことがない」 「プログラミングは初心者」 という方を想定して、 各ステップをご紹介させて頂きます。 今回はレイアウトに関するテクニックをお届け。

本稿で使用する XCode のバージョン: XCode 10.1、 Swift 4.2

目次
  1. 【はじめてのiPhoneアプリ開発】レイアウトの調整
  2. レイアウトの調整が必要な理由
  3. オートレイアウト(Auto Layout)
  4. 手動でレイアウトを調整
  5. 設定後のレイアウト編集
  6. まとめ

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

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

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

image

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

オートレイアウト(Auto Layout)

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

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

image

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

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

image

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

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

image

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

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

image

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

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

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

image

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

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

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

image

手動でレイアウトを調整

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

image

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

Step.2 水平方向の調整

image

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

Step.3 垂直方向の調整

image

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

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

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

image

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

設定後のレイアウト編集

image

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

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

まとめ

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

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

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp