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

木曜日 , 6, 2月 2014 Leave a comment

 Xamarinは今更書くまでもないですが、C#でAndroidやiPhone、MacOSなど様々なプラットフォームのアプリケーションを作成できます。

 ただしViewの部分はXAMLではなく、AndroidならXML、iPhoneならStoryboradと本来のアプリケーションの定義方法に準じます。

 そのためMVVMで開発したりデータバィンディングするのは無理だと思い込んでいましたがMvvmCrossを使うとAndroidやiPhoneでもMVVMで開発できることを知りました。

 

 とはいえ「どこまでのことができるんだ?」という疑問が残りますので、実際に試してみました。

 

まずはPCLを作成

 

 GitHubのMvvmCrossのリポジトリにかなり詳細なチュートリアルがありますので基本これを参考にします。

 MvvmCrossの方がバージョンがあがり、上記ドキュメントで必要だった処理の多くが最初から施された状態になっています。

 

 チュートリアルに従うと、まずはPCL(ポータブルクラスライブラリ)を作成します。

 ポータブルクラスライブラリとはWindowsストアアプリやWindows Phoneで共通で利用できるライブラリを作成する仕組みです。固有のAPI呼び出しなどはできませんが、プログラムを共有できるので便利な機能です。

 (PCLの作成はドキュメントでいうN=0 : A first MvvmCross Application (Blog Post)のPCL Project項目です。)

 

 まずは新規プロジェクトでVisual C#のポータブルクラスライブラリを作成します。

 

002

 

 

 PCL以外にも今後プロジェクトをソリューションに追加していくので、今回はPCLの名前をDemo.Coreとしてソリューション名をDemoとします。

 Demoというソリューションの中にDemo.Coreというプロジェクトが作成された形になります。今後Androidのプロジェクトを追加した場合はDemo.Droidというプロジェクトが追加されるといった流れです。

 

003

 

 PCL作成時にどのプラットフォームで利用可能なPCLにするかを選択します。

 XamarinのBUISINESS以上のエディションがインストールされていると上画像のようにXamarin.iOSとXamarin.Androidが選択可能になります。

(試用版でも使用期間中であれば選択できます。ただし作成できるPCLのサイズが32Kに限られます)

 

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

 

004

 

 ここまで行ったらPCL(Demo.Coreプロジェクト)での作業を終了します。

 チュートリアルではここでViewModelにプロパティを追加していますが、最低限の動作確認であれば不要なので飛ばします。

 

Androidプロジェクトの作成

 

 続いてAndroidプロジェクトを追加します。

 少し前に書きましたが、同一ソリューションの中にコアとなるPCLとAndroidやその他プラットフォーム用のプロジェクトを作成します。

 ソリューションエクスプローラーのソリューション名(今回の場合は「ソリューション’Demo'(1 プロジェクト)」)の上部で右クリック→追加→新しいプロジェクトをクリックします。

 

 新しいプロジェクトの追加ポップアップウィンドウではAndroidのAndroid Applicationを選び、Demo.Droidという名前で保存します。

 

005

 

 

 以下の画像のように一つのソリューションの中にコア(共通)となる部分とAndroiのプロジェクトが作成されました。

 

006

 

 AndroidのプロジェクトからActivity1.csとResources\Layout\Main.axmlの2つのファイルを削除します。

 

 Coreの時同様NuGetからMvvm Cross Hot Tuna Starter Packをインストールします。

 

 AndroidのプロジェクトDemo.Droidをスタートアッププロジェクトに設定します。

007

 

 参照の追加からDemo.Coreを追加します。

 

008

 

 

デバッグ実行する

 ここまでできたらデバッグ実行します。

 Androidのシミュレーターはうまくデバッグできないことが多いので、実機を利用されることをお勧めします。

 

 うまくいくと画面にテキスト入力エリアと、文字列が表示されます。

 テキスト入力エリアの文字列を変更すると、文字列も変更されます。

 

009

 

 これで簡単なMVVMの動作が確認できました。

 コードはすごく簡単な段階なので、これ以降は各コードを眺めてみたり、上記のチュートリアルに従い、プロパティを追加してみるとよいと思います。

 


Please give us your valuable comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください