Xamarin+MvvmCrossでiPhoneもデータバィンディング

水曜日 , 12, 2月 2014 Leave a comment

 前回「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としておきます(任意)。

 

 001

 

 

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

 

002

 

 

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

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

 

003

 

 続いて「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というホストアプリが利用可能になるので、それを起動します。

 

 011

 

 

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

 

016

 

 

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

 

012

 

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

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

 

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

 

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

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

スクリーンショット 2014-02-12 01.46.50

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でデータバインディングする方法の紹介でした。

 

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です