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

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

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

制約通りにレイアウトする

　ここまでで、UIコンポーネントに対する全ての制約の指定は終わりました。これらの制約はアプリをiPhone（またはiOSシミュレーター）で実行したときには反映されますが、Interface Builderの表示上は、まだ反映されていません（黄色いマークが出ている状態）。そこで仕上げに、全ての制約を反映させる操作を行いましょう。

　制約を反映させるには、Interface Builderの右下に4つのマークのうち、一番右のマークから行います。このマークは「Issues（イシューズ）」と言い、クリックすると制約で発生しているさまざまな問題を解決するための操作の候補を表示できます。この中から「All Views in View Controller」の中にある「Update Frames」をクリックしてください。

Issuesのメニュー

　制約が計算され、それに応じてUIコンポーネントの位置やサイズ変わりました。これで、Interface Builder上で制約通りのレイアウトが表示できました。

制約通りのレイアウト

　また、UIコンポーネントを選択したときに表示されていた黄色いマークが消え、青色のマークのみが表示されるようになります。この状態は「制約通りに表示ができている」ことを示しています。

UIコンポーネントに表示される青色のマーク

アプリを動かしてみよう

　最後に、Auto Layoutの制約が正しく設定されているか確認するため、アプリを実行してみましょう。

　その前に、UIImageViewがアプリ上で表示されていることが確認できるように色を付けておきましょう。UIImageViewにはまだ何も絵を設定していないため、そのままではただ真っ白な画面になってしまいます。

　UIImageViewの設定の変更は、ユーティリティー領域の「アトリビュートインスペクタ」で行えます。シーンからUIImageViewを選択し、ユーティリティー領域の上部に表示されている6つのマークの中から、右から3番目のマークをクリックしてください。

アトリビュートインスペクタの選択

　アトリビュートインスペクタの画面の中に「Background」という項目があるので、これを選択して色を変更します。お好きな色で構いません。

UIImageViewのBackgroundの変更

　これで、UIImageViewに色が付き、アプリを実行したときに表示を確認できるようになりました。

　アプリを実行する方法は、もちろん前回と同じです。上部のツールバーの中にある「Run」ボタン（右向き三角のマーク）をクリックし、iOSシミュレーター上でアプリを実行してください。

　iOSシミュレーターが立ち上がり、アプリが起動します。下図のように、UIImageViewの下にUIButtonが2つ表示されれば成功です。

アプリの実行画面

次回は、最終回。「動く絵本アプリ」を完成させよう

　今回は、iPhoneアプリの画面レイアウトを中心に解説しました。初めは真っ白な画面が表示されるだけでしたが、徐々に「動く絵本アプリ」に近づいてきているように感じられているかと思います。

　コツコツと楽しみながら完成形に近づけていくことが、iPhoneアプリ開発の醍醐味と言えます。ぜひ、自分なりの楽しさを探しながら開発をしてみてください。

　次回は、いよいよ最終回です。画面レイアウトとプログラムを組み合わせ、「動く絵本アプリ」を完成させましょう！

著者紹介

諏訪悠紀

アンダースコア株式会社でiOS／Androidのアプリ開発に携わっています。

ブログ、Google Play Store、iTunes App Store