初めてiPhoneアプリをデザインするには、どうすればいい？――すぐ分かるInterface Builder、Storyboard、Auto Layoutの使い方：初心者のためのSwiftで始めるプログラミング入門（9）（2/4 ページ）

本連載では、これからプログラミングやiPhoneアプリ開発を始めてみたい方を対象に、開発に必要な知識を基礎から解説していきます。今回は、画面に部品を配置しレイアウトを行うのに便利な3つのツール「Interface Builder」「Storyboard」「Auto Layout」の使い方を解説する。

[諏訪悠紀，アンダースコア]

UIコンポーネントを配置しよう

　それでは、画面レイアウトを作成していきましょう。まずは、Interface Builderを使ってUIコンポーネントを配置しましょう。

Interface Builderを開く

　まず、Storyboardファイルを開きましょう。Xcodeプロジェクトを開き、左側のナビゲーター領域に表示されている「Main.storyboard」をクリックしてください。すると、真ん中のエディタ領域が切り替わります。このエディタ領域に表示されている画面がInterface Builderです。この画面で、UIコンポーネントを配置できます。

「Main.storyboard」を開く

　Interface Builderの画面をよく見てみると、「View Controller」と書かれている四角い枠があることが分かります。これは、iPhoneに表示される画面そのものです。このようなiPhoneに表示される画面のことを、Storyboardでは「シーン（Scene）」と言います。

　また、シーンの左側に表示されている矢印は「このシーンがアプリ起動時に表示されますよ」ということを表しています。つまり「Main.storyboard」には、アプリ起動時に表示される1つ目のシーンがあらかじめ用意されているということになります。このシーンが真っ白だったので、前回のアプリ実行時には真っ白な画面が表示されていたというわけですね。

　なお、シーンはiPhoneの画面サイズとは違い正方形に表示されていますが、アプリ実行時にはiPhoneの画面いっぱいに表示されるので、心配ありません。

アプリ起動時に表示される画面

UIコンポーネントを配置する

　次に、UIコンポーネントをシーンに配置しましょう。

　UIコンポーネントを配置するには「オブジェクトライブラリ」を使います。オブジェクトライブラリは、Storyboardに配置可能なUIコンポーネントを一覧できる、いわば図書館のような画面です。この画面から配置したいUIコンポーネントを選び、Storyboardに配置することができます。

オブジェクトライブラリ

　オブジェクトライブラリは、右側のユーティリティー領域の下部に表示されています。オブジェクトライブラリの中から、絵を表示するためのUIコンポーネントである「UIImage」を選んで配置しましょう。オブジェクトライブラリの一覧をスクロールすると「UIImage」と書かれている行があるので、これをシーンまでドラッグアンドドロップで持っていきます。後からシーンの下部にUIButtonを配置する予定なので、上部に配置してください。

UIImageの配置

　次に、UIButtonを配置しましょう。「進むボタン」と「戻るボタン」になる、計2つのUIButtonを配置します。オブジェクトライブラリの一覧をスクロールすると「UIButton」と書かれている行があるので、これをシーン内のUIImageの下までドラッグ＆ドロップで持っていきます。1つは右側、1つは左側に配置します。

UIButtonの配置

　これで、UIコンポーネントの配置は終わりです。

Auto Layoutの制約を設定しよう

　ここまで3つのUIコンポーネントを配置しましたが、これらは「取りあえず」置いただけの状態です。そのため、このままiPhone上で実行したとしても、きれいにレイアウトされません。

　ここで登場するのが「Auto Layout」です。各UIコンポーネントに対して「制約」を付けることで、iPhone上で自動でレイアウトされるようになります。

Auto Layoutを使った状態

　今回作成する「動く絵本アプリ」のシーンに表示する3つのUIコンポーネントは、次のように配置すればきれいに表示されそうです。

• A.「戻るボタン」となるUIButtonを、左下に配置する
• B.「進むボタン」となるUIButtonを、右下に配置する
• C.「絵」となるUIImageViewを、画面いっぱい、かつUIButtonの上に配置する

シーンに設定する制約

　このような「サイズや配置についてのルール」は、制約を指定することで実現できます。いくつかの制約を指定する必要がありますが、一つずつ順を追って指定していきましょう。