*

Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[前編:モックの作成]

公開日: : 最終更新日:2014/05/18 Objective-C , ,


スポンサードリンク



iPhoneアプリの画面遷移と言えば、真っ先に挙がるのが「ナビゲーションコントローラ」なのですが
本エントリーでは、敢えて各画面(シーン)をセグエで接続することで実現します。

Xcode5のテンプレートには「Utility Application」が存在しており
これを利用すれば2画面間の遷移が始めから実装されていますが、
本エントリーでは、敢えて「Single View Application」テンプレートから
この画面遷移を実現します。

利用しているXcodeはXcode5(5.1)となります。

当然ですが、画面遷移するだけでは面白くないので、画面間でデータの受け渡しも行ってみます。
これについては「[後編:データの受け渡し]」で記載させていただきます。

本エントリーの内容は以下の通りとなります。

  1. シーンの追加
  2. 各シーンをセグエで接続
  3. ナビゲーションバーの追加
  4. アプリの動作確認

 

1 シーンの追加

プロジェクトの作成

作業を始める前にプロジェクトを作成します。
「Product Name」はSequeSample、「Single View Application」テンプレートのiPhoneを対象としたプロジェクトを作成してください。

シーンの追加

アプリ起動時に表示される初期画面にはTextViewとButtonを2つとTextFieldとLabelを配置してください。
各ボタンを押すと異なる画面が表示されるようになる予定です。

TextViewとTextFieldは[後編:データの受け渡し]で利用する予定ですが
TextViewのデフォルトのテキストは削除しておいてください。

初期画面の編集

まずは初期画面に前述のコンポーネントを以下の様に配置してください。
細かい座標、サイズ等は適当でOKです。
スクリーンショット 2014-04-20 20.53.00

画面遷移先の2画面の作成

画面を2つ作成します。

まず1つめを作成します。ViewControllerをドロップします。
スクリーンショット 2014-04-20 20.57.28

ドロップ後は以下の様な画面になると思います。
スクリーンショット 2014-04-20 20.58.20

この新しく追加された画面にLabelを4個とTextFeildを1個配置して

各コンポーネントのTextを以下の様にしてください。
スクリーンショット 2014-04-20 21.08.56

2つめの画面も同じ様に、ViewControllerをドロップして作成してください。
スクリーンショット 2014-04-20 21.16.35

この新しく追加された画面にLabelを4個とTextFeildを1個配置して
各コンポーネントのTextを以下の様にしてください。
スクリーンショット 2014-04-20 21.21.28

各画面のコントローラの追加と設定

各画面のコントローラの名前

「朝の画面」のコントローラの名前はMorningViewController、superクラスはUIViewController、
「夜の画面」のコントローラの名前はNightViewController、superクラスはUIViewController、
superクラスがUIViewControllerである理由は、ごく一般的な画面だからです。

各画面のコントローラの作成

まずはMorningViewControllerを作成します。

SequeSampleを選択し、マウスの右クリックメニューから「New File…」をクリックします。
スクリーンショット 2014-05-18 18.02.00

Objective-C classを選択し「Next」ボタンをクリックします。
スクリーンショット 2014-04-21 15.14.43

ClassにはMorningViewControllerを、sub class ofにはUIViewControllerを指定して「Next」ボタンをクリックします。
スクリーンショット 2014-04-21 15.16.54

最後の画面は「create」を押すだけです。これでMorningViewControllerが作成できました。
スクリーンショット 2014-04-21 15.20.39

同様の手順でNightViewControllerを作成してください。

各画面のコントローラと画面の関連付け

以下の画像の赤枠の部分をクリックすると画面とコントローラの関連付けが状態となります。
スクリーンショット 2014-05-18 18.04.05

画面の枠が青く表示されている状態になればOKです。
スクリーンショット 2014-05-18 18.05.33

この状態で、以下の画像の赤枠のClassにコントローラを指定します。
今の画面は「朝の画面」ですので、MorningViewControllerを指定してください。
スクリーンショット 2014-05-18 18.07.43

同じように「夜の画面」にはNightViewControllerを指定してください。

2 各シーンをセグエで接続

セグエの接続を行います。

初期画面から「朝の画面」への接続

「シーン1」ボタンを選択後、「control」キーを押しながらドラッグして「朝の画面」に線をのばした後マウスのクリックをやめます。
スクリーンショット 2014-04-20 21.23.21

この時、遷移先画面の表示エフェクトの選択肢が表示されますので、modalを選択してください。
pushは次のビューを右から左に出したい時。
modalは次のビューを下から上に出したい時、
customはカスタムエフェクトを利用したい時に選択します。
実際にはエフェクトだけではないのですが、「ナビゲーションコントローラ」を併用していない場合はエフェクトの違いだけです。
スクリーンショット 2014-04-20 21.24.22

 

ストーリーボードは以下のようになりました。
スクリーンショット 2014-04-21 13.48.47

先ほど追加したセグエの矢印が「夜の画面」と交錯しているので画面を移動します。
各画面の上の方をクリックすると画面枠が青くなります。この状態になるとドラッグして移動できます。
スクリーンショット 2014-04-21 13.51.47

なお、「各画面のコントローラと画面の関連付け」の時にクリックした場所のクリックでも同様の状態となります。
画面枠が青くなった画像
スクリーンショット 2014-04-21 13.53.34

移動するとセグエが見やすくなりました。
スクリーンショット 2014-04-21 13.55.01

最後にセグエのidentifierにShowMorningを設定してください。
蛇足かとは思いますが、セグエを識別するための文字列となります。
スクリーンショット 2014-05-18 18.23.25

初期画面から「夜の画面」の接続

「朝の画面」と同じ要領でセグエを追加してください。
セグエのidentifierにShowNightを設定してください。

追加後の画面は以下の様になると思います。
スクリーンショット 2014-04-21 14.28.25

3 ナビゲーションバーの追加と戻る処理の追加

ナビゲーションバーの追加

iPhoneアプリで画面遷移が存在する物の多くはナビゲーションコントローラを利用していることが多いです。
本エントリーでは、ナビゲーションコントローラは利用せずに
「夜の画面」と「朝の画面」に「NavigationBar」を配置して、
そこに「Navigation Item」を配置し、更に「Bar Button Item」を配置しこのボタンから前の画面に戻るようにします。

「朝の画面」に「NavigationBar」等を配置

まずは「朝の画面」に作業を行ってください。
「NavigationBar」を配置してください。
スクリーンショット 2014-04-21 14.36.37

「Navigation Item」に「Bar Button Item」を配置してください。
スクリーンショット 2014-04-21 14.41.37

「Bar Button Item」のテキストを”戻る”に変更してください。
「NavigationBar」のタイトルを「朝の画面」に変更して、「朝の画面」のラベルは削除してください。

この作業が終わった段階の画面は以下の様になります。
スクリーンショット 2014-04-21 14.53.28

「夜の画面」に「NavigationBar」等を配置

「朝の画面」に「NavigationBar」等を配置した時と同様の操作をしてください。

この作業が終わった段階の画面は以下の様になります。
スクリーンショット 2014-04-21 14.56.32

ナビゲーションバーに配置した戻るボタンの実装

画面上は「戻る」ボタンが設置されましたが、設置されただけでタップしても
前の画面に戻れるわけではありませんので、戻れるように処理を実装します。

と言っても、今実装している画面遷移は初期画面の上に「朝の画面」または「夜の画面」を
表示しているだけに等しいですので、各画面の「戻る」ボタンのタップイベントで自身を閉じるだけでOKです。
ナビゲーションバーに配置しているボタンにInterface Builderでイベントを追加します。

この内容に関しましては、「Xcode5で画面コンポーネントを利用するための基本」に詳細な説明がございます。

「戻る」ボタンを選択後、「control」ボタンを押しながら以下の様に接続線をのばします。
スクリーンショット 2014-04-21 18.13.17

その後表示される画面(画像の赤枠部分)で以下の様に選択、入力して、「Connect」ボタンをクリックしてください。
スクリーンショット 2014-04-21 18.12.35

これでMorningViewController.mに「戻る」ボタンがタップされたときのメソッドが追加されました。

追加されたメソッドには、何も処理はないですので、自画面を閉じるコードを追加します。
dismissViewControllerAnimatedの引数の指定内容は特に意味ないですが、閉じる時のアニメーションは行う、処理完了後の後処理は無しと指定していいます。

前編では、NightViewController.mの「戻る」ボタンも同じ処理にしたいので、同様な処理を追加してください。

4 アプリの動作確認

iPhoneアプリと言えるレベルではないですが・・・
とりあえず動作確認をして前編を終わります。

「初期画面」
スクリーンショット 2014-04-21 18.46.22

「シーン1」ボタンタップ時
スクリーンショット 2014-04-21 18.47.28

「シーン2」ボタンタップ時
スクリーンショット 2014-04-21 18.53.54

「朝の画面」と「夜の画面」の「戻る」ボタンタップ時にはちゃんと「初期画面」に戻りますね。
「朝の画面」と「夜の画面」のナビゲーションバーの位置がちょっとよろしくないですが・・・

以上で、「Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[前編:モックの作成]」は終了です。
「Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[後編:データのやり取り]」に続く。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcode5でInterface Builderの接続状態の確認と切断を行う。

「Xcode5で画面コンポーネントを利用するための基本」で本来説明すべき内容でしたが あちらのエン

記事を読む

Xcodeの使い方[エディタエリアのテキストエディタ]

「Xcodeの使い方」に引き続き「 Xcode5のエディタエリアの使い方[テキストエディタの使い方]

記事を読む

Xcode5でUnitTest(XCTestフレームワーク)を利用してみる。

Xcode5(iOS7対応バージョンの統合開発)を利用するので、当然言語はObjective-Cです

記事を読む

Objective-C(Xcode)でイメージのアニメーション表示を行う。

「Xcode5でイメージ(画像)を表示&操作する」では画面に表示されているイメージをタップし

記事を読む

Xcodeのユーティリティエリアの使い方[ソースファイル表示時]

本エントリーでは、Xcodeの「ユーティリティエリア」の使い方を説明させていただきます。 利用

記事を読む

Xcodeの使い方[ツールバー]

Xcode5(iOS7対応バージョンの統合開発)の「ツールバー」の使い方のエントリーとなります。

記事を読む

Xcode5でSchemeを利用する。[前編]

Xcode5の「Scheme」の作成方法や使い方のエントリーとなります。 思った以上に内容が多くな

記事を読む

Xcode5の「Auto Layout」機能の使い方[簡単な画面レイアウトを構成してみる。]

「基礎知識と制約(Align:アライメント)の設定方法」 で「Auto Layout」機能の利

記事を読む

no image

Xcode5のナビゲーションエリア[問題ナビゲータ]の使い方

Xcode5のナビゲーションエリアの使い方では、アプリ開発に最も不可欠は、プロジェクトとシンボルナビ

記事を読む

Xcode&Objective-Cの文字列処理をユニットテスト(XCTestフレームワーク)で確認する。[NSStringの定義、分割、検索]

文字列の処理、操作は、どの言語でプログラムを作成するにしても重要で欠かせないものです。 Obj

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑