iOSアプリやMacアプリの画面のレイアウトを視覚的に作成することができる「Storyboard」。複数の画面をまとめて作成することが可能で、画面の中身だけでなく、遷移の方法までコーディングなしで作成することもできます。

複数の画面をまとめて管理できる反面、ファイルサイズが肥大化してチーム開発時にコンフリクトが発生しやすいという弱点が指摘されていましたが、Xcode 7以降Storyboard Referenceを使って画面を簡単に分割できるようになり、弱点が克服されつつあります。

今後も積極的に改良されていくことが予想されるため、新しくアプリの開発を始める場合、Storyboardの機能を積極的に使っていくことをお勧めします。

Storyboardの基本的な使用方法

Storyboardを使って画面を作成するにはStoryboardファイル(*.storyboard)をXcodeで選択します。テンプレートから作成した通常のiOSプロジェクトの場合、Main.storyboardが最初に表示される画面に該当するStoryboardファイルです。

画面右下の「Object Library」から任意のコントロールをドロップします。

ドロップしたコントロールの属性は画面右上「Attributes Inspector」等から変更できます。例えばラベルの場合、背景や文字の色、サイズ、ラベルとして表示する文字の内容などさまざまな情報が変更できます。

プログラムをビルドするとシミュレーターで画面を確認することもできます。

避けては通れないAutoLayout

画面サイズが多様化した近年、従来のように固定レイアウトでアプリ開発を行うのは現実的ではありません。さまざまな制約を設定しコントロールのサイズを柔軟に設定できるAutoLayoutもStoryboardでは簡単に使用することができます。

例えばラベルを画面の幅一杯に広げたい場合、右下の「Pin」アイコンをクリックしてポップアップウィンドウを表示し、左右の制約を0に設定した後に隣のHアイコンをクリック。最後に「Add x Constraints」をクリックします。

こうすることでラベルの左右の端が固定され、ラベルが自動的に画面の横幅一杯に引き延ばされるようになるのです。

AutoLayoutではこの他に配置の制約や親ビューに対するサイズの割合の制約、アスペクト比の制約などさまざまな制約を追加して柔軟なレイアウトを実現することができます。