iOS Designer の基本

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

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

要件

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

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

iOS Designer のしくみ

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

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

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

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

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

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

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

• ViewController.designer.cs は、視覚的に構築されたインターフェイスをコードにマップするために、iOS Designer によって作成される生成済みファイルです。 このファイルへの変更は上書きされるため、変更しないでください。 このファイルのプロパティ宣言により、ViewController クラスのコードは、iOS Designer で設定されたコントロールに、[名前] でアクセスできるようになります。 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 の起動

iOS Designer の機能

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

ワークフローを設計する

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

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

上記の例では、ボタンを配置するのに役立つように、水平方向の中央を示す視覚的な配置ガイドラインが青色の点線で表示されています。

制約ツール バー

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

フレーム編集モード/制約編集モード トグル

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

• フレーム編集モード:

• 制約編集モード:

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

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

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

下部ツール バー

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

デバイスと向き

下部ツール バーを展開すると、現在のドキュメントに適用できるすべてのデバイス、向き、アダプテーションが表示されます。 これらをクリックすると、デザイン サーフェイスに表示されるビューが変更されます。

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

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

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

ズーム コントロール

デザイン サーフェイスでは、複数のコントロールによるズームがサポートされています。

これらのコントロールとしては、次のものがあります。

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

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

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

既定値

イベント ハンドラー

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

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

アウトライン ビュー

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

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

.xib のサポート

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

xib ファイル、ストーリーボード、コードのうち、どれがユーザー インターフェイスの作成と維持に最適なソリューションであるかについては、さまざまな意見があります。 実際には、完璧なソリューションは存在しないため、目前の仕事に最適なツールについては、常に検討する価値があります。 ただし、一般的には、カスタムのテーブル ビュー セルなど、アプリ内の複数の場所で必要なカスタム ビューを表すために使用するには、xib ファイルが最も強力です。

xib ファイルの使用の詳細については、次のレシピを参照してください。

• ビュー、.xlb テンプレートの使用
• .xlb を使用したカスタム TableViewCell の作成
• .xib を使用した起動画面の作成

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

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

まとめ

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

関連リンク

• ストーリーボードの概要
• iOS のデザイン可能なコントロールのチュートリアル
• Hello, iOS
• Hello, iOS マルチスクリーン
• Android Designer の概要
• 部分クラスと部分メソッド
• Xamarin Designer for iOS の詳細 - Evolve 2014 (ビデオ)
• iOS Designer を使用して起動画面を作成する (ビデオ)