複数画面のアプリを作る(2) - Segueで実装する

画面の配置と画面遷移の作成

今回は前回に引き続き、push segueを使ったアプリを作成する。前回の内容で画面遷移処理を定義する準備が整ったので、今回はいよいよ細かい作り込みを行っていこう。

なお、この記事から読み始めた読者は、先に前回記事「複数画面のアプリを作る(1) - Segueを理解する 」をご覧いただきたい。

リスト画面の作成

まず、Xcodeにてプロジェクトを立ち上げ、storyboardを表示する。そして、ライブラリペインのTable View Controllerをドラッグで配置する。このTable View Controllerはリスト画面を作成する際に使用する。

画面遷移の設定

次に、画面遷移を設定する。事前準備で作成した画面のTable View Cellを選択し、Controlキーを押しながらさきほど作成した画面にドラッグする。このTable View Cellはリストの1項目を指す。

ドラッグすると、Selection Segueが表示されるので、pushを選択する。

画面、ボタンの名称の設定

続いて、画面やボタンにタイトルを設定する。事前準備で作成した画面（以降、Top画面）のNaivgation Itemを選択する。そして、インスペクタペインの「Attributes inspector」にてTitleに「Top」、Back Buttonに「戻る」を入力する（名前は自由に決められる）。

同様にもうひとつの画面（以降、Send画面）のNavigation Itemを選択し、Titleに「Send」を入力する（名前は自由に決められる）。

リストの内容を作る

今度はリストの内容を設定する。

まず、Top画面のTable Viewを選択し、インスペクタペインの「Attributes inspector」にてContentを「Static Cells」に変更する。

次に、Table View Cellを選択し、インスペクタペインの「Attributes inspector」にてStyleを「Basic」に変更する。

さらに、リストの内容を設定する。Table View CellのLabelを選択し、インスペクタペインの「Attributes inspector」にてTextに「test」と入力する（名前は自由に決められる）。

加えて、Table View Cellの数を増やす。Table View Sectionを選択し、インスペクタペインの「Attributes inspector」にて、Rowを「3」に増やす（数は自由に決められる）。

Table View Cellを増やしたら、新しく追加したTable View Cellにも画面遷移とTextを追加すると、下記のような画面となる。

iPhoneアプリの実行

さあ、これでプログラムが完成した。左上がiPhoneシミュレーターとなっていることを確認し、三角ボタンを押して、プログラムを実行しよう。

iPhoneシミュレーターにて作成したiPhoneアプリ画面が表示される。リストを選択して、Send画面が表示されたら成功だ。

push segueを使ったアプリのまとめ

今回push segueの作成方法は「Static Cells」形式を使用した。

push segueの作成方法には２つあり、1つは「Static Cells」形式で、もう1つは「Dynamic Prototypes」形式だ。「Static Cells」のStaticは日本語で「静的な」という意味で、ここではプログラミングをせず、storyboardだけで画面を作成することができることを意味する。毎回同じ内容を表示するリストを作成する場合、非常に便利な方法だ。

もうひとつの「Dynamic Prototypes」形式はプログラミングが必要な方法となる。Dynamic(動的)の言葉どおり、動作によってリストの内容が変わる場合に使用する。

今回はプログラムに全く触れなかったが、もし物足りなく思った読者は下記の図を参考に、「Dynamic Prototypes」形式のpush segueアプリにも挑戦してみて欲しい。

執筆者紹介

福島 賢治(FUKUSHIMA Kenji)

株式会社システムサポート 大阪支店 ビジネス推進課所属。コンシューマ向けゲーム会社を経て、現職。組み込み開発、Web開発やインフラ構築などに携わり、iOS系では自社アプリ「猫と学ぶ旅行英語 Lite(e-messe kanazawa 2011優良企画案賞)」の企画・開発にも携わる。

現在は、自社アプリ「マッププランニング」の開発を担当。また、iPadアプリ作成をテーマとした高校生向け教材も作成し、2012年関西大学高等部、2013年岸和田高校へ提供した。