第4回はGUI デザインを行うもう一つの方法として、Xcode 4.2から新たに搭載されたストーリーボードの使用方法について説明します。

ストーリーボードの概要

 Xcodeに組み込まれたInterface Builderを使う場合は、Nibファイルを使用して画面(ビュー)の遷移は基本的にユーザーがプログラムで記述する必要があります。それに対して、Xcode 4.2以降に搭載された「ストーリーボード」(Storyboard)を使用すると、複数の画面の遷移をグラフィカルに構築できるようになります。

 ストーリーボードでは、個々の画面を構成する「ビュー」と「ビューコントローラ」の組み合わせを、「Scene」(シーン)として管理しています。シーンからシーンへの切り替え時の視覚効果を「Segue」(セグエ)として設定できます。Segueとは、音楽でよく使用される用語で「楽曲などを切れ目なく続けて演奏する」といった意味になりますが、デフォルトで「スライドアップ」や「フリップ」といったシーン切り替え時のアニメーションが用意されています。

 実際に2つのシーンをSegueによって切り替えてみましょう。

1 ストーリーボードを使用するための準備

「File」メニューから「New」→「New Project」を選択して、テンプレートから「Single View Application」を選択し、「Use Storyboard」をチェックしたプロジェクトを作成します。例では「Product Name」を「StoryboardTest」に、ファイル名の接頭辞となる「ClassPrefix」を「Main」に設定しています。

[画像のクリックで拡大表示]

2 ストーリーボードを使用するための準備

ここでは「MainStoryboard.storyboard」という名前になります。エディタエリアにTARGETSの「Summary」を表示すると、メインのストーリーボードの設定である「Main storyboard」に「MainStoryboard」が設定されていることがわかります。

[画像のクリックで拡大表示]

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら