Xamarin.iOS でのユーザーインターフェイスオブジェクトの作成

[アーティクル]
03/21/2017

Apple は、関連する機能を Xamarin.iOS 名前空間に相当する "フレームワーク" にグループ化します。 UIKit は、iOS 用のすべてのユーザーインターフェイスコントロールを含む名前空間です。

コードでラベルやボタンなどのユーザーインターフェイスコントロールを参照する必要がある場合は、必ず次の using ステートメントを含めてください。

using UIKit;

この章で説明するコントロールはすべて UIKit 名前空間にあり、各ユーザーコントロールクラス名には UI プレフィックスが付与されています。

UI コントロールとレイアウトは、次の 3 つの方法で編集できます。

Xamarin iOS Designer – Xamarin の組み込みのレイアウトデザイナーを使用して画面を設計します。ストーリーボードまたは XIB ファイルをダブルクリックして、組み込みのデザイナーで編集します。
Xcode Interface Builder – Interface Builder を使用して、コントロールを画面レイアウトにドラッグします。 Solution Pad でファイルを右クリックし、[開く] > [Xcode Interface Builder] の順に選択して、Xcode でストーリーボードまたは XIB ファイルを開きます。
C# の使用 – コードを使用してコントロールをプログラムで構築し、ビュー階層に追加することもできます。

新しいストーリーボードと XIB ファイルを追加するには、iOS プロジェクトを右クリックし、[追加] > [新しいファイル...] の順に選択します。

どのメソッドを使用する場合でも、アプリケーションロジック内で C# を使用してコントロールプロパティとイベントを操作できます。

Xamarin iOS Designer の使用

iOS Designer でユーザーインターフェイスの作成を開始するには、ストーリーボードファイルをダブルクリックします。コントロールは、次に示すようにツールボックスからデザインサーフェイスにドラッグできます。

Visual Studio for Mac
Visual Studio

デザインサーフェイスでコントロールを選択すると、Properties Pad にそのコントロールの属性が表示されます。次のスクリーンショットに入力されている [ウィジェット] > [ID] > [名前] フィールドは、アウトレット名として使用されます。 C# でコントロールを参照する方法を次に示します。

iOS Designer の使用方法の詳細については、「iOS Designer の概要」ガイドを参照してください。

Xcode Interface Builder の使用

Interface Builder の使用に慣れていない場合は、Apple の Interface Builder ドキュメントを参照してください。

Xcode でストーリーボードを開くには、右クリックしてストーリーボードファイルのコンテキストメニューにアクセスし、Xcode Interface Builder で開きます。

Visual Studio for Mac
Visual Studio

コントロールは、次に示すオブジェクトライブラリからデザインサーフェイスにドラッグできます。

Interface Builder を使用して UI を設計する場合は、C# で参照するコントロールごとにアウトレットを作成する必要があります。これを行うには、Xcode ツールバーボタンの中央の [エディター] ボタンを使用して、アシスタントエディターをオンにします。

ユーザーインターフェイスオブジェクトをクリックし、.h ファイルにコントロールドラッグします。 コントロールドラッグするには、コントロールキーを押しながら、アウトレット (またはアクション) を作成するユーザーインターフェイスオブジェクトをクリックしたままにします。 Control キーを押しながらヘッダーファイルにドラッグします。 @interface 定義の下にドラッグを完了します。以下のスクリーンショットに示すように、青い線が Insert Outlet または Outlet Collection というキャプションとともに表示されます。

クリックを離すと、アウトレットの名前入力するプロンプトが表示されます。この名前は、コードで参照できる C# プロパティを作成するために使用されます。

Xcode の Interface Builder と Visual Studio for Mac の統合方法の詳細については、「Xib コード生成」ドキュメントを参照してください。

C# の使用

C# を使用して (たとえば、View または View Controller などで) ユーザーインターフェイスオブジェクトをプログラムで作成する場合は、次の手順に従います。

ユーザーインターフェイスオブジェクトのクラスレベルフィールドを宣言します。コントロール自体は、ViewDidLoad などで、1 回作成してください。その後、View Controller (例: ViewWillAppear) のライフサイクルメソッド全体でオブジェクトを参照できます。
コントロールのフレーム (画面上の X 座標と Y 座標、およびその幅と高さ) を定義する CGRect を作成します。これを作成するには、using CoreGraphics ディレクティブが必要です。
コンストラクターを呼び出して、コントロールを作成して割り当てます。
プロパティまたはイベントハンドラーを設定します。
Add() を呼び出して、ビュー階層にコントロールを追加します。

C# を使用してビューコントローラーに UILabel を作成する簡単な例を次に示します。

UILabel label1;
public override void ViewDidLoad () {
    base.ViewDidLoad ();
    var frame = new CGRect(10, 10, 300, 30);
    label1 = new UILabel(frame);
    label1.Text = "New Label";
    View.Add (label1);
}

C# とストーリーボードの使用

View Controller をデザインサーフェイスに追加すると、対応する 2 つの C# ファイルがプロジェクトに作成されます。この例では、ControlsViewController.cs と ControlsViewController.designer.cs が自動的に作成されています。

この ControlsViewController.cs ファイルは、コードを対象としています。ここには ViewDidLoad や ViewWillAppear といった View ライフサイクルメソッドが実装されており、独自のプロパティやフィールド、メソッドを追加できます。

ControlsViewController.designer.cs には、部分クラスを含むコードが生成されます。 Visual Studio for Mac のデザインサーフェイスでコントロールに名前を付けるか、Xcode でアウトレットまたはアクションを作成すると、対応するプロパティまたは部分メソッドがデザイナー (designer.cs) ファイルに追加されます。次のコードは、2 つのボタンとテキストビューに対して生成されたコードの例を示しています。ボタンの 1 つには TouchUpInside イベントもあります。

部分クラスのこれらの要素を使用すると、コードでコントロールを参照し、デザインサーフェイスで宣言されているアクションに応答できます。

[Register ("ControlsViewController")]
    partial class ControlsViewController
    {
        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UIButton Button1 { get; set; }

        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UIButton Button2 { get; set; }

        [Outlet]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        UIKit.UITextField textfield1 { get; set; }

        [Action ("button2_TouchUpInside:")]
        [GeneratedCodeAttribute ("iOS Designer", "1.0")]
        partial void button2_TouchUpInside (UIButton sender);

        void ReleaseDesignerOutlets ()
        {
            if (Button1 != null) {
                Button1.Dispose ();
                Button1 = null;
            }
            if (Button2 != null) {
                Button2.Dispose ();
                Button2 = null;
            }
            if (textfield1 != null) {
                textfield1.Dispose ();
                textfield1 = null;
            }
        }
    }
}

designer.cs ファイルは手動で編集しないでください。IDE (Visual Studio for Mac または Visual Studio) が、ストーリーボードとの同期を維持する役割を担います。

ユーザーインターフェイスオブジェクトがプログラムによって View または ViewController に追加される場合、オブジェクト参照をご自身でインスタンス化して管理するため、デザイナーファイルは必要ありません。

次の方法で共有

Xamarin.iOS でのユーザーインターフェイスオブジェクトの作成

Xamarin iOS Designer の使用

Xcode Interface Builder の使用

C# の使用

C# とストーリーボードの使用

その他のリソース

次の方法で共有

Xamarin.iOS でのユーザー インターフェイス オブジェクトの作成

Xamarin iOS Designer の使用

Xcode Interface Builder の使用

C# の使用

C# とストーリーボードの使用

その他のリソース

Xamarin.iOS でのユーザーインターフェイスオブジェクトの作成