iOS Designerの基本

  • [アーティクル]

このガイドでは、iOS 用の Xamarin Designerについて説明します。 iOS Designerを使用してコントロールを視覚的にレイアウトする方法、コードでコントロールにアクセスする方法、およびプロパティを編集する方法を示します。

警告

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 を実行している Mac 上で直接行う方法です。 詳細については、「Xcode を使用したユーザーインターフェイスの設計」を参照してください。

Xamarin Designer for iOS は、Xcode のインターフェイス ビルダーや Android Designerに似たビジュアル インターフェイス デザイナーです。 その多くの機能には、Visual Studio for Windows と Mac とのシームレスな統合、ドラッグ アンド ドロップ編集、イベント ハンドラーを設定するためのインターフェイス、カスタム コントロールをレンダリングする機能などがあります。

必要条件

iOS Designerは、windows Visual Studio for Mac および Visual Studio 2017 以降で使用できます。 Visual Studio for Windows では、iOS Designerは適切に構成された Mac ビルド ホストへの接続を必要としますが、Xcode を実行する必要はありません。

このガイドでは、はじめに ガイドで説明されている内容を理解していることを前提としています。

iOS Designerのしくみ

このセクションでは、iOS Designerを使用してユーザー インターフェイスを作成し、コードに接続する方法について説明します。

iOS Designerを使用すると、開発者はアプリケーションのユーザー インターフェイスを視覚的に設計できます。 ストーリーボードの概要ガイドで説明されているように、ストーリーボードには、アプリを構成する画面 (ビュー コントローラー)、それらのビュー コントローラーに配置されたインターフェイス要素 (ビュー)、およびアプリの全体的なナビゲーション フローが記述されています。

ビュー コントローラーには、iOS Designerのビジュアル表現と、関連付けられている C# クラスの 2 つの部分があります。

既定の状態では、ビュー コントローラーは機能を提供しません。コントロールを設定する必要があります。 これらのコントロールは、ビュー コントローラーのビュー (画面のすべてのコンテンツを含む四角形の領域) に配置されます。 ほとんどのビュー コントローラーには、ボタン、ラベル、テキスト フィールドなどの一般的なコントロールが含まれています。次のスクリーンショットは、ボタンを含むビュー コントローラーを示しています。

静的テキストを含むラベルなどの一部のコントロールは、ビュー コントローラーに追加でき、そのまま残すことができます。 ただし、多くの場合、コントロールはプログラムでカスタマイズする必要があります。 たとえば、上記で追加したボタンはタップされたときに何かを行う必要があるため、イベント ハンドラーをコードに追加する必要があります。

コード内のボタンにアクセスして操作するには、一意の識別子が必要です。 ボタンを選択し、 Properties Pad を開き、 その [名前 ] フィールドを "SubmitButton" などの値に設定して、一意の識別子を指定します。

[プロパティ] パッドでボタンの名前を設定する

ボタンに名前が付いたので、コードでアクセスできます。 しかし、これはどのように機能しますか?

Solution Pad で ViewController.cs に移動し、開示インジケーターをクリックすると、ビュー コントローラーのViewControllerクラス定義が 2 つのファイルにまたがることが明らかになり、それぞれに部分クラス定義が含まれています。

ViewController クラスを構成する 2 つのファイル: ViewController.cs と ViewController.designer.cs

  • ViewController.cs には、 クラスに関連するカスタム コードを設定する ViewController 必要があります。 このファイルでは、クラスは ViewController さまざまな iOS ビュー コントローラーのライフサイクル メソッドに応答し、UI をカスタマイズし、ボタン タップなどのユーザー入力に応答できます。

  • ViewController.designer.cs は、視覚的に構築されたインターフェイスをコードにマップするために iOS Designerによって作成された生成されたファイルです。 このファイルに対する変更は上書きされるため、変更しないでください。 このファイルのプロパティ宣言を使用すると、クラス内のViewControllerコードが、iOS Designerで設定されたコントロールに Name によってアクセスできるようになります。 ViewController.designer.cs を開くと、次のコードが表示されます。

namespace Designer
{
    [Register ("ViewController")]
    partial class ViewController
    {
        [Outlet]
        [GeneratedCode ("iOS Designer", "1.0")]
        UIKit.UIButton SubmitButton { get; set; }

        void ReleaseDesignerOutlets ()
        {
            if (SubmitButton != null) {
                SubmitButton.Dispose ();
                SubmitButton = null;
            }
        }
    }
}

プロパティ宣言はSubmitButton、ViewController.designer.cs ファイルだけでなく、クラス全体ViewControllerをストーリーボードで定義されているボタンに接続します。 ViewController.cs は クラスの一部をViewController定義するため、 にアクセスできますSubmitButton。

次のスクリーンショットは、IntelliSense が ViewController.cs の参照をSubmitButton認識するようになったことを示しています。

このセクションでは、iOS Designerでボタンを作成し、コードでそのボタンにアクセスする方法について説明しました。

このドキュメントの残りの部分では、iOS Designerの詳細について説明します。

iOS Designerの基本

このセクションでは、iOS Designerの各部分について説明し、その機能について説明します。

iOS Designerの起動

Visual Studio for Macで作成された Xamarin.iOS プロジェクトには、ストーリーボードが含まれます。 ストーリーボードの内容を表示するには、 Solution Pad で .storyboard ファイルをダブルクリックします。

iOS Designerで開く

iOS Designer機能

iOS Designerには、次の 6 つの主要なセクションがあります。

iOS DesignerのセクションiOS

  1. デザイン サーフェイス – iOS Designerのプライマリ ワークスペース。 ドキュメント領域に示すように、ユーザー インターフェイスを視覚的に構築できます。
  2. 制約ツール バー – フレーム編集モードと制約編集モードを切り替え、ユーザー インターフェイスで要素を配置する 2 つの異なる方法を使用できます。
  3. ツールボックス – コントローラー、オブジェクト、コントロール、データ ビュー、ジェスチャ認識エンジン、ウィンドウ、およびバーを一覧表示します。これは、デザイン サーフェイスにドラッグしてユーザー インターフェイスに追加できます。
  4. Properties Pad – ID、ビジュアル スタイル、アクセシビリティ、レイアウト、動作など、選択したコントロールのプロパティを表示します。
  5. ドキュメント アウトライン – 編集するインターフェイスのレイアウトを構成するコントロールのツリーを示します。 ツリー内の項目をクリックすると、iOS Designerでその項目が選択され、[プロパティ] パッドにそのプロパティが表示されます。 これは、深く入れ子になったユーザー インターフェイスで特定のコントロールを選択する場合に便利です。
  6. 下部ツール バー – iOS Designerでの .storyboard または .xib ファイルの表示方法 (デバイス、向き、ズームなど) を変更するためのオプションが含まれます。

ワークフローを設計する

インターフェイスへのコントロールの追加

コントロールをインターフェイスに追加するには、[ ツールボックス] からコントロールをドラッグし、デザインサーフェイスにドロップします。 コントロールを追加または配置する場合、垂直方向と水平方向のガイドラインでは、垂直方向の中心、水平方向の中心、余白など、一般的に使用されるレイアウト位置が強調表示されます。

デザイン画面では、ガイドラインによって一般的に使用されるレイアウト位置が強調表示されます

上の例の青い点線は、ボタンの配置に役立つ水平方向の中央の視覚配置ガイドラインを提供します。

コンテキスト メニュー コマンド

コンテキスト メニューは、デザイン画面と ドキュメント アウトラインの両方で使用できます。 このメニューには、選択したコントロールとその親に対するコマンドが用意されています。これは、入れ子になった階層のビューを操作する場合に役立ちます。

デザイン画面のコンテキスト メニュー デザイン画面

制約ツール バー

制約ツール バーが更新され、フレーム編集モード/制約編集モードトグルと、制約の更新/フレームの更新ボタンの 2 つのコントロールで構成されるようになりました。

フレーム編集モード/制約編集モード切り替え

以前のバージョンの iOS Designerでは、デザイン サーフェイスで既に選択されているビューをクリックすると、フレーム編集モードと制約編集モードが切り替えられていた。 ここで、制約ツール バーのトグル コントロールによって、これらの編集モードが切り替わります。

  • フレーム編集モード:
  • 制約編集モード:

[制約の更新] / [フレームの更新] ボタン

[制約の更新]/[フレームの更新]ボタンは、フレーム編集モード/制約編集モードトグルの右側にあります。

  • フレーム編集モードでは、このボタンをクリックすると、選択した要素のフレームが制約に合わせて調整されます。
  • 制約編集モードでは、このボタンをクリックすると、選択した要素の制約がフレームに合わせて調整されます。

下部のツール バー

下部のツール バーには、iOS Designerでストーリーボードまたは .xib ファイルを表示するために使用するデバイス、向き、ズームを選択する方法が用意されています。

デバイスと向き

展開すると、下部のツール バーに、現在のドキュメントに適用されるすべてのデバイス、向き、適応が表示されます。 クリックすると、デザイン 画面に表示されるビューが変更されます。

デバイスと向きを選択すると、iOS Designerがデザインをプレビューする方法のみが変わります。 現在の選択に関係なく、新しく追加された制約は、[ 特性の編集] ボタンを使用して指定しない限り、すべてのデバイスと向きに適用されます。

サイズ クラスを有効にすると、展開された下部のツール バーに [特徴の編集] ボタンが表示されます。 [特性の 編集 ] ボタンをクリックすると、選択したデバイスと向きで表されるサイズ クラスに基づいてインターフェイス バリエーションを作成するためのオプションが表示されます。 次に例を示します。

  • iPhone SE / Portrait が選択されている場合、ポップオーバーには、コンパクトな幅の通常の高さサイズ クラスのインターフェイス バリエーションを作成するためのオプションが用意されています。
  • iPad Pro 9.7" / 横 / 全画面表示が選択されている場合、ポップオーバーには、通常の幅、通常の高さのサイズ クラスのインターフェイス バリエーションを作成するためのオプションが用意されています。

ズーム コントロール

デザイン 画面では、いくつかのコントロールを使用したズームがサポートされています。

コントロールには、次のものが含まれます。

  1. ウィンドウのサイズに合わせて拡大
  2. 縮小します
  3. 拡大します
  4. 実際のサイズ (1:1 ピクセル サイズ)

これらのコントロールは、デザイン サーフェイスのズームを調整します。 実行時のアプリケーションのユーザー インターフェイスには影響しません。

プロパティ パッド

Properties Pad を使用して、コントロールの ID、ビジュアル スタイル、アクセシビリティ、および動作を編集します。 次のスクリーンショットは、ボタンの [プロパティ パッド ] オプションを示しています。

ボタンの Properties Pad ボタン

Properties Pad セクション

Properties Pad には、次の 3 つのセクションがあります。

  1. Widget – コントロールのメインプロパティ (名前、クラス、スタイル プロパティなど)通常、コントロールのコンテンツを管理するためのプロパティはここに配置されます。
  2. レイアウト – 制約やフレームなど、コントロールの位置とサイズを追跡するプロパティをここに一覧表示します。
  3. イベント – イベントとイベント ハンドラーは、ここで指定します。 タッチ、タップ、ドラッグなどのイベントの処理に便利です。イベントは、コード内で直接処理することもできます。

プロパティ パッドでのプロパティの編集

デザイン画面での視覚的な編集に加えて、iOS Designerでは Properties Pad でのプロパティの編集がサポートされています。 次のスクリーンショットに示すように、使用可能なプロパティは、選択したコントロールに基づいて変更されます。

ボタンのプロパティ

コントローラーのプロパティの表示 コントローラー

重要

Properties Pad の [Id] セクションに [モジュール ] フィールドが表示されるようになりました。 Swift クラスと相互運用する場合にのみ、このセクションに入力する必要があります。 これを使用して、名前空間が設定された Swift クラスのモジュール名を入力します。

既定値

Properties Pad の多くのプロパティには、値または既定値が表示されません。 ただし、アプリケーションのコードでは引き続きこれらの値が変更される可能性があります。 Properties Pad には、コードで設定された値は表示されません。

イベント ハンドラー

さまざまなイベントのカスタム イベント ハンドラーを指定するには、Properties Pad の [イベント] タブを使用します。 たとえば、次のスクリーンショットでは、メソッドは HandleClick ボタンの Touch Up Inside イベントを 処理します。

Properties Pad。ボタンにイベント ハンドラーが設定されていますされています

イベント ハンドラーを指定したら、対応するビュー コントローラー クラスに同じ名前のメソッドを追加する必要があります。 それ以外の場合は、 unrecognized selector ボタンがタップされたときに例外が発生します。

認識されないセレクター例外 認識

Properties Pad でイベント ハンドラーを指定すると、iOS Designerは対応するコード ファイルをすぐに開き、メソッド宣言を挿入するように提案します。

カスタム イベント ハンドラーを使用する例については、「Hello, iOS はじめに ガイド」を参照してください。

アウトライン ビュー

iOS Designerでは、インターフェイスのコントロール階層をアウトラインとして表示することもできます。 アウトラインは、次に示すように、[ ドキュメント アウトライン ] タブを選択して使用できます。

アウトライン ビューで選択したコントロールは、デザインサーフェイスで選択したコントロールと同期した状態を維持します。 この機能は、深く入れ子になったインターフェイス階層から項目を選択する場合に便利です。

Xcode に戻す

iOS Designerと Xcode Interface Builder を同じ意味で使用できます。 Xcode Interface Builder でストーリーボードまたは .xib ファイルを開くには、次のスクリーンショットに示すように、ファイルを右クリックし、[ Open With Xcode Interface Builder]\(Xcode インターフェイス ビルダーで > 開く\) を選択します。

Xcode インターフェイス ビルダーでストーリーボードを開く

Xcode Interface Builder で編集を行った後、ファイルを保存し、Visual Studio for Macに戻ります。 変更は Xamarin.iOS プロジェクトに同期されます。

.xib のサポート

iOS Designerでは、.xib ファイルの作成、編集、管理がサポートされています。 これらは、アプリケーションのビュー階層に追加できる単一のカスタム ビューを示す XML ファイルです。 .xib ファイルは通常、アプリケーション内の 1 つのビューまたは画面のインターフェイスを表し、ストーリーボードは多くの画面とその間の遷移を表します。

.xib ファイル、ストーリーボード、コードなど、ユーザー インターフェイスの作成と保守に最適なソリューションについては、多くの意見があります。 実際には、完璧な解決策はなく、手元の仕事に最適なツールを常に検討する価値があります。 とはいえ、.xib ファイルは、一般に、カスタム テーブル ビュー セルなど、アプリ内の複数の場所で必要なカスタム ビューを表すために使用される場合に最も強力です。

.xib ファイルの使用に関するその他のドキュメントについては、次のレシピを参照してください。

ストーリーボードの使用方法の詳細については、「ストーリーボードの 概要」を参照してください。

この他の iOS Designer関連ガイドでは、ほとんどの Xamarin.iOS の新しいプロジェクト テンプレートが既定でストーリーボードを提供するため、ユーザー インターフェイスを構築するための標準的なアプローチとしてストーリーボードの使用を参照しています。

まとめ

このガイドでは、iOS Designerの概要について説明し、その機能について説明し、美しいユーザー インターフェイスを設計するためのツールの概要を説明しました。