Xamarin.Mac のストーリーボードの概要

この記事では、Xamarin.Mac アプリでのストーリーボードの操作の概要について説明します。 ストーリーボードと Xcode の Interface Builder を使用したアプリの UI の作成と維持管理に関する内容が含まれています。

ストーリーボードを使用すると、Xamarin.Mac アプリのユーザー インターフェイスを開発できます。これには、ウィンドウの定義とコントロールだけでなく、異なるウィンドウ (セグエ経由) とビューステート間のリンクも含まれます。

Xcode のサンプル UI

この記事では、ストーリーボードを使用して Xamarin.Mac アプリのユーザー インターフェイスを定義する方法の概要について説明します。

ストーリーボードとは

ストーリーボードを使用すると、Xamarin.Mac アプリのすべての UI を 1 つの場所で定義し、個々の要素とユーザー インターフェイス間のすべてのナビゲーションを行うことができます。 Xamarin.Mac のストーリーボードは、Xamarin.iOS のストーリーボードとよく似た方法で動作します。 ただし、インターフェイスのイディオムが異なるため、 セグエ型 の異なるセットが含まれています。

シーンの操作

前述のように、ストーリーボードは、 ビュー コントローラーの機能概要に分類された、特定のアプリのすべての UI を定義します。 Xcode のインターフェイス ビルダーでは、これらの各コントローラーは独自の シーンに配置されます。

ビュー コントローラーの例

各シーンは、UI 内の各シーンを接続する一連の行 (Segues と呼ばれます) を持つ特定のビューとビュー コントローラーのペアを表し、リレーションシップを示します。 一部のセグエでは、1 つのビュー コントローラーに 1 つ以上の子ビューまたはビュー コントローラーを含める方法が定義されています。 その他のセグエでは、ビュー コントローラー間の切り替えを定義します (ポップオーバーやダイアログ ボックスの表示など)。

サンプル セグエ

注意すべき最も重要なことは、各セグエは、アプリの UI の特定の要素間のデータの何らかの形式のフローを表すということです。

ビュー コントローラーの操作

ビュー コントローラーは、Mac アプリ内の情報の特定のビューと、その情報を提供するデータ モデルの間の関係を定義します。 ストーリーボードの各最上位のシーンは、Xamarin.Mac アプリのコード内の 1 つのビュー コントローラーを表します。

スリップ ビュー コントローラーの例

このようにして、各ビュー コントローラーは、情報の視覚的表現 (ビュー) と、その情報を提示および制御するためのロジックの両方を自己完結型で再利用可能なペアリングです。

特定のシーン内で、通常は個々 .xib のファイルによって処理されていたすべての処理を実行できます。

  • サブビューとコントロール (ボタンやテキスト ボックスなど) を配置します。
  • 要素の位置と自動レイアウト制約を定義します。
  • コードに UI 要素を公開するためのワイヤアップ アクションとアウトレット。

セグエの操作

前述のように、Segues はアプリの UI を定義するすべてのシーン間のリレーションシップを提供します。 iOS のストーリーボードの作業に慣れている場合、iOS 用セグエは通常、全画面表示ビュー間の切り替えを定義していることがわかります。 これは macOS とは異なります。セグエは通常、"containment" (1 つの Scene は親 Scene の子) を定義します。

macOS では、ほとんどのアプリは、分割ビューやタブなどの UI 要素を使用して、同じウィンドウ内でビューをグループ化する傾向があります。 物理的な表示領域が限られているため、画面のオンとオフを切り替える必要がある iOS とは異なります。

macOS の封じ込め傾向を考えると、モーダル ウィンドウ、シート ビュー、ポップオーバーなど、 Presentation Segues が使用される状況があります。

Presentation Segues を使用する場合は、プレゼンテーション用の親ビュー コントローラーの メソッドをオーバーライド PrepareForSegue して、 変数と 変数を初期化し、表示されるビュー コントローラーにデータを提供できます。

デザインと実行時間

デザイン時 (Xcode のインターフェイス ビルダーで UI をレイアウトする場合)、アプリの UI の各要素は、その構成要素に分割されます。

  • シーン - 次で構成されます。
    • ビュー コントローラー - ビュー とそれらをサポートするデータの間のリレーションシップを定義します。
    • ビューとサブビュー - ユーザー インターフェイスを構成する実際の要素。
    • Containment Segues - シーン間の親子関係を定義します。
  • プレゼンテーション セグエ - 個々のプレゼンテーション モードを定義します。

この方法で各要素を定義することで、実行時に必要な場合にのみ、各要素の遅延読み込みを可能にします。 macOS では、プロセス全体が、開発者が最小限のバッキング コードを必要とする複雑で柔軟なユーザー インターフェイスを作成できるように設計されており、システム リソースの効率をできるだけ高めることができます。

ストーリーボードのクイック スタート

ストーリーボード クイック スタート ガイドでは、ストーリーボードを操作してユーザー インターフェイスを作成する主な概念を紹介するシンプルな Xamarin.Mac アプリを作成します。 サンプル アプリは、 コンテンツ領域インスペクター領域 を含む Spilt ビューで構成され、単純な [基本設定] ダイアログ ウィンドウが表示されます。 Segues を使用して、すべてのユーザー インターフェイス要素を結び付けます。

ストーリーボードの使用

このセクションでは、「Xamarin.Mac アプリでの ストーリーボードの操作 」の詳細について説明します。 シーンとビュー コントローラーとビューで構成される方法について詳しく説明します。 次に、シーンがセグエと結びついている方法を見ていきます。 最後に、カスタム セグエ型の操作について説明します。

複雑なストーリーボードの例

Xamarin.Mac アプリでストーリーボードを操作する複雑な例については、「 SourceWriter サンプル アプリ」を参照してください。 SourceWriter は、コードの完了とシンプルな構文の強調表示をサポートするシンプルなソース コード エディターです。

SourceWriter コード全体に詳細なコメントが付いていて、可能な場合は、重要な技術やメソッド、Xamarin.Mac ガイド ドキュメントの関連情報へのリンクが示されます。

まとめ

この記事では、Xamarin.Mac アプリでのストーリーボードの操作について簡単に説明しました。 ストーリーボードを使用して新しいアプリを作成する方法と、ユーザー インターフェイスを定義する方法について説明しました。 また、セグエを使用してさまざまなウィンドウとビューの状態間を移動する方法についても説明しました。