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

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

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

リスト画面の作成

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

TableViewの配置

画面遷移の設定

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

segueの設定

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

push segueの設定

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

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

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

Navigationの設定

リストの内容を作る

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

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

Static Cellsを設定

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

Cellの設定

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

Cellの文字を設定

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

Cell数の変更

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

設定が終わったstoryboard

iPhoneアプリの実行

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

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

実行結果

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

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

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

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

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

push segueアプリのまとめ

執筆者紹介

福島 賢治(FUKUSHIMA Kenji)


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

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