Start Developing iOS Apps Today(6)~チュートリアル:ストーリーボード

2014. 02. 24
●チュートリアル:ストーリーボード

このチュートリアルでは、最初のチュートリアル(チュートリアル:基礎)で作成したプロジェクトを利用します。
これまでのビュー、ビューコントローラ、アクション、そしてナビゲーションについて学んだものを使用して置いてみます。
インターフェイスの最初の設計工程に続いて、ToDoListアプリの主要なユーザインターフェイスフローの一部を作成し、既に作成したシーンに動作を追加します。

このチュートリアルでは以下の方法を教えます。

  • ユーザインターフェイスに柔軟性を追加するために自動レイアウトを採用
  • アプリのコンテンツとフローを定義するためにストーリーボードを使用
  • 複数のビューコントローラの管理
  • ユーザインターフェイスの要素にアクションを追加

このチュートリアルの全ての手順を完了すると、以下のような見た目のアプリになります。

ios_simulator_nav_bar_2x.png



●自動レイアウトの採用

作成した時にそうであったため、追加ToDo項目のシーンはポートレートモードで動作するように構成されています。
ユーザがデバイスを回転させるとどうなるでしょうか?
シミュレータでアプリを実行して試してください。


iOSシミュレータで回転する

  1. iOSシミュレータでアプリを起動します。

  2. Hardware > Rotate Leftを選択します。(または Command + 左カーソルキーを押します。)

    ios_simulator_landscape_2x.png

ご覧のように、テキストフィールドはかなり右に寄っています。
これを画面のほぼ中央に停止させます。
ポートレートモードの場合のように、テキストフィールドを全ての画面上で引き延ばす必要があります。
幸いなことに、Xcodeは自動レイアウトと呼ばれる強力な組み込みレイアウトエンジンを持っています。
自動レイアウトを使用すると、シーン内での要素の配置に意図を説明することで、レイアウトエンジンがその意図を実現するための最適な方法を決定します。
ある要素は他と関連して配置する必要がある、または然るべきサイズがある、あるいは2つの要素においてそれぞれに利用可能な空間を減らしたい時に最初に縮小するのはどちらか、といった制約規則を使用して意図を説明します。
追加ToDo項目のシーンのため、テキストフィールドの位置とサイズを設定する2セットの制約が必要です。

これらの制約の設定は、Interface Builderで容易に達成することができます。


自動レイアウトを使用したテキストフィールドの配置

  1. プロジェクトナビゲータでMain.storyboardを選択します。

  2. ストーリーボードでテキストフィールドを選択します。

  3. キャンバス上で、テキストフィールドからシーン上方の周囲に何も無い空間へ向かって、Control + ドラッグします。
    この空間はテキストフィールドのスーパービューです。

    ドラッグを話した場所にショートカットメニューが表示されます。

    autolayout_menu_2x.png

  4. ショートカットメニューから"Top Space to Top Layout Guide"を選択します。

    間隔制約は、テキストフィールドの上端とナビゲーションバーの間に作成します。

    別のショートカットメニューが表示された場合、例えばメニュー項目が"Leading Space to Container"となるのはおそらく別の方向にドラッグしたためで、画面上部に垂直にドラッグし直してください。
    Xcodeは、貴方が作ろうとしている制約の種類を理解するための方法としてドラッグの方向を使用しており、オブジェクトが制約によって関連付けされているかを理解するためにドラッグの始点と終点を使用しています。
    後ほど、使用可能な制約を確認するために別のドラッグ方向を試します。

  5. 試みが終わったら、テキストフィールドから右方向へ終端はスーパービュー内でControl + ドラッグをし、"Trailing Space to Container"制約を作成します。

  6. テキストフィールドから左方向へ終端はスーパービュー内でControl + ドラッグをし、"Leading Space to Container"制約を作成します。

これらの制約は、テキストフィールドの端とスーパービューとの間の間隔が変化しないように指定します。
これはデバイスの向きが変化した場合に、テキストフィールドがこれらの制約を自動的に満たすようにすることを意味します。

チェックポイント:アプリを実行します。
デバイスを回転させた場合に、テキストフィールドがデバイスの向きに応じて適切なサイズに伸張または収縮します。

期待した動作が得られなかった場合は、Xcodeの自動レイアウトのデバッグ機能が役立ちます。
Xcodeは上記の手順で説明した制約を設定しているので、テキストフィールドを選択した状態で、Editor > Resolve Auto Layout Issues > "Reset to Suggested Constraints"を選択します。
またはEditor > Resolve Auto Layout Issues > Clear Constraintsを選択してテキストビュー上の全ての制約を削除し、再度上記手順に従って試してください。

ios_simulator_landscape_al_2x.png

まだ追加項目シーンはあまり行われていませんが、基本的なユーザインターフェイスが在り機能しています。
開始時にレイアウトを考慮していると、その上に構築するための確固たる基盤を持っていることが保証されます。



●2つ目のシーンの作成

これまではToDoリストに項目を追加することができるページを表すための、ビューコントローラによって管理される単一のシーンで作業してきました。
今、ToDoリスト全体を表示するシーンを作成する時が来ました。
幸いなことに、iOSには項目のリストをスクロール表示するために特別に設計された、テーブルビューと呼ばれる強力な組み込みクラスが付属しています。


ストーリーボードへテーブルビューをシーンに追加

  1. プロジェクトナビゲータでMain.storyboardを選択します。

  2. ユーティリティ領域でオブジェクトライブラリを開きます。
    (メニューコマンドでライブラリを開くには、View > Utilities > Show Object Libraryを選択します。)

  3. リストからTable View Controllerオブジェクトをドラッグし、追加ToDo項目シーンの左側のキャンバス上にドロップします。
    必要な場合はドラッグするために十分な空間を取得するために、キャンバスの右下にあるZoom Outボタンzoom_out_2x.png を使用することができます。

    キャンバスにドラッグしようとした際、テーブルビューが見えるのに何も起こらなかった場合は、おそらくビューコントローラではなくテーブルビューをドラッグしています。
    テーブルビューはテーブルビューコントローラによって管理される物の一つですが、パッケージ全体が必要なので、テーブルビューコントローラを検索してキャンバスにドラッグします。

これでToDo項目のリストを表示するものと、追加ToDo項目用の2つのシーンを持つことになりました。

two_scenes_2x.png

アプリ起動時にユーザが最初に目にするものをリストにするのが理にかなっているので、最初のシーンとしてテーブルビューコントローラを設定することによってあなたの意図をXcodeに伝えます。


初期シーンとしてテーブルビューコントローラを設定

  1. 必要に応じてキャンバスの左下にあるボタンoutline_view_toggle_2x.png を使用してアウトラインビューを開きます。

  2. アウトラインビューで新たに追加したテーブルビューコントローラを選択します。

  3. テーブルビューコントローラを選択した状態で、ユーティリティ領域で属性インスペクタinspector_attributes_2x_20140209113430cca.png を開きます。

  4. 属性インスペクタでIs Initial View Controllerオプションのチェックボックスを選択します。

    initial_view_controller_2x.png

    またはキャンバス上で直接、XYZAddToDoItemViewControllerからテーブルビューコントローラに初期シーンインジケータをドラッグすることもできます。

    テーブルビューコントローラはストーリーボードで初期ビューコントローラとして設定し、アプリ起動時に読む込む最初のシーンを作成します。

チェックポイント:アプリを実行します。
テキストフィールドを持つ追加ToDo項目シーンの代わりに、(行に分割するための多数の仕切り線があるが、各行にはコンテンツが無い画面の)空のテーブルビュー表示されるはずです。

ios_simulator_empty_table_view_2x.png



●テーブルビューに静的コンテンツを表示

データの格納についてまだ学んでいないので、ToDo項目の作成と格納、およびテーブルビューでそれらの表示を行うには時期尚早です。
しかしユーザインターフェイスのプロトタイプを作成するためには、実際のデータである必要はありません。
XcodeはInterface Builderでテーブルビューの静的コンテンツを作成することができます。
これはユーザインターフェイスがどのように振る舞うかを非常に簡単に確認でき、様々なアイデアを試す有益な方法です。


テーブルビューでの静的セルの作成

  1. インターフェイス用のアウトラインビューで、Table View Controller下のTable Viewを選択します。

  2. テーブルビューを選択した状態で、ユーティリティ領域の属性インスペクタinspector_attributes_2x_20140209113430cca.png を開きます。

  3. 属性インスペクタで、ContentオプションのポップアップメニューからStatic Cellsを選択します。

    テーブルビューには3つの空のテーブルビューセルが表示されます。

  4. アウトラインビューまたはキャンバス上で、一番上のセルを選択します。

  5. 属性インスペクタで、StyleオプションのポップアップメニューからBasicを選択します。

    Basicスタイルはラベルを含んでおり、Xcodeはテーブルセルでテキスト"Title"というラベルを作成します。

  6. アウトラインビューまたはキャンバス上で、ラベルを選択します。

  7. 属性インスペクタで、ラベルのテキストを"Title"から"Mow the Lawn"に変更します。
    結果を有効にするには、Enterキーを押すか、ユーティリティ領域の外側をクリックします。

    あるいは、ラベルをダブルクリックすることによって直接テキストを編集することもできます。

  8. 他のセルでも手順4〜7を繰り返し、ToDo項目にありそうな他のテキストを与えます。

  9. 画面を埋めるのに十分な項目分のセルを作成します。
    コピー&ペースト、またはOptionキーを押しながらセルをドラッグすることで、新しいセルを作成することができます。

チェックポイント:アプリを実行します。
Interface Builderで追加した、事前構成済みのセルを持つテーブルビューが表示されるはずです。
スクロール時に新しいテーブルビューがどうなるか確認してください。
シミュレートしているデバイスを回転させ、テーブルビューが適切にコンテンツをレイアウトするように既に構成されていることに気付くでしょう。
テーブルビューを使用することによって、無償で多くの動作を得られます。

ios_simulator_static_table_view_2x.png


完了したら、先に作成した最初のシーンにToDo項目のリストで、ユーザが新しいToDo項目を作成することができるように、このテーブルビューから誘導する方法を提供していきます。



●先へ誘導するセグエの追加

貴方はストーリーボードに構成された2つのビューコントローラを持っていますが、それらの間は接続されていません。
シーン間の遷移はセグエと呼ばれています。

セグエを作成する前に、シーンを構成する必要があります。
最初にナビゲーションコントローラでXYZToDoListViewControllerを包みます。
インタラクションの定義」で、ナビゲーションコントローラがナビゲーションバーを提供し、ナビゲーションスタックの追跡を保持するという説明を思い出してください。
XYZAddToDoItemViewControllerシーンに移行するために、このナビゲーションバーにボタンを追加します。


テーブルビューコントローラへのナビゲーションコントローラの追加

  1. アウトラインビューでTable View Controllerを選択します。

  2. ビューコントローラを選択した状態で、Editor > Embed In > Navigation Controllerを選択します。

Xcodeはストーリーボードに新しいナビゲーションコントローラを追加し、それに初期シーンを設定して、新しいナビゲーションコントローラと既存のテーブルビューコントローラとの間に関係が作成されます。
キャンバス上で2つのシーンを結ぶアイコンを選択すると、それがルートビューコントローラの関係であることが分かります。
これはナビゲーションバーの下に表示されるコンテンツのビューがテーブルビューになることを意味します。
アプリ内で表示する全てのコンテンツ(つまりToDoリストと追加ToDo項目シーンの両方のコンテナ)を保持するため、初期シーンはナビゲーションコントローラに設定されます。

チェックポイント:アプリを実行します。
テーブルビューの上に追加された空間が表示されるはずです。
これはナビゲーションコントローラによって提供されたナビゲーションバーです。

ios_simulator_static_table_view_with_nav_2x.png

これでナビゲーションバーに(ToDoリストへの)タイトルと(追加ToDo項目を追加するための)ボタンを追加できます。


ナビゲーションバーの設定

  1. アウトラインビューまたはキャンバス上で、Table View Controller下のNavigation Itemを選択します。

    ナビゲーションバーそれ自身はタイトルを持っていないので、ナビゲーションコントローラで現在表示されているビューコントローラから自身のタイトルを取得します。
    ナビゲーションバー上に直接設定するのではなく、(テーブルビューコントローラの)ToDoリストのナビゲーション項目を使用してタイトルを設定します。

  2. 属性インスペクタで、Title欄にMy To-Do Listと入力します。

  3. 必要に応じてオブジェクトライブラリを開きます。

  4. テーブルビューコントローラのナビゲーションバーの右端に、リストからBar Button Itemをドラッグします。

    ドラッグしたバーボタンアイテムは、テキスト"Item"を含むボタンが表示されます。

  5. アウトラインビューまたはキャンバス上で、Bar Button Itemを選択します。

  6. 属性インスペクタで、Bar Button Item項のIdentifierオプションを探します。
    IdentifierのポップアップメニューからAddを選択します。

    ボタンが追加ボタン(+)に変更されます。

チェックポイント:アプリを実行します。
現在ナビゲーションバーは、タイトルと追加ボタンを持っているはずです。
ボタンはまだ何も行いません。
次で用意します。

ios_simulator_nav_bar_2x_20140211152717226.png

貴方は追加ボタンで追加ToDo項目シーンを表示したいでしょう。
シーンは既に(最初のシーンとして作成して)構成されていますが、他のシーンと接続されていません。
Xcodeは簡単に追加ボタンをタップした時に他のシーンを表示するように設定することができます。


追加ボタンの設定

  1. キャンバス上で追加ボタンを選択します。

  2. ボタンから追加ToDo項目ビューコントローラにControl + ドラッグします。

    drag_from_add_button_2x.png

    ドラッグを終了した場所にAction Segueというタイトルのショートカットメニューが表示されます。

    action_segue_menu_2x.png

    Xcodeではユーザが追加ボタンをタップした時に、ToDoリストから追加ToDo項目ビューコントローラに遷移する際に、使用する必要があるセグエの種類を選択することができます。

  3. ショートカットメニューから"push"を選択します。

Interface Builderのナビゲーションバーで確認できますが、Xcodeはセグエを設定し、ナビゲーションコントローラに表示される追加ToDo項目ビューコントローラを構成します。

この時点で、プロジェクトにいくつかの警告が生じていることに気付くことでしょう。
後ほど、誤りを確認するためにIssueナビゲータを開きます。

al_issue_navigator_2x.png

ナビゲーションスタックに追加ToDo項目シーンを追加したため、現在ナビゲーションバーが表示されています。
このバーはテキストフィールドのフレームを下に移動していたため、以前に指定した自動レイアウトの制約が既に満たされていることを意味します。
幸いなことに、これを修正するのは簡単です。


自動レイアウトの制約の更新

  1. アウトラインビューまたはキャンバス上で、テキストフィールドを選択します。

  2. キャンバス上でResolve Auto Layout Issuesポップアップメニューal_resolve_issues_2x.png を開き、Update Constraintsを選択します。

    またはEditor > Resolve Auto Layout Issues > Update Constraintsを選択することもできます。

    制約が更新され、Xcodeの警告が消えます。

チェックポイント:アプリを実行します。
追加ボタンをクリックすると、テーブルビューから追加ToDo項目ビューコントローラに移動することができます。
プッシュセグエにナビゲーションコントローラを使用しているため、戻る移動は自動で処理されます。
これはbackボタンをクリックしてテーブルビューに戻れることを意味します。

ios_simulator_navigation_2x.png

プッシュナビゲーションは、項目を追加する際に想定した動作をしますが、必ずしも貴方が望むものになるとは限りません。
プッシュナビゲーションは、ユーザが選択したものに関する詳細情報を提供する場合の、ドリルダウンインターフェイス用に設計されています。
項目の追加を別の視点で見ると、ユーザが完全な自己完結型のいくつかのアクションを実行し、その後そのシーンからメインのナビゲーションに復帰するモーダル操作です。
このシーンの種類を提示する適切な方法はモーダルセグエです。


セグエのスタイルの変更

  1. アウトラインビューまたはキャンバス上で、テーブルビューコントローラから追加ToDo項目ビューコントローラへのセグエを選択します。

  2. 属性インスペクタで、StyleオプションのポップアップメニューからModalを選択します。

モーダルビューコントローラはナビゲーションスタックに追加されないので、テーブルビューコントローラのナビゲーションコントローラからナビゲーションバーを取得しません。
しかし貴方は視覚的な連続性をユーザに提供するために、ナビゲーションバーを維持したいでしょう。
モーダルモードで表示する時に追加ToDo項目ビューコントローラにナビゲーションバーを与えるには、独自のナビゲーションコントローラを組み込みます。


追加ToDo項目ビューコントローラへのナビゲーションコントローラの追加

  1. アウトラインビューでView Controllerを選択します。

  2. View Controllerを選択した状態で、Editor > Embed In > Navigation Controllerを選択します。

前と同じように、Xcodeはナビゲーションコントローラを追加し、ビューコントローラの上部にナビゲーションバーを表示します。
次に、このシーンにはCancelとDoneの2つのボタンだけでなくタイトルを追加するため、このバーを設定します。
後に、これらのボタンにアクションをリンクします。


追加ToDo項目ビューコントローラのナビゲーションバーの設定

  1. アウトラインビューまたはキャンバス上で、View Controller下のNavigation Itemを選択します。

    必要に応じて属性インスペクタinspector_attributes_2x_20140209113430cca.png を開きます。

  2. 属性インスペクタで、Title欄にAdd To-Do Itemと入力します。

    Xcodeがシーンを容易に識別できるように、ビューコントローラの説明を"View Controller"から"View Controller - Add To-Do Item"に変更します。
    説明はアウトラインビューに表示されます。

  3. 追加ToDo項目ビューコントローラのナビゲーションバーの右端に、オブジェクトライブラリからバーボタンアイテムをドラッグします。

  4. 属性インスペクタで、IdentifierオプションのポップアップメニューからDoneを選択します。

    ボタンのテキストが"Done"に変更されます。

  5. 追加ToDo項目ビューコントローラのナビゲーションバーの左端に、オブジェクトライブラリから別のバーボタンアイテムをドラッグします。

  6. 属性インスペクタで、IdentifierオプションのポップアップメニューからCancelを選択します。

    ボタンのテキストが"Cancel"に変更されます。

チェックポイント:アプリを実行します。
追加ボタンをクリックします。
追加項目シーンはまだ表示されますが、ToDoリストに戻るためのボタンはもはや無く、代わりに追加したDoneとCancel2つのボタンが表示されます。
これらのボタンにはまだアクションがリンクされておらず、クリックすることはできますが何も行われません。
新しいToDo項目の編集を完了もしくはキャンセルするボタン(と、ユーザをToDoリストに戻す)の設定は次に行います。

ios_simulator_cancel_done_2x.png



●カスタムビューコントローラの作成

任意のコードを記述する必要無く、この構成の全てを達成することができました。
追加ToDo項目ビューコントローラを完成させるための設定にはいくつかのコードが必要ですが、それを置く場所も必要です。
ちょうど今、Xcodeは追加ToDo項目ビューコントローラと、汎用ビューコントローラとしてテーブルビューコントローラの両方を設定しています。
カスタムコードのための場所を確保するには、これらの各ビューコントローラのサブクラスを作成し、それらサブクラスを使用するためのインターフェイスを設定する必要があります。

まず、追加ToDo項目ビューコントローラのシーンに取り組みます。
このビューコントローラはToDoリストに新しい項目を追加するシーンを制御するため、カスタムビューコントローラクラスはXYZAddToDoViewControllerと呼ぶことにします。


UIViewControllerのサブクラスの作成

  1. File > New > Fileを選択します(またはCommand + Nを押します)。

  2. 表示されるダイアログの左側で、iOS下のCocoa Touchテンプレートを選択します。

  3. Objective-C Classを選択し、Nextをクリックします。

  4. Class欄で、XYZ接頭辞の後にAddToDoItemと入力します。

  5. ポップアップメニューの"Subclass of"でUIViewControllerを選択します。

    クラスのタイトルが"XYZAddToDoItemViewController"に変更されます。
    Xcodeは、カスタムビューコントローラを作成して名付ける際、それを明確にして助けます。
    それは素晴らしいことなので、新しい名前をそのままにしておきます。

  6. "Also create XIB file"オプションが選択されていないことを確認してください。

  7. Nextをクリックします。

  8. 保存場所はデフォルトでプロジェクトのディレクトリになっています。
    そのままにしておきます。

  9. Groupオプションはデフォルトでアプリ名のToDoListになっています。
    そのままにしておきます。

  10. Targetsセクションはデフォルトでアプリが選択、アプリのテストは非選択になっています。
    これは完璧なので、そのままにしておきます。

  11. Createをクリックします。

これでカスタムビューコントローラのサブクラスを作成したので、汎用ビューコントローラの代わりにカスタムクラスを使用するようにストーリーボードに指示する必要があります。
ストーリーボードファイルは、アプリによって実行時に使用されるオブジェクトの設定です。
アプリの機構としては、ストーリーボードで始めたときの汎用ビューコントローラの代わりにカスタムビューコントローラを用いるのは十分スマートですが、貴方が何をしたいのかをストーリーボードに指示する必要があります。


シーンのビューコントローラとしてクラスを関連付けする

  1. プロジェクトナビゲータでMain.storyboardを選択します。

  2. 必要に応じて、アウトラインビューoutline_view_toggle_2x.png を開きます。

  3. アウトラインビューで、"View Controller - Add To-Do Item"ビューコントローラを選択します。

    "View Controller - Add To-Do Item"シーンの三角ボタンをクリックし、シーンのオブジェクトを表示します。
    その最初はビューコントローラである必要があります。
    選択するためにクリックします。
    シーン行がビューコントローラ行と異なるアイコンを持っていることに注意してください。

  4. ビューコントローラを選択した状態で、ユーティリティ領域のアイデンティティインスペクタinspector_identity_2x_201402130135484b9.png を開きます。

    アイデンティティインスペクタは、左から三番目のボタンをクリックした時に、ユーティリティ領域の上部に表示されます。
    クラスなどのオブジェクトのアイデンティティに関連する、ストーリーボード内のオブジェクトのプロパティを編集することができます。

    select_identity_inspector_2x.png

  5. アイデンティティインスペクタで、Classオプションのポップアップメニューを開きます。

    Xcodeが知っている全てのビューコントローラクラスのリストが表示されます。
    リストの最後にカスタムビューコントローラXYZAddToDoItemViewControllerがあります。
    Xcodeに指示するため、このシーンにビューコントローラを使用するよう選択します。

ストーリーボードは実行時、汎用UIViewControllerの代わりに(カスタムビューコントローラのサブクラスである)XYZAddToDoItemViewControllerのインスタンスを作成します。
Xcodeは追加ToDo項目ビューコントローラのシーンの説明を"View Controller – Add To-Do Item"から"Add To Do Item View Controller – Add To-Do Item"に変更していることに注意してください。
Xcodeは現在このシーンのためにカスタムビューコントローラを使用しているを知り、ストーリーボードで何が起こっているかを容易に理解するためにカスタムクラス名を解釈します。

そしてテーブルビューコントローラも同様に行います。


UITableViewControllerのサブクラスの作成

  1. File > New > Fileを選択します(またはCommand + Nを押します)。

  2. 左側でiOS下のCocoa Touchを選択し、そしてObjective-C Classを選択します。
    このチュートリアルの最後の手順以来クラスを作成していなければ、おそらく既に選択されています。

  3. Nextをクリックします。

  4. Class欄でToDoListと入力します。
    Xcodeがクラス接頭辞として置いているXYZと、作成するものの種類であるViewControllerの間に挿入ポイントがあることに注意してください。

  5. "Subclass of"のポップアップメニューでUITableViewControllerを選択してください。

  6. "Also create XIB file"オプションが選択されていないことを確認してください。

  7. Nextをクリックします。

    保存場所はデフォルトでプロジェクトのディレクトリになっています。
    そのままにしておきます。

  8. Groupオプションはデフォルトでアプリ名のToDoListになっています。
    そのままにしておきます。

  9. Targetセクションはデフォルトでアプリが選択、アプリのテストは非選択になっています。
    これは完璧なので、そのままにしておきます。

  10. Createをクリックします。

再度、ストーリーボード内のカスタムテーブルビューコントローラであるXYZToDoListViewControllerの設定を確認する必要があります。


ストーリーボードの設定

  1. プロジェクトナビゲータでMain.storyboardを選択します。

  2. 必要に応じてアウトラインビューを開きます。

  3. アウトラインビューでテーブルビューコントローラを選択し、ユーティリティ領域でアイデンティティインスペクタinspector_identity_2x_201402130135484b9.pngを開きます。

  4. アイデンティティインスペクタで、ClassオプションのポップアップメニューからXYZToDoListViewControllerを選択します。

これでビューコントローラにカスタムコードを追加する準備ができました。



●戻る移動をするセグエで巻き戻す

プッシュとモーダルのセグエに加えて、Xcodeはアンワインドセグエも提供しています。
このセグエはユーザが特定のシーンから以前のシーンに戻ることができ、ユーザがそれらのシーン間を移動する時に実行される独自のコード追加するための場所を提供しています。
XYZAddToDoItemViewControllerからXYZToDoListViewControllerに戻る移動にアンワインドセグエを使用することができます。

アンワインドセグエは行き先のビューコントローラ(貴方が巻き戻ししたいビューコントローラ)にアクションメソッドを追加することによって作成されます。
巻き戻すことができるメソッドはアクション(IBAction)を返し、パラメータとしてストーリーボードセグエ(UIStoryboardSegue)を渡す必要があります。
XYZToDoListViewControllerに巻き戻りたい場合、XYZToDoListViewControllerのインターフェイスと実装に、このフォーマットでアクションメソッドを追加する必要があります。


XYZToDoListViewControllerに巻き戻す

  1. プロジェクトナビゲータでXYZToDoListViewController.hを開きます。

  2. @interface行の後に以下のコードを追加します。

    - (IBAction)unwindToList:(UIStoryboardSegue *)segue;

  3. プロジェクトナビゲータでXYZToDoListViewController.mを開きます。

  4. @implementation行の後に以下のコードを追加します。

    - (IBAction)unwindToList:(UIStoryboardSegue *)segue
    {

    }

アンワインドアクションには望む名前を付けることができます。
unwindToList:を呼び出すと、巻き戻す場所に明確に行くとこができます。
将来のプロジェクトのために同じような命名規則を採用するので、アクション名は巻き戻って行く場所を明確にします。

今のところ、このメソッドの実装は空のままにしておきます。
後ほど、ToDoリストに項目を追加するためにXYZAddToDoItemViewControllerからデータを取得する際に、このメソッドを使用します。

アンワインドセグエを作成するには、ソースビューコントローラであるXYZAddToDoItemViewContorllerのドック内にあるExitアイコンを介して、unwindToList:アクションにCancelとDoneボタンをリンクします。


unwindToList:アクションへのボタンのリンク

  1. プロジェクトナビゲータでMain.storyboardを選択します。

  2. キャンバス上で、追加ToDo項目シーンのCancelボタンからドック内にあるExit項目にControl + ドラッグします。

    drag_to_exit_icon_2x.png

    シーンドックにExit項目が表示されていなく、代わりにシーンの説明が表示されている場合は、表示されるまでキャンバス上のZoom In zoom_in_2x.png ボタンをクリックしてください。

    ドラッグを終了した場所にメニューが表示されます。

  3. ショートカットメニューからunwindToList:を選択します。

    これはXYZToDoListViewController.mファイルにアクションを追加したことになります。
    これはCancelボタンをタップした時にセグエが巻き戻り、このメソッドが呼び出されることを意味します。

  4. キャンバス上で、XYZAddToDoItemViewControllerシーンのDoneボタンからドック内にあるExit項目にControl + ドラッグします。

  5. ショートカットメニューからunwindToList:を選択します。

CancelとDoneボタンの両方に同じアクションを使用していることに注意してください。
次のチュートリアルで、アンワインドセグエを処理するためのコード記述する際に、2つの異なる状況を区別します。

チェックポイント:アプリを実行します。
起動するとテーブルビューが表示されますが、そこにデータはありません。
追加ボタンをクリックすると、XYZToDoListViewControllerからXYZAddToDoItemViewControllerに移動することができます。
テーブルビューに戻る移動をするためのCancelとDoneボタンをクリックすることもできます。

何故データが表示されないのでしょうか?
テーブルビューには静的または動的にデータを取得する2つの方法があります。
テーブルビューのコントローラが必要なUITableViewDataSourceメソッドを実装する際、静的データがInterface Builderで構成されているかどうかに関わらず、テーブルビューは表示するためのデータをビューコントローラに要求します。
XYZToDoListViewController.mを見ると、numberOfSectionsInTableView:tableView:numberOfRowsInSection:、そしてtableView:cellForRowAtIndexPath:の3つのメソッドが実装されていることに気付くでしょう。
これらのメソッドの実装をコメントアウトすることによって、再び表示するために静的データを取得することができます。
後にお好みで試してみてください。



●要約

この時点で、アプリのインターフェイスの開発が終わりました。
ToDoリストに項目を追加するものとリストを表示するものの2つのシーンを持ち、その間を移動することができます。
次にユーザが新しいToDo項目を追加し、リストに表示する機能を実装します。
次のモジュールは、この動作を実装するためのデータの操作を扱います。



参考文献

Apple/Start Developing iOS Apps Today

0 CommentsPosted in 資料





QuietControl 30 wireless headphones
0 Comments
Leave a comment
管理者にだけ表示を許可する
Top
0 Trackbacks
Top
Calendar
04 | 2017/05 | 06
Sun Mon Tue Wed Thu Fri Sat
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
Recent Articles
iTunes


Swift
Categories
Tips
Profile

水月杏香

Author:水月杏香
永遠の初心者プログラマ。

Wish List
WACOM


ARC
Technical Q&A
情報プロパティリストキー
Start Developing iOS Apps Today
BOSE

QuietControl 30 wireless headphones
Reference
NSApplicationDelegateプロトコル
NSArrayクラス
NSAutoreleasePoolクラス
NSBundleクラス
NSBundle UIKit追加分
NSCalendarクラス
NSCoderクラス
NSCodingプロトコル
NSCopyingプロトコル
NSDataクラス
NSDateクラス
NSDateFormatterクラス
NSDictionaryクラス
NSEntityDescriptionクラス
NSEnumeratorクラス
NSErrorクラス
NSExceptionクラス
NSFetchRequestクラス
NSFileHandleクラス
NSFileManagerクラス
NSIndexPathクラス
NSIndexPath UIKit追加分
NSKeyedArchiverクラス
NSKeyedUnarchiverクラス
NSKeyValueCodingプロトコル
NSLocaleクラス
NSManagedObjectクラス
NSManagedObjectContextクラス
NSManagedObjectModelクラス
NSMutableArrayクラス
NSMutableCopyingプロトコル
NSMutableDictionaryクラス
NSMutableSetクラス
NSNotificationクラス
NSNotificationCenterクラス
NSNullクラス
NSNumberクラス
NSObjectクラス
NSObject UIKit追加分
NSObjectプロトコル
NSPersistentStoreクラス
NSPersistentStoreCoordinatorクラス
NSPredicateクラス
NSPropertyListSerializationクラス
NSRunLoopクラス
NSSetクラス
NSStringクラス
NSString UIKit追加分
NSTimerクラス
NSTimeZoneクラス
NSURLクラス
NSURLProtectionSpaceクラス
NSURLRequestクラス
NSUserDefaultsクラス
NSValueクラス

UIActionSheetクラス
UIActionSheetDelegateプロトコル
UIActivityIndicatorViewクラス
UIAlertViewクラス
UIAlertViewDelegateプロトコル
UIApplicationクラス
UIApplicationDelegateプロトコル
UIBarButtonItemクラス
UIBarItemクラス
UIButtonクラス
UIColorクラス
UIControlクラス
UIDatePickerクラス
UIDeviceクラス
UIEventクラス
UIFontクラス
UIGestureRecognizerクラス
UIImageクラス
UIImageViewクラス
UIKit Function
UILabelクラス
UINavigationControllerクラス
UINavigationItemクラス
UIPickerViewクラス
UIPickerViewDataSourceプロトコル
UIPickerViewDelegateプロトコル
UIPinchGestureRecognizerクラス
UIResponderクラス
UIScreenクラス
UIScrollViewクラス
UISearchBarクラス
UISearchBarDelegateプロトコル
UISegmentedControlクラス
UISliderクラス
UISwipeGestureRecognizerクラス
UISwitchクラス
UITableViewクラス
UITableViewCellクラス
UITableViewControllerクラス
UITableViewDataSourceプロトコル
UITableViewDelegateプロトコル
UITapGestureRecognizerクラス
UITextFieldクラス
UITextFieldDelegateプロトコル
UITextInputTraitsプロトコル
UITextViewクラス
UITextViewDelegateプロトコル
UIToolbarクラス
UITouchクラス
UIViewクラス
UIViewControllerクラス
UIWebViewクラス
UIWebViewDelegateプロトコル
UIWindowクラス

AVAudioPlayerクラス
AVAudioPlayerDelegateプロトコル

CADisplayLinkクラス
CAEAGLLayerクラス
CALayerクラス

CGAffineTransform
CGBitmapContext
CGColor
CGColorSpace
CGContext
CGGeometry
CGImage
CGPath

EAGLContextクラス
EAGLDrawableプロトコル

Foundation Constants
Foundation Data Types
Foundation Functions

MPMediaItemクラス
MPMediaItemArtworkクラス
MPMediaPlaylistクラス
MPMediaPropertyPredicateクラス
MPMediaQueryクラス
MPMusicPlayerControllerクラス

Randomization Services

System Sound Services
Amazon


OpenGL ES
SQLite
Monthly Archives
Recent Comments
Recent TrackBacks
RSS Link
Visitors
QR Code
QR