Elements API を使用した Xamarin.iOS アプリケーションの作成

この記事は、MonoTouch ダイアログの概要に関する記事に記載されている情報に基づいています。 これは、MT.D を使用してアプリケーションの構築をすぐに開始するための MonoTouch.Dialog (MT.D) Elements API の使用方法を示すチュートリアルを提供します。

このチュートリアルでは、MT.D Elements API を使用してタスク リストを表示するアプリケーションのマスター詳細スタイルを作成します。 ユーザーがナビゲーション バーの + ボタンを選択すると、タスクのテーブルに新しい行が追加されます。 次に示すように、行を選択すると、タスクの説明と期限を更新できる詳細画面に移動します。

MT.D の設定

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

Elements API のチュートリアル

「MonoTouch ダイアログの概要」の記事では、MT.D のさまざまな部分についてしっかりと理解しました。 Elements API を使用して、それらをすべてアプリケーションにまとめてみましょう。

マルチスクリーン アプリケーションの設定

画面作成プロセスを開始するために、MonoTouch.Dialog によって DialogViewController が作成され、RootElement が追加されます。

MonoTouch.Dialog でマルチスクリーン アプリケーションを作成するには、次の作業を行う必要があります。

1. 認証要求の処理に使用する UINavigationController.
2. 認証要求の処理に使用する DialogViewController.
3. DialogViewController を UINavigationController. のルートとして追加する
4. RootElement を DialogViewController. に追加する
5. RootElement. に Sections と Elements を追加する

UINavigationController の使用

ナビゲーション スタイルのアプリケーションを作成するには、UINavigationController を作成し、これを AppDelegate の FinishedLaunching メソッドに RootViewController として追加します。 MonoTouch.Dialog で UINavigationController を動作させるには、次に示すように DialogViewController を UINavigationController に追加します。

public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
    _window = new UIWindow (UIScreen.MainScreen.Bounds);
            
    _rootElement = new RootElement ("To Do List"){new Section ()};

    // code to create screens with MT.D will go here …

    _rootVC = new DialogViewController (_rootElement);
    _nav = new UINavigationController (_rootVC);
    _window.RootViewController = _nav;
    _window.MakeKeyAndVisible ();
            
    return true;
}

上記のコードは、RootElement のインスタンスを作成し、DialogViewController に渡します。 DialogViewController には、常にその階層の一番上に RootElement があります。 この例では、RootElement は、ナビゲーション コントローラーのナビゲーション バーのタイトルとして機能する "To Do List" という文字列で作成されます。 この時点で、アプリケーションを実行すると、次に示す画面が表示されます。

MonoTouch.Dialog の Sections と Elements の階層構造を使用して、さらに画面を追加する方法を見てみましょう。

ダイアログ画面の作成

DialogViewController は、MonoTouch.Dialog が画面の追加に使用する UITableViewController サブクラスです。 MonoTouch.Dialog では、上で説明したように、DialogViewController に RootElement を追加して画面を作成します。 RootElement には、テーブルのセクションを表す Section インスタンスを含めることができます。 セクションは、要素、他のセクション、または他の RootElements で構成されています。 次に示すように、RootElements を入れ子にすることで、MonoTouch.Dialog によってナビゲーションスタイルのアプリケーションが自動的に作成されます。

DialogViewController の使用

UITableViewController サブクラスである DialogViewController には、ビューとして UITableView があります。 この例では、+ ボタンがタップされるたびにテーブルに項目を追加します。 DialogViewController は UINavigationController に追加されたため、次に示すように、NavigationItem の RightBarButton プロパティを使用して + ボタンを追加できます。

_addButton = new UIBarButtonItem (UIBarButtonSystemItem.Add);
_rootVC.NavigationItem.RightBarButtonItem = _addButton;

前に RootElement を作成したときに、+ ボタンがタップされると要素が追加されるように、1 つの Section インスタンスを渡しました。 次のコードを使用して、ボタンのイベント ハンドラーでこれを実現できます。

_addButton.Clicked += (sender, e) => {                
    ++n;
                
    var task = new Task{Name = "task " + n, DueDate = DateTime.Now};
                
    var taskElement = new RootElement (task.Name) {
        new Section () {
            new EntryElement (task.Name, "Enter task description", task.Description)
        },
        new Section () {
            new DateElement ("Due Date", task.DueDate)
        }
    };
    _rootElement [0].Add (taskElement);
};

このコードは、ボタンがタップされるたびに新しい Task オブジェクトを作成します。 Task クラスの簡単な実装を次に示します。

public class Task
{   
    public Task ()
    {
    }
      
    public string Name { get; set; }
        
    public string Description { get; set; }

    public DateTime DueDate { get; set; }
}

RootElement のキャプションと、新しいタスクごとにインクリメントされる n という名前のカウンター変数を作成するには、タスクの Name プロパティを使用します。 MonoTouch.Dialog は、各 taskElement が追加されたときに TableView に追加される行に要素を変換します。

ダイアログ画面の表示と管理

MonoTouch.Dialog がタスクの詳細ごとに新しい画面を自動的に作成し、行が選択されたときにその新しい画面に移動するように、RootElement を使用しました。

タスク詳細画面自体は、2 つのセクションで構成されます。これらの各セクションには、1 つの要素が含まれています。 最初の要素は、タスクの Description プロパティに編集可能な行を提供するために、EntryElement から作成されます。 要素を選択すると、次に示すようにテキスト編集用のキーボードが表示されます。

2 番目のセクションには、タスクの DueDate プロパティを管理できる DateElement が含まれています。 日付を選択すると、次のように日付ピッカーが自動的に読み込まれます。

EntryElement と DateElement の両方のケース (または MonoTouch.Dialog のデータ入力要素の場合) では、値の変更は自動的に保持されます。 日付を編集し、ルート画面とさまざまなタスクの詳細画面を行き来すると、詳細画面の値が保持されていることからこれを実証できます。

まとめ

この記事では、MonoTouch.Dialog Elements API の使用方法を示すチュートリアルを紹介しました。 これには、DialogViewController の使用方法や、要素やセクションを追加して画面を作成する方法など、MT.D を使用してマルチスクリーン アプリケーションを作成するための基本的な手順が含まれます。 また、MT.D を UINavigationControllerと組み合わせて使用する方法も説明しました。

関連リンク

• MonoTouch.Dialog の概要
• リフレクション API のチュートリアル
• JSON 要素のチュートリアル
• Github の MonoTouch ダイアログ
• TweetStation アプリケーション
• UITableViewController クラス リファレンス
• UINavigationController クラス リファレンス