第10回 ストーリーボードで画面遷移|ドットインストールでiPhoneアプリ作成を勉強


前回(第9回 Xcodeストーリーボードについて|ドットインストールでiPhoneアプリ作成を勉強)はストーリーボードで画面にイロイロな部品を置いて、1ページのアプリを作ったので、今回はもうひとつビューを作り、ボタンを押すと画面遷移するアプリを作ります。

スポンサーリンク

アプリの内容

ボタンを押すと背景が赤から青に、もう一度ボタンを押すと元に戻る。

一つ目の画面を作成

画面の背景を選択し、ユーティリティータブを表示させる。
「Attribute Inspector」→「Background」を選択するとカラーパネルが表示されるので③部分をクリックし、クレヨンの中から赤を選択。
画面の背景色を変更

二つ目の画面を作成

ユーティリティーエリアの「Object library」をクリックし「View Controller」をストーリーボード条にドラッグ&ドロップ。
新規Viewの追加

ストーリーボード上とアウトラインにあたらしいViewが追加された。
新規Viewが追加された

二つ目画面の背景を選択し、ユーティリティータブを表示させる。
「Attribute Inspector」→「Background」を選択。クレヨンの中から青を選択。
二つ目の画面の背景を設定

ユーティリティーエリアの「Object library」から「Round Rect Button」を二つ目の画面にドラッグ&ドロップ。文字を「To Red」に変更。
二つ目の画面にボタンをドラッグ&ドロップ

画面遷移

一つ目の画面のボタンを「control」を押しながら二つ目の画面にドラッグ&ドロップ。
画面遷移を設定する

出てきた画面で「modal」を選択。
モーダルを選択

二つ目の画面からも同じように、二つ目の画面のボタンを「control」を押しながら二つ目の画面にドラッグ&ドロップ。出てきた画面で「modal」を選択。

お互いに矢印で繋がれた状態になる。

viewどうしがつながった

アプリの実行

Xcode左上の「Run」ボタンからアプリを実行。
ボタンをクリックすると次の画面が下から出てくるアプリの完成!
firstappの完成

今回のレッスン元ページ

#09 新しい画面を追加しよう | iOSプログラミング入門
#10 セグエで画面を接続する | iOSプログラミング入門


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク