Xamarin.iOS の MonoTouch.Dialog の概要

MonoTouch.Dialog (MT と呼ばれます)。D は、ビュー コントローラー、テーブルなどを作成するテディウムではなく、情報を使用してアプリケーション画面とナビゲーションを構築できる迅速な UI 開発ツールキットです。そのため、UI の開発とコードの削減が大幅に簡素化されます。 たとえば、次のスクリーンショットを考えてみましょう。

この画面全体を定義するために、次のコードが使用されました。

public enum Category
{
    Travel,
    Lodging,
    Books
}
        
public class Expense
{
    [Section("Expense Entry")]

    [Entry("Enter expense name")]
    public string Name;
    [Section("Expense Details")]
  
    [Caption("Description")]
    [Entry]
    public string Details;
        
    [Checkbox]
    public bool IsApproved = true;
    [Caption("Category")]
    public Category ExpenseCategory;
}

iOS でテーブルを操作する場合、多くの場合、多くの場合、反復的なコードが多くあります。 たとえば、テーブルが必要になるたびに、そのテーブルにデータ ソースを設定する必要があります。 ナビゲーション コントローラーを介して接続されている 2 つのテーブルベースの画面があるアプリケーションでは、各画面は同じコードの多くを共有します。

山。D を使用すると、そのコードをすべてテーブル作成用の汎用 API にカプセル化することで、それが簡略化されます。 その後、その API の上に抽象化が提供されます。これにより、宣言型のオブジェクト バインド構文が可能になり、さらに簡単になります。 そのため、MT には 2 つの API があります。D：

• 低レベルの要素 API – Elements API は、画面とそのコンポーネントを表す要素の階層ツリーの作成に基づいています。 Elements API を使用すると、開発者は UI を作成する上で最も柔軟かつ制御できます。 さらに、Elements API には JSON を使用した宣言型定義の高度なサポートがあり、これにより、非常に高速な宣言と、サーバーからの動的 UI 生成の両方が可能になります。
• 高レベルリフレクション API – バインディングAPI とも呼ばれ、クラスには UI ヒントと MT で注釈が付けられます。D は、オブジェクトに基づいて画面を自動的に作成し、画面上に表示される内容 (および必要に応じて編集) と基になるオブジェクト バッキングの間のバインドを提供します。 上の例では、Reflection API の使用を示しました。 この API では、要素 API が行うきめ細かい制御は提供されませんが、クラス属性に基づいて要素階層を自動的に構築することで、さらに複雑さが軽減されます。

山。D には、画面作成用に組み込まれた UI 要素の大きなセットが含まれていますが、カスタマイズされた要素と高度な画面レイアウトの必要性も認識します。 そのため、機能拡張は、API に組み込まれている一流の機能です。 開発者は、既存の要素を拡張したり、新しい要素を作成したり、シームレスに統合したりできます。

さらに、MT。D には、"pull-to-refresh" のサポート、非同期イメージの読み込み、検索のサポートなど、多数の一般的な iOS UX 機能が組み込まれています。

この記事では、MT の操作について包括的に説明します。D(次を含む):

• 山。D コンポーネント – これは MT を構成するクラスの理解に重点を置きます。迅速に立ち上がることを可能にするD。
• 要素リファレンス – MT.D の組み込み要素の包括的な一覧。
• 高度な使用法 – プルツーリフレッシュ、検索、背景画像の読み込み、LINQ を使用した要素階層の構築、MT.D で使用するカスタム要素、セル、コントローラーの作成などの高度な機能について説明します。

MT の設定。D

山。D は Xamarin.iOS と共に配布されます。 これを使用するには、Visual Studio 2017 または Visual Studio for Mac の Xamarin.iOS プロジェクトの [参照] ノードを右クリックし、MonoTouch.Dialog-1 アセンブリへの参照を追加します。 次に、必要に応じてソース コードに ステートメントを追加 using MonoTouch.Dialog します。

MT の部分を理解する。D

リフレクション API を使用する場合でも、MT。D は、Elements API を介して直接作成された場合と同様に、内部に要素階層を作成します。 また、前のセクションで説明した JSON サポートでは、要素も作成されます。 このため、MT.D の構成要素について基本的な理解を持つことが重要です。

山。D は、次の 4 つの部分を使用して画面をビルドします。

• DialogViewController
• RootElement
• セクション
• 要素

DialogViewController

DialogViewController (略して DVC) は からUITableViewController継承されるため、テーブルを持つ画面を表します。 DVC は、通常の UITableViewController と同様にナビゲーション コントローラーにプッシュできます。

RootElement

RootElement は、DVC に入る項目の最上位のコンテナーです。 これにはセクションが含まれており、要素を含めることができます。 RootElements はレンダリングされません。代わりに、実際にレンダリングされるものの単なるコンテナーです。 RootElement が DVC に割り当てられ、DVC によってその子がレンダリングされます。

セクション

セクションは、テーブル内のセルのグループです。 通常のテーブル セクションと同様に、次のスクリーンショットのように、必要に応じてヘッダーとフッターをテキストまたはカスタム ビューにすることができます。

要素

Element は、テーブル内の実際のセルを表します。 山。D には、さまざまなデータ型または異なる入力を表すさまざまな要素が用意されています。 たとえば、次のスクリーンショットは、使用可能な要素をいくつか示しています。

セクションと RootElements の詳細

次に、RootElements とセクションについて詳しく説明します。

RootElements

MonoTouch.Dialog プロセスを開始するには、少なくとも 1 つの RootElement が必要です。

RootElement がセクション/要素値で初期化されている場合、この値を使用して、構成の概要を提供する子要素を検索します。これは、ディスプレイの右側にレンダリングされます。 たとえば、次のスクリーンショットは、左側のテーブルと、右側の詳細画面のタイトルである "デザート" と、選択した砂漠の値を含むセルを示しています。

を

上記のように、ルート要素を Sections 内で使用して、新しい入れ子になった構成ページの読み込みをトリガーすることもできます。 このモードで使用すると、指定されたキャプションがセクション内でレンダリングされるときに使用され、サブページの Title としても使用されます。 たとえば、次のように入力します。

var root = new RootElement ("Meals") {
    new Section ("Dinner") {
        new RootElement ("Dessert", new RadioGroup ("dessert", 2)) {
            new Section () {
                new RadioElement ("Ice Cream", "dessert"),
                new RadioElement ("Milkshake", "dessert"),
                new RadioElement ("Chocolate Cake", "dessert")
            }
        }
    }
};

上記の例では、ユーザーが "デザート" をタップすると、MonoTouch.Dialog によって新しいページが作成され、ルートが "デザート" であり、3 つの値を持つラジオ グループを持つページに移動します。

この特定のサンプルでは、RadioGroup に値 "2" を渡したため、ラジオ グループは "デザート" セクションで "Chocolate Cake" を選択します。 つまり、リストの 3 番目の項目 (インデックス 0) を選択します。

Add メソッドを呼び出すか、C# 4 初期化子構文を使用してセクションを追加します。 Insert メソッドは、アニメーションを使用してセクションを挿入するために用意されています。

Group インスタンス (RadioGroup ではなく) を使用して RootElement を作成した場合、Section に表示される RootElement の集計値は、Group.Key 値と同じキーを持つすべての BooleanElements および CheckboxElements の累積カウントになります。

セクション

セクションは、画面の要素をグループ化するために使用され、RootElement の唯一の有効な直接の子です。 セクションには、新しい RootElements を含む任意の標準要素を含めることができます。

セクションに埋め込まれた RootElements は、新しい深いレベルに移動するために使用されます。

セクションには、文字列として、または UIView としてヘッダーとフッターを含めることができます。 通常は文字列のみを使用しますが、カスタム UI を作成するには、任意の UIView をヘッダーまたはフッターとして使用できます。 文字列を使用して、次のように作成できます。

var section = new Section ("Header", "Footer");

ビューを使用するには、コンストラクターにビューを渡すだけです。

var header = new UIImageView (Image.FromFile ("sample.png"));
var section = new Section (header);

通知を受け取る

NSAction の処理

山。D は、コールバックを処理するためのデリゲートとして を NSAction 表示します。 たとえば、MT.D によって作成されたテーブル セルのタッチ イベントを処理するとします。 MT を使用して要素を作成する場合。D は、次に示すようにコールバック関数を指定するだけです。

new Section () {
    new StringElement ("Demo Callback", delegate { Console.WriteLine ("Handled"); })
}

要素値の取得

プロパティと Element.Value 組み合わせることで、コールバックは他の要素で設定された値を取得できます。 次に例を示します。

var element = new EntryElement (task.Name, "Enter task description", task.Description);
                
var taskElement = new RootElement (task.Name) {
    new Section () { element },
    new Section () { new DateElement ("Due Date", task.DueDate) },
    new Section ("Demo Retrieving Element Value") {
        new StringElement ("Output Task Description", delegate { Console.WriteLine (element.Value); })
    }
};

このコードは、次に示すように UI を作成します。 この例の完全なチュートリアルについては、「 Elements API Walkthrough tutorial 」を参照してください。

ユーザーが下のテーブル セルを押すと、匿名関数のコードが実行され、インスタンスから element Visual Studio for Mac の Application Output パッドに値が書き込まれます。

Built-In要素

山。D には、Elements と呼ばれる組み込みのテーブル セル項目が多数付属しています。 これらの要素は、文字列、浮動小数点数、日付、画像など、さまざまな種類を表のセルに表示するために使用されます。 各要素は、データ型を適切に表示します。 たとえば、ブール値要素には、値を切り替えるスイッチが表示されます。 同様に、float 要素には、float 値を変更するスライダーが表示されます。

画像や html などの豊富なデータ型をサポートするために、さらに複雑な要素があります。 たとえば、選択すると WEB ページを読み込む UIWebView を開く html 要素は、テーブル セルにキャプションを表示します。

要素値の操作

ユーザー入力のキャプチャに使用される要素は、いつでも要素の現在の値を保持するパブリック Value プロパティを公開します。 ユーザーがアプリケーションを使用すると、自動的に更新されます。

これは、MonoTouch.Dialog の一部であるすべての要素の動作ですが、ユーザーが作成した要素には必要ありません。

String 要素

にはStringElement、テーブル セルの左側にキャプションが表示され、セルの右側に文字列値が表示されます。

ボタンとして を StringElement 使用するには、デリゲートを指定します。

new StringElement ("Click me", () => { 
    new UIAlertView("Tapped", "String Element Tapped", null, "ok", null).Show();
});

Styled String 要素

では StyledStringElement 、組み込みのテーブル セル スタイルまたはカスタム書式を使用して文字列を表示できます。

クラスは からStringElement派生しますが、開発者は StyledStringElement Font、text color、background cell color、改行モード、表示する行数、アクセサリを表示するかどうかなどのいくつかのプロパティをカスタマイズできます。

Multiline 要素

Entry 要素

EntryElement名前が示すように、 はユーザー入力を取得するために使用されます。 通常の文字列またはパスワード (文字が非表示) をサポートしています。

これは、次の 3 つの値で初期化されます。

• ユーザーに表示されるエントリのキャプション。
• プレースホルダー テキスト (これは、ユーザーにヒントを提供する灰色表示のテキストです)。
• テキストの値です。

プレースホルダーと値は null にすることができます。 ただし、キャプションが必要です。

任意の時点で、Value プロパティにアクセスすると、 の値を EntryElement取得できます。

さらに、 プロパティは KeyboardType 作成時に、データ 入力に必要なキーボードの種類のスタイルに設定できます。 これは、次に示すように の値 UIKeyboardType を使用してキーボードを構成するために使用できます。

• 数値
• 電話
• url
• 電子メール

Boolean 要素

Checkbox 要素

Radio 要素

では RadioElement 、 RadioGroup で RootElementを指定する必要があります。

mtRoot = new RootElement ("Demos", new RadioGroup("MyGroup", 0));

RootElements は、無線要素の調整にも使用されます。 メンバーは RadioElement 複数のセクションにまたがることができます (たとえば、リング トーン セレクターに似たものを実装し、カスタムリングトーンをシステム着信音から分離します)。 概要ビューには、現在選択されている無線要素が表示されます。 これを使用するには、次のように、グループ コンストラクターを使用して を RootElement 作成します。

var root = new RootElement ("Meals", new RadioGroup ("myGroup", 0));

のグループ RadioGroup の名前は、含むページで選択した値 (存在する場合) を表示するために使用され、値 (この場合は 0) は、最初に選択した項目のインデックスです。

Badge 要素

Float 要素

Activity 要素

Date 要素

DateElement に対応するセルを選択すると、次に示すように日付ピッカーが表示されます。

Time 要素

TimeElement に対応するセルを選択すると、次に示すようにタイム ピッカーが表示されます。

DateTime 要素

DateTimeElement に対応するセルを選択すると、次に示すように datetime ピッカーが表示されます。

HTML 要素

では HTMLElement 、そのプロパティの値が Caption テーブル セルに表示されます。 選択されている場合、 Url 要素に割り当てられた が、次に示すようにコントロールに UIWebView 読み込まれます。

Message 要素

その他の要素を読み込む

この要素を使用して、ユーザーがリスト内のより多くの項目を読み込むことができます。 通常のキャプションと読み込みキャプション、フォントとテキストの色をカスタマイズできます。 インジケーターのUIActivityアニメーション化が開始され、ユーザーがセルをタップすると読み込みキャプションが表示され、コンストラクターNSActionに渡された が実行されます。 内のNSActionコードが完了すると、インジケーターのUIActivityアニメーション化が停止し、通常のキャプションが再び表示されます。

UIView 要素

さらに、 を使用して任意のカスタム UIView を UIViewElement表示できます。

Owner-Drawn 要素

この要素は抽象クラスであるため、サブクラス化する必要があります。 要素の Height(RectangleF bounds) 高さを返すメソッドをオーバーライドする必要があります。また Draw(RectangleF bounds, CGContext context, UIView view) 、コンテキストパラメーターとビューパラメーターを使用して、指定された境界内ですべてのカスタマイズされた図面を実行する必要があります。 この要素は、 をサブクラス化 UIViewし、返されるセルに配置することで、2 つの単純なオーバーライドを実装するだけで済みます。 ファイル内のサンプル アプリでは、より優れたサンプル実装を DemoOwnerDrawnElement.cs 確認できます。

クラスを実装する非常に簡単な例を次に示します。

public class SampleOwnerDrawnElement : OwnerDrawnElement
{
    public SampleOwnerDrawnElement (string text) : base(UITableViewCellStyle.Default, "sampleOwnerDrawnElement")
    {
        this.Text = text;
    }

    public string Text { get; set; }

    public override void Draw (RectangleF bounds, CGContext context, UIView view)
    {
        UIColor.White.SetFill();
        context.FillRect(bounds);

        UIColor.Black.SetColor();   
        view.DrawString(this.Text, new RectangleF(10, 15, bounds.Width - 20, bounds.Height - 30), UIFont.BoldSystemFontOfSize(14.0f), UILineBreakMode.TailTruncation);
    }

    public override float Height (RectangleF bounds)
    {
        return 44.0f;
    }
}

JSON 要素

JsonElementは、 を拡張RootElementして、入れ子になった子の内容をローカル URL またはリモート URL から読み込めるようにする のサブクラスRootElementです。

JsonElementは、RootElement2 つの形式でインスタンス化できる です。 1 つのバージョンでは、 RootElement が作成され、オンデマンドでコンテンツが読み込まれます。 これらは、末尾に JsonElement 余分な引数を受け取るコンストラクター (コンテンツを読み込む URL) を使用して作成されます。

var je = new JsonElement ("Dynamic Data", "https://tirania.org/tmp/demo.json");

もう 1 つの形式では、既に解析済みのローカル ファイルまたは既存 System.Json.JsonObject のファイルからデータが作成されます。

var je = JsonElement.FromFile ("json.sample");
using (var reader = File.OpenRead ("json.sample"))
    return JsonElement.FromJson (JsonObject.Load (reader) as JsonObject, arg);

MT での JSON の使用の詳細については、以下を参照してください。D、 JSON 要素のチュートリアル を参照してください。

その他の機能

Pull-to-Refresh のサポート

Pull-to-Refresh は、Tweetie2 アプリで最初に見つかった視覚効果であり、多くのアプリケーションで人気の高い効果となりました。

ダイアログに自動更新のサポートを追加するには、次の 2 つの操作を行う必要があります。ユーザーがデータをプルしたときに通知されるイベント ハンドラーをフックし、データが読み込まれたときにを通知 DialogViewController して既定の状態に戻ります。

通知のフックは簡単です。次のように、 の RefreshRequested イベントに DialogViewController接続するだけです。

dvc.RefreshRequested += OnUserRequestedRefresh;

次に、メソッド OnUserRequestedRefreshで、データの読み込みをキューに入れたり、ネットからデータを要求したり、スレッドをスピンしてデータを計算したりします。 データが読み込まれたら、新しいデータが入っていることを通知 DialogViewController し、ビューを既定の状態に復元するには、 を呼び出 ReloadCompleteしてこれを行う必要があります。

dvc.ReloadComplete ();

検索サポート

検索をサポートするには、 で プロパティを EnableSearch 設定します DialogViewController。 検索バーの SearchPlaceholder 透かしテキストとして使用する プロパティを設定することもできます。

検索すると、ユーザーの入力に応じてビューの内容が変更されます。 表示されているフィールドを検索し、ユーザーに表示します。 は DialogViewController 、プログラムによって結果に対する新しいフィルター操作を開始、終了、またはトリガーする 3 つのメソッドを公開します。 これらのメソッドを次に示します。

• StartSearch
• FinishSearch
• PerformFilter

システムは拡張可能であるため、必要に応じてこの動作を変更できます。

背景画像の読み込み

MonoTouch.Dialog には、 TweetStation アプリケーションのイメージ ローダーが組み込まれています。 このイメージ ローダーを使用すると、バックグラウンドでイメージを読み込み、キャッシュをサポートし、イメージが読み込まれたときにコードに通知できます。

また、送信ネットワーク接続の数も制限されます。

イメージ ローダーは クラスに ImageLoader 実装されています。必要なのは メソッドの呼び出し DefaultRequestImage です。読み込むイメージの URI と、イメージの読み込み時に呼び出されるインターフェイスの IImageUpdated インスタンスを指定する必要があります。

たとえば、次のコードでは、URL から にイメージを読み込 BadgeElementみます。

string uriString = "http://some-server.com/some image url";

var rootElement = new RootElement("Image Loader") {
    new Section() {
        new BadgeElement( ImageLoader.DefaultRequestImage( new Uri(uriString), this), "Xamarin")
    }
};

ImageLoader クラスは Purge メソッドを公開します。このメソッドは、現在メモリにキャッシュされているすべてのイメージを解放するときに呼び出すことができます。 現在のコードには、50 個のイメージ用のキャッシュがあります。 別のキャッシュ サイズを使用する場合 (たとえば、イメージが大きすぎて 50 個のイメージが多すぎると予想される場合)、ImageLoader のインスタンスを作成し、キャッシュに保持するイメージの数を渡すだけです。

LINQ を使用して要素階層を作成する

LINQ と C# の初期化構文を巧みに使用することで、LINQ を使用して要素階層を作成できます。 たとえば、次のコードでは、いくつかの文字列配列から画面を作成し、各 StringElementに渡される匿名関数を使用してセルの選択を処理します。

var rootElement = new RootElement ("LINQ root element") {
    from x in new string [] { "one", "two", "three" }
    select new Section (x) {
        from y in "Hello:World".Split (':')
        select (Element) new StringElement (y, delegate { Debug.WriteLine("cell tapped"); })
    }
};

これは、XML データ ストアまたはデータベースからのデータと簡単に組み合わせて、ほぼ完全にデータから複雑なアプリケーションを作成できます。

MT の拡張。D

カスタム要素の作成

既存の Element から継承するか、ルート クラス Element から派生することで、独自の要素を作成できます。

独自の要素を作成するには、次のメソッドをオーバーライドします。

// To release any heavy resources that you might have
void Dispose (bool disposing);

// To retrieve the UITableViewCell for your element
// you would need to prepare the cell to be reused, in the
// same way that UITableView expects reusable cells to work
UITableViewCell GetCell (UITableView tv);

// To retrieve a "summary" that can be used with
// a root element to render a summary one level up.  
string Summary ();

// To detect when the user has tapped on the cell
void Selected (DialogViewController dvc, UITableView tableView, NSIndexPath path);

// If you support search, to probe if the cell matches the user input
bool Matches (string text);

要素に可変サイズを指定できる場合は、1 つのメソッドを含む インターフェイスを IElementSizing 実装する必要があります。

// Returns the height for the cell at indexPath.Section, indexPath.Row
float GetHeight (UITableView tableView, NSIndexPath indexPath);

返されたセルを呼び出base.GetCell(tv)してカスタマイズしてメソッドをGetCell実装する予定の場合は、 プロパティをオーバーライドCellKeyして、次のように Element に固有のキーを返す必要もあります。

static NSString MyKey = new NSString ("MyKey");
protected override NSString CellKey {
    get {
        return MyKey;
    }
}

これはほとんどの要素では機能しますが、 と StyledStringElement では機能しませんStringElement。これらは、さまざまなレンダリング シナリオに独自のキーセットを使用します。 これらのクラスでコードをレプリケートする必要があります。

DialogViewControllers (DVC)

リフレクション API と Elements API の両方で同じ DialogViewControllerが使用されます。 ビューの外観をカスタマイズしたい場合や、UI の基本的な作成以外の機能 UITableViewController を使用したい場合があります。

DialogViewControllerは のサブクラスUITableViewControllerにすぎず、 をカスタマイズするのと同じ方法でカスタマイズUITableViewControllerできます。

たとえば、リスト スタイルを または Plainに変更する場合はGrouped、コントローラーを作成するときに プロパティを次のように変更して、この値を設定できます。

var myController = new DialogViewController (root, true) {
    Style = UITableViewStyle.Grouped;
}

のより高度なカスタマイズ (背景の DialogViewController設定など) については、次の例に示すように、サブクラス化し、適切なメソッドをオーバーライドします。

class SpiffyDialogViewController : DialogViewController {
    UIImage image;

    public SpiffyDialogViewController (RootElement root, bool pushing, UIImage image) 
        : base (root, pushing) 
    {
        this.image = image;
    }

    public override LoadView ()
    {
        base.LoadView ();
        var color = UIColor.FromPatternImage(image);
        TableView.BackgroundColor = UIColor.Clear;
        ParentViewController.View.BackgroundColor = color;
    }
}

もう 1 つのカスタマイズ ポイントは、 内 DialogViewControllerの次の仮想メソッドです。

public override Source CreateSizingSource (bool unevenRows)

このメソッドは、セルのサイズが均等である場合は の DialogViewController.Source サブクラスを返し、セルが不均一な場合は の DialogViewController.SizingSource サブクラスを返す必要があります。

このオーバーライドを使用して、任意のメソッドを UITableViewSource キャプチャできます。 たとえば、 TweetStation はこれを使用して、ユーザーが一番上までスクロールした日時を追跡し、それに応じて未読ツイートの数を更新します。

検証

Web ページやデスクトップ アプリケーションに適したモデルは iPhone 相互作用モデルに直接マップされないため、要素自体は検証されません。

データの検証を行う場合は、ユーザーが入力したデータを使用してアクションをトリガーするときに、これを行う必要があります。 たとえば、上部のツール バーの [完了] または [ 次へ ] ボタン、または StringElement 次のステージに移動するためのボタンとして使用されるボタンなどです。

ここでは、基本的な入力検証を実行し、サーバーとのユーザーとパスワードの組み合わせの有効性を確認するなどのより複雑な検証を実行します。

ユーザーにエラーを通知する方法は、アプリケーション固有です。 ヒントを UIAlertView ポップアップ表示したり、ヒントを表示したりすることもできます。

まとめ

この記事では、MonoTouch.Dialog に関する多くの情報について説明しました。 MT の基礎について説明しました。D は動作し、MT.D を構成するさまざまなコンポーネントについて説明しました。 また、MT でサポートされている要素とテーブルのカスタマイズの幅広い配列も示しました。D と MT について説明しました。D は、カスタム要素を使用して拡張できます。 さらに、MT での JSON サポートについて説明しました。JSON から要素を動的に作成できる D。

関連リンク

• チュートリアル: 要素 API を使用したアプリケーションの作成
• チュートリアル: リフレクション API を使用したアプリケーションの作成
• チュートリアル: JSON 要素を使用したユーザー インターフェイスの作成
• MonoTouch.Dialog JSON マークアップ
• Github の MonoTouch ダイアログ
• UITableViewController クラス リファレンス
• UINavigationController クラス リファレンス