眠るシーラカンスと水底のプログラマー

　前回「Xamarin+MvvmCrossでAndroidもデータバィンディング」という記事でXamarin＋mvvmcrossでAndroidアプリ作成にデータバインディングを用いる方法を紹介しました。

　今回はiPhoneで同じようにデータバインディングを利用する方法を紹介します。

 

　最初に書いておきますが、iPhoneでデータバインディングを用いる場合はStroryBoardが使えず、C#コードでバインドする形になります。ちょっと期待した方法では無いかな。

　(Visual StudioでiPhoneプロジェクトを作成する場合ビューにStoryBoardがまだ使えないところとも関係しているのでしょうかMac上でXamarin Studioを用いて開発すると使えるのですが)

 

　本記事はN plus 1 Videos Of MvvmCrossの動画を元に最低限の実装で動作を確認できるように紹介します。

 

1.PCLを作成

 

　ここは「Xamarin+MvvmCrossでAndroidもデータバィンディング」で、紹介したものと同様のPCLを作成します。

　なのでPCLの作成は上記エントリを参考にしてください。

 

2.iPhoneプロジェクトの作成

 

　続いて、同じソリューションにiPhoneのプロジェクトを追加します。

　追加の要領はAndroidと同様で、ソリューションエクスプローラーのソリューション名の上あたりで右クリック。

　追加→新しいプロジェクトをクリックします。

 

　「新しいプロジェクトの追加」ポップアップの左ナビではVisual C#→iOS→iPhoneを選択。

　プロジェクトはHelloWorld Applicationを選択します。

　名前はプロジェクト名がDemoの場合ならDemo.Touchとしておきます(任意)。

 

　

 

 

　プロジェクトが作成されたらNuGetでNuGetからMvvm Cross　Hot Tuna Starter Packをインストールします。

 

 

 

　参照の追加からPCLを追加します。

　(この辺もAndroidと同じですね)

 

 

　続いて「ToDo-MvvmCross」フォルダの中のテキストを参考にAppDelegate.csを以下のように書き換えます。

 

using System;
using System.Collections.Generic;
using System.Linq;

using MonoTouch.Foundation;
using MonoTouch.UIKit;
using Cirrious.MvvmCross.ViewModels;
using Cirrious.CrossCore;
using Cirrious.MvvmCross.Touch.Platform;

namespace SecondDemo.Touch
{
    [Register("AppDelegate")]
    public partial class AppDelegate : MvxApplicationDelegate
    {
        UIWindow _window;

        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            _window = new UIWindow(UIScreen.MainScreen.Bounds);

            var setup = new Setup(this, _window);
            setup.Initialize();

            var startup = Mvx.Resolve<IMvxAppStart>();
            startup.Start();

            _window.MakeKeyAndVisible();

            return true;
        }
    }
}

 

3.デバッグする

 

　デバッグはMac上で起動しておいたホストアプリにアプリのパッケージをリモート転送して行います。

　なのでiPhoneアプリのデバッグをするにはMacが必要になります。

　MacにXamarinをインストールすると、Xamarin.iOS Build Hostというホストアプリが利用可能になるので、それを起動します。

 

　

 

 

　Mac上のホストに接続せずに、Visual Studio上でデバッグ実行しようとすると以下のようにエラーがでます。

 

 

 

　このエラーをダブルクリックするとサーバー接続設定を行うことができます。

 

 

　このように接続可能なホストアプリが表示されたら接続します。

　最初はMac側で表示されているPINを入力する必要があります。

 

　うまく動かない場合はデバッグの対象が「iphoneSimulator」になっているか？　や、MacとWindowsのXamarinのバージョンが異ならないか？ などをチェックしてみましょう。

 

　デバッグすると下画像のような画面が表示されます。

　上の文字は下の文字とバインドされており、下の文字を変更すると上の文字も合わせて変化します。

4.データバインドのコード

 

　データバインディングしているコードは以下のような感じです。

 

            var label = new UILabel(new RectangleF(10, 10, 300, 40));
            Add(label);
            var textField = new UITextField(new RectangleF(10, 50, 300, 40));
            Add(textField);

            var set = this.CreateBindingSet<FirstView, SecondDemo.core.ViewModels.FirstViewModel>();
            set.Bind(label).To(vm => vm.Hello);
            set.Bind(textField).To(vm => vm.Hello);
            set.Apply();

 

　コードでやっちゃってます。

 

　以上、iPhoneでデータバインディングする方法の紹介でした。