Xamarin.Mac のストーリーボードの概要
この記事では、Xamarin.Mac アプリでのストーリーボード使用の概要について説明します。 ストーリーボードと Xcode の Interface Builder を使用したアプリの UI の作成と維持管理に関する内容が含まれています。
ストーリーボードを使用すると、Xamarin.Mac アプリのユーザー インターフェイスを開発できます。これには、ウィンドウの定義とコントロールだけでなく、異なるウィンドウとビューの状態間のリンク (セグエによる) も含まれます。
この記事では、ストーリーボードを使用して Xamarin.Mac アプリのユーザー インターフェイスを定義する方法の概要について説明します。
ストーリーボードとは
ストーリーボードを使用すると、Xamarin.Mac アプリのすべての UI を、 単一の場所で定義できます。これには、個々の要素とユーザー インターフェイス間のすべてのナビゲーションが含まれます。 Xamarin.Mac のストーリーボードは、Xamarin.iOS のストーリーボードとよく似た方法で動作します。 ただし、インターフェイスのイディオムが異なるため、"セグエ型" の異なるセットが含まれています。
シーンの使用
前述のように、ストーリーボードは、特定の アプリのすべての UI を、"ビュー コントローラー" の機能の概要に分割して定義します。 Xcode の Interface Builder では、これらのコントローラーはそれぞれ独自の "シーン" に存在しています。
各シーンは、特定のビューとビュー コントローラーのペアを表し、UI 内で各シーンを接続する一連の線 (セグエと呼ばれます)がそれらの関係を示します。 一部のセグエは、1 つのビュー コントローラーに 1 つ以上の子ビューまたはビュー コントローラーが含まれる関係を定義します。 その他のセグエは、ビュー コントローラー間の切り替えを定義します (ポップオーバーやダイアログ ボックスの表示など)。
注意すべき最も重要なことは、各セグエは、アプリの UI の特定の要素間での何らかの形式のデータのフローを表すということです。
ビュー コントローラーの使用
ビュー コントローラーは、Mac アプリ内の情報の特定のビューと、その情報を提供するデータ モデルとの間の関係を定義します。 ストーリーボードの最上位のシーンは、それぞれが Xamarin.Mac アプリのコード内の 1 つのビュー コントローラーを表します。
このように、各ビュー コントローラーは、情報の視覚的表現 (ビュー) と、その情報を提示および制御するためのロジックの両方の、自己完結型で再利用可能な組み合わせです。
特定のシーン内で、通常は個々 .xib のファイルによって処理されてきたすべての処理を実行できます。
- サブビューとコントロール (ボタンやテキスト ボックスなど) を配置します。
- 要素の位置と自動レイアウト制約を定義します。
- UI 要素を公開するためのアクションとアウトレットをコードに接続します。
セグエの使用
前述のように、セグエはアプリの UI を定義するすべてのシーン間の関係を提供します。 iOS のストーリーボードの操作に慣れている場合は、通常、iOS 用セグエが全画面表示ビュー間の遷移を定義していることがわかります。 macOS では、セグエは通常 "包含" (1 つのシーンが親シーンの子である) を定義するため、異なります。
macOS では、ほとんどのアプリは、分割ビューやタブなどの UI 要素を使用して、同じウィンドウ内でビューをグループ化する傾向があります。 物理的な表示領域が限られているため、画面のオンとオフを切り替える必要がある iOS とは異なります。
macOS が持つ包含の傾向を考えると、モーダル ウィンドウ、シート ビュー、ポップオーバーなど、"プレゼンテーション セグエ" が使用される状況があります。
プレゼンテーション セグエを使用する場合は、プレゼンテーションの親ビュー コントローラーの PrepareForSegue メソッドをオーバーライドして変数を初期化し、表示されているビュー コントローラーにデータを提供できます。
デザインと実行時間
デザイン時 (Xcode の Interface Builder で UI をレイアウトする場合)、アプリの UI の各要素は、その構成要素に次のように分割されます。
- シーン - 次の要素で構成されます。
- ビュー コントローラー - ビューと、ビューをサポートするデータの間の関係を定義します。
- ビューとサブビュー - ユーザー インターフェイスを構成する実際の要素。
- 包含セグエ - シーン間の親子関係を定義します。
- プレゼンテーション セグエ - 個々のプレゼンテーション モードを定義します。
この方法で各要素を定義することで、実行時に、必要な場合にのみ各要素を遅延読み込みすることが可能になります。 macOS では、プロセス全体において、開発者が必要最小限のバッキング コードで機能する複雑で柔軟なユーザー インターフェイスを作成できるように設計されいて、システム リソースを可能な限り効率的に使用できるようになっています。
ストーリーボードのクイック スタート
「ストーリーボード クイック スタート」ガイドでは、ストーリーボードを使用してユーザー インターフェイスを作成するための主な概念を紹介する単純な Xamarin.Mac アプリを作成します。 サンプル アプリは、"コンテンツ領域" と "インスペクター領域" を含む分割ビューで構成され、単純な [基本設定] ダイアログ ウィンドウが表示されます。 セグエを使用して、すべてのユーザー インターフェイス要素を結び付けます。
ストーリーボードの使用
このセクションでは、Xamarin.Mac アプリでの「ストーリーボードの使用」の詳細について説明します。 シーンと、それらがビュー コントローラーとビューで構成されるしくみについて詳しく説明します。 次に、シーンがどのようにセグエと結び付けられているのかを見ていきます。 最後に、カスタム セグエ型の使用について説明します。
複雑なストーリーボードの例
Xamarin.Mac アプリでストーリーボードを使用する複雑な例の例については、SourceWriter サンプル アプリを参照してください。 SourceWriter は、コードの完了とシンプルな構文の強調表示をサポートするシンプルなソース コード エディターです。
SourceWriter コード全体に詳細なコメントが付いていて、可能な場合は、重要な技術やメソッド、Xamarin.Mac ガイド ドキュメントの関連情報へのリンクが示されます。
まとめ
この記事では、Xamarin.Mac アプリでのストーリーボードの使用について簡単に説明しました。 ストーリーボードを使用して新しいアプリを作成する方法と、ユーザー インターフェイスを定義する方法について説明しました。 また、セグエを使用してさまざまなウィンドウとビューの状態間を移動する方法についても説明しました。