Hello, iOS マルチスクリーン – 詳細

警告

iOS Designer は、Visual Studio 2019 バージョン 16.8 および Visual Studio 2019 for Mac バージョン 8.8 で非推奨とされ、Visual Studio 2019 バージョン 16.9 および Visual Studio for Mac バージョン 8.9 から削除されています。 iOS のユーザー インターフェイスについては、Xcode の Interface Builder が実行されている Mac で直接ビルドすることをお勧めします。 詳細については、「Xcode を使用したユーザーインターフェイスの設計」を参照してください。

クイックスタート チュートリアルでは、最初のマルチスクリーン Xamarin.iOS アプリケーションを構築し、実行しました。 次は、iOS のナビゲーションとアーキテクチャについて理解を深めましょう。

このガイドでは、iOS のアーキテクチャとナビゲーションにおけるモデル ビュー コントローラー (MVC) パターンとその役割について紹介します。 次にナビゲーション コントローラーを、iOS で使い慣れたナビゲーション エクスペリエンスを提供するために利用する方法について掘り下げ説明します。

モデル ビュー コントローラー (MVC)

「Hello, iOS」チュートリアルでは、iOS アプリケーションには、ウィンドウにコンテンツ ビュー階層を読み込む処理を行うウィンドウが 1 つのみあることを学びました。 2 つ目の Phoneword チュートリアルでは、以下の図のように、アプリケーションに 2 つ目の画面を追加し、一部のデータ (電話番号の一覧) を 2 つの画面間で渡しました。

この例では、1 つ目の画面でデータが収集され、1 つ目のビュー コントローラーから 2 つ目に渡され、2 つ目の画面に表示されました。 この画面の分離、ビュー コントローラー、およびデータは、モデル ビュー コントローラー (MVC) パターンに従っています。 以降のセクションでは、MVC パターンの利点、コンポーネント、Phoneword アプリケーションで使用する方法について説明します。

MVC パターンの利点

モデル ビュー コントローラーは設計パターンです。つまり、コードの一般的な問題やユース ケースに再利用可能なソリューションです。 MVC は、グラフィカル ユーザー インターフェイス (GUI) が含まれるアプリケーションのアーキテクチャです。 アプリケーション内のオブジェクトに、モデル (データまたはアプリケーション ロジック)、ビュー (ユーザー インターフェイス)、コントローラー (分離コード) という 3 つの役割のいずれかを割り当てます。 次の図は、3 つの MVC パターンとユーザー間の関係を示しています。

MVC パターンを使用すると、GUI アプリケーションの各部分を論理的に分けることができ、コードとビューを再利用しやすくなります。 3 つの各役割について詳しく見てみましょう。

Note

大枠でとらえると、MVC パターンは ASP.NET ページや WPF アプリケーションの構造と似ています。 これらの例では、ビューは、実際には UI を説明する処理を担当するコンポーネントです。ASP.NET では ASPX (HTML) ページ、WPF アプリケーションでは XAML に対応します。 コントローラーは、ビューの管理を担当するコンポーネントです。ASP.NET または WPF ではコード分離に対応します。

モデル

通常、モデル オブジェクトは、ビューに表示または入力されるデータのアプリケーション固有の表現です。 多くの場合、モデルは大まかに定義されています。たとえば、Phoneword_iOS アプリでは、(文字列の一覧として表現される) 電話番号の一覧はモデルです。 クロスプラットフォーム アプリケーションを構築していた場合は、iOS アプリケーションと Android アプリケーション間で PhonewordTranslator コードを共有することもできます。 この共有コードはモデルと考えることもできます。

MVC は、モデルのデータの永続性とアクセスをまったく認識していません。 つまり、MVC は、データの種類やデータの保存方法に配慮せず、データの表現方法のみに配慮しています。 たとえば、データを SQL データベースに格納する方法、何らかのクラウド ストレージ メカニズムに保存する方法、または単に List<string> を使用する方法を選択できます。 MVC の目的のために、データ表現自体のみがパターンに含まれます。

場合によっては、MVC のモデル部分は空の可能性があります。 たとえば、電話の翻訳機能のしくみ、機能を作成した理由、バグを報告する窓口について説明する何らかの静的ページをアプリに追加する場合があります。 このようなアプリ画面は、ビューとコントローラーを使用して作成されますが、実際のモデル データはありません。

Note

資料によっては、MVC パターンのモデル部分は、UI に表示されるデータだけでなく、アプリケーション バックエンド全体を指すことがあります。 このガイドでは、モデルの最新の解釈を使用しますが、違いは特に重要ではありません。

表示

ビューは、ユーザー インターフェイスのレンダリングを担当するコンポーネントです。 MVC パターンを使用するほぼすべてのプラットフォームで、ユーザー インターフェイスは複数ビューの階層で構成されます。 MVC のビューは、階層の最上位に単一のビュー (ルート ビューと呼ばれます) があり、その下位に任意の数の子ビュー (サブビューと呼ばれます) があるビュー階層と考えることができます。 iOS では、画面のコンテンツ ビュー階層は MVC のビュー コンポーネントに対応します。

コントローラー

コントローラー オブジェクトは、すべてのものをまとめるコンポーネントです。iOS では、UIViewController で表現されます。 コントローラーは、画面または一連のビューのバッキング コードと考えることができます。 コントローラーは、ユーザーからの要求をリッスンし、適切なビュー階層を返す処理を担当します。 また、ビューからの要求 (ボタンのクリック、テキストの入力など) をリッスンし、適切な処理、ビューの変更、ビューの再読み込みを実行します。 コントローラーは、アプリケーションに存在する任意のバッキング データ ストアからモデルを作成または取得する処理や、そのデータを使用してビューを作成する処理も担当します。

また、コントローラーは他のコントローラーを管理することもできます。 たとえば、別の画面を表示する必要がある場合や、コントローラーのスタックを管理して順序と切り替えを監視する必要がある場合に、あるコントローラーが別のコントローラーを読み込むことがあります。 次のセクションでは、他のコントローラーを管理するナビゲーション コントローラーという特殊な種類の iOS ビュー コントローラーの例を紹介します。

ナビゲーション コントローラー

Phoneword アプリケーションでは、複数の画面間のナビゲーションを管理するためにナビゲーション コントローラーを使用しました。 ナビゲーション コントローラーは、UINavigationController クラスで表現される特殊な UIViewController です。 ナビゲーション コントローラーでは、単一のコンテンツ ビュー階層を管理するのではなく、他のビュー コントローラーと独自の特殊なコンテンツ ビュー階層を、タイトル、戻るボタンなどのオプション機能を含むナビゲーション ツールバー形式で管理します。

ナビゲーション コントローラーは iOS アプリでは一般的であり、以下のスクリーンショットの設定アプリのような定番の iOS アプリケーションのナビゲーションを行います。

ナビゲーション コントローラーには、主に次の 3 つの機能があります。

• 転送ナビゲーション用のフック機能: ナビゲーション コントローラーは、コンテンツ ビュー階層がナビゲーション スタックにプッシュされる階層ナビゲーションの象徴を使用しています。 ナビゲーション スタックは、積み重ねたトランプと考えることができます。次の図のように、一番上のカードのみが見えます。

  

• オプションの戻るボタン機能: 新しい項目をナビゲーション スタックにプッシュすると、タイトル バーに戻るボタンが自動的に表示されます。ユーザーはこのボタンを押して戻る操作を行うことができます。 戻るボタンを押すと、ナビゲーション スタックから現在のビュー コントローラーがポップされ、前のコンテンツ ビュー階層がウィンドウに読み込まれます。

  

• タイトル バー機能: ナビゲーション コントローラーの上部はタイトル バーと呼ばれます。 次の図のように、ビュー コントローラーのタイトルを表示する処理を担当します。

  

ルート ビュー コントローラー

ナビゲーション コントローラーはコンテンツ ビュー階層を管理しないため、ナビゲーション コントローラー自体では何も表示しません。 その代わりに、ナビゲーション コントローラーはルート ビュー コントローラーと組み合わされています。

ルート ビュー コントローラーは、ナビゲーション コントローラーのスタックで最初のビュー コントローラーを表します。ルート ビュー コントローラーのコンテンツ ビュー階層は、ウィンドウに最初に読み込まれるコンテンツ ビュー階層です。 ナビゲーション コントローラーのスタックにアプリケーション全体を配置するには、Phoneword アプリの場合と同様に、ソースレス セグエをナビゲーション コントローラーに移動し、最初の画面のビュー コントローラーをルート ビュー コントローラーとして設定します。

その他のナビゲーション オプション

ナビゲーション コントローラーは、iOS でナビゲーションを処理する一般的な方法ですが、唯一のオプションではありません。 たとえば、タブ バー コントローラーでは、アプリケーションをさまざまな機能領域に分割でき、分割ビュー コントローラーでは、マスター/詳細ビューを作成できます。 これらの他のナビゲーション パラダイムをナビゲーション コントローラーと組み合わせると、iOS で多数の柔軟な方法でコンテンツを表示したり移動したりできます。

切り替えの処理

Phoneword チュートリアルでは、2 つの異なる方法で 2 つのコントローラー間の切り替えを処理しました。1 つ目はストーリーボードのセグエを使用する方法で、2 つ目はプログラムを使用する方法です。 これら 2 つのオプションについて、詳しく見てみましょう。

PrepareForSegue

表示アクションを使用してセグエをストーリーボードに追加するときに、2 つ目のビュー コントローラーをナビゲーション コントローラーのスタックにプッシュするように iOS に指示します。

セグエをストーリーボードに追加するだけで、画面間の簡単な切り替えを作成できます。 ビュー コントローラー間でデータを渡すには、PrepareForSegue メソッドをオーバーライドし、データ自体を処理する必要があります。

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);
    ...
}

iOS は、切り替えが発生する直前に PrepareForSegue を呼び出し、ストーリーボードで作成したセグエをメソッドに渡します。 この時点で、セグエの対象ビュー コントローラーを手動で設定する必要があります。 次のコードでは、対象ビュー コントローラーへのハンドルを取得し、適切なクラス (ここでは CallHistoryController) にキャストします。

CallHistoryController callHistoryController = segue.DestinationViewController as CallHistoryController;

最後に、CallHistoryController の PhoneHistory プロパティを詳細な電話番号の一覧に設定することで、ViewController の電話番号の一覧 (モデル) を CallHistoryController に渡します。

callHistoryController.PhoneNumbers = PhoneNumbers;

セグエを使用してデータを渡す完全なコードは次のとおりです。

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);

    var callHistoryController = segue.DestinationViewController as CallHistoryController;

    if (callHistoryController != null) {
         callHistoryController.PhoneNumbers = PhoneNumbers;
    }
 }

セグエなしのナビゲーション

コードで 1 つ目のビュー コントローラーから 2 つ目に遷移する処理は、セグエと同じですが、一部の手順は手動で実行する必要があります。 まず、this.NavigationController を使用して現在のスタックであるナビゲーション コントローラーの参照を取得します。 次に、ナビゲーション コントローラーの PushViewController メソッドを使用して、次のビュー コントローラーを手動でスタックにプッシュし、ビュー コントローラーとオプションに渡して、切り替えをアニメーション化します (true に設定します)。

次のコードは、Phoneword 画面から通話履歴画面への切り替えを処理します。

this.NavigationController.PushViewController (callHistory, true);

次のビュー コントローラーに切り替えする前に、this.Storyboard.InstantiateViewController を呼び出し、CallHistoryController のストーリーボード ID を渡すことで、手動でインスタンス化する必要があります。

CallHistoryController callHistory =
this.Storyboard.InstantiateViewController
("CallHistoryController") as CallHistoryController;

最後に、CallHistoryController の PhoneHistory プロパティを詳細な電話番号の一覧に設定することで、ViewController の電話番号の一覧 (モデル) を CallHistoryController に渡します。これはセグエを使用して切り替えを処理した場合と同様の方法です。

callHistory.PhoneNumbers = PhoneNumbers;

プログラムによる切り替えの完全なコードは次のとおりです。

CallHistoryButton.TouchUpInside += (object sender, EventArgs e) => {
    // Launches a new instance of CallHistoryController
    CallHistoryController callHistory = this.Storyboard.InstantiateViewController ("CallHistoryController") as CallHistoryController;
    if (callHistory != null) {
     callHistory.PhoneNumbers = PhoneNumbers;
     this.NavigationController.PushViewController (callHistory, true);
    }
};

Phoneword で導入されているその他の概念

Phoneword アプリケーションでは、このガイドでは説明していない概念がいくつか導入されています。 たとえば、次のような概念です。

• ビュー コントローラーの自動作成: Properties Pad でビュー コントローラーのクラス名を入力すると、iOS デザイナーは、クラスが存在するかどうかを確認し、ビュー コントローラー バッキング クラスを自動的に生成します。 この機能と他の iOS デザイナー機能の詳細については、「Introduction to the iOS Designer」(iOS デザイナーの概要) ガイドを参照してください。
• テーブル ビュー コントローラー – CallHistoryController テーブル ビュー コントローラーです。 テーブル ビュー コントローラーには、iOS でよく使われるレイアウトおよびデータ表示ツールであるテーブル ビューが含まれています。 テーブルはこのガイドで取り扱う範囲を超えているので触れません。 テーブル ビュー コントローラーの詳細については、「Working with Tables and Cells」(テーブルとセルの操作) ガイドを参照してください。
• ストーリーボード ID – ストーリーボード ID を設定すると、ストーリーボードにビュー コントローラーのコードビハインドを含む Objective-C のビュー コントローラー クラスが作成されます。 ここでは、ストーリーボード ID を使用して Objective-C クラスを検出し、ストーリーボードでビュー コントローラーのインスタンスを作成します。 ストーリーボード ID の詳細については、「Introduction to Storyboards」(ストーリーボードの概要) ガイドを参照してください。

まとめ

これで最初のマルチスクリーン iOS アプリケーションが完成しました。

このガイドでは、MVC パターンについて紹介し、マルチスクリーン アプリケーションの作成に利用しました。 また、iOS ナビゲーションを強化するために利用できるナビゲーション コントローラーとその役割についても説明しました。 独自の Xamarin.iOS アプリケーションを開発するために必要な、強固な基盤ができました。

次は、「Introduction to Mobile Development」(モバイル開発の概要) ガイドと「Building Cross-Platform Applications」(クロスプラットフォーム アプリケーションの構築) ガイドを参照して、Xamarin を使用してクロスプラットフォーム アプリケーションを構築する方法を学びましょう。

関連リンク

• Hello, iOS (サンプル)
• iOS ヒューマン インターフェイス ガイドライン