VisualStudioforMacでMVVMCrossをインストールする(Xamarin+C#)

Xamarinの解説本を参考に進めていたのですが、書籍ではWindows版のVisualStudioで解説されています。私はMac版で進めていたのでちょこちょこ操作が違う部分がありましたので、メモしておきます。

Xamarinネイティブによるモバイルアプリ開発 C#によるAndroid/iOS UI制御の基礎

Xamarinネイティブによるモバイルアプリ開発 C#によるAndroid/iOS UI制御の基礎

 

↑解説が丁寧なのでオススメです(・ω・ ) 

 

以下、新規ソリューションを作成してから、MVVMCrossをインストールして使う準備を整える部分です。 

 

 

準備

VisualStudioforMacのインストールと、AndroidエミュレーターiOSシミュレーターが動くように準備をしておきます。

 

新規ソリューションの作成

メニュー>ファイル>新しいソリューション(またはcommand+shift+N)

f:id:mocotanus:20171218165443j:plain

 

マルチプラットフォーム>アプリ>ネイティブ から
「空のネイティブアプリ(iOSAndroid)」のほうを選択します。

f:id:mocotanus:20171218165502j:plain

 

アプリ名でソリューションのファイル名?を入力します。
「MVVMCrossSample」としてみました。
MVVMCrossを使う場合は必ずポータブルクラスライブラリ(PCL)を選択します。

f:id:mocotanus:20171218165519j:plain

 

プロジェクト名とソリューション名を入力します。
MVVMCrossではPCLに「.Core」が付いているものとしてインストールされるとのことなので、それに合わせて命名します。(ここで忘れてもあとで変更は可能ですし、合わせなくても数カ所修正すれば動くようです)

f:id:mocotanus:20171218165532j:plain

1.プロジェクト名の後ろに「.Core」を入力する
2.ソリューション名の後ろに自動入力された「.Core」を削除する
3.作成場所を選択する
サンプルなので、UIテストのチェックはずせばよかったかも。

「作成」ボタンを押すと、ファイルが作成されます。

 

↓この段階でのプロジェクトの状態です

 f:id:mocotanus:20171218165721j:plain

一番上の紫のアイコン:ソリューション
青い四角のアイコン:プロジェクト

〜.Core:共通で使うプロジェクト
〜.Droid:Android用プロジェクト。画面とか
〜.iOSiOS用プロジェクト。画面とか
〜.UITests:テスト用プロジェクト

アイコンはWindows版の方が見やすいです… 

 

ビルドしてシミュレーターで実行してみる(Android)

 

ウィンドウの左上にある三角ボタンで、ビルド+実行ができます。

f:id:mocotanus:20171224075415j:plain

 

Androidエミュレータが立ち上がり(少し時間がかかります)、
VisualStudioが用意したAndroid用の初期画面(HelloWorld)が表示されます。

f:id:mocotanus:20171223163956j:plain

 

この画面のファイルは、Android用のプロジェクト「MVVMCrossSample.Core.Droid」の
Resources>layout>Main.axml

です。ダブルクリックすると、デザイナーモードでファイルが開きます。

f:id:mocotanus:20171223164232j:plain

 

ビルドしてシミュレーターで実行してみる(iOS)

スタートアッププロジェクトをiOSに変更する。

f:id:mocotanus:20171221063450j:plain

 

または、スタートアッププロジェクトに設定したいプロジェクト名の上で右クリックして「スタートアッププロジェクトとして設定」を選択します。

f:id:mocotanus:20171221064034j:plain

 

スタートアッププロジェクトは太字になっています。

f:id:mocotanus:20171221063841j:plain

 

エラーが出た場合ですが…
VSとXcodeのバージョンの足並みが揃っていないと以下のようなエラーが出ます。

f:id:mocotanus:20171223164701j:plain

 

今回はXcodeを最新にアップデートして、iOSSDKを更新しました。

f:id:mocotanus:20171223164834j:plain

Xcodeアップデート後に、一度起動することで更新がインストールされます。Xcodeを一度起動しましょー(´・ω・`) 

 

 

VisualStudioに戻り、iOSのほうを実行してみます。
VisualStudioが用意したiOS用の初期画面(HelloWorld)が表示されます。

f:id:mocotanus:20171221063709j:plain

 

 画面はiOSプロジェクトのMain.storyboardにあります。ダブルクリックするとデザイナーが開きます。

f:id:mocotanus:20171223163052j:plain

  

ここまでは素のXamarinのみです。
次からはMVVMCrossをインストールしていきます。

 

MVVMCrossのパッケージをインストール

 VSMac版だと、ソリューションにパッケージ追加ができないようで悩みました。結局プロジェクトごとに個別にインストールしました。
共通プロジェクト、iOSAndroidの3つにインストールしていきます。

 

パッケージで右クリック>「パッケージの追加」

f:id:mocotanus:20171223165520j:plain

 

MVVMCross.StarterPackをインストールします。
「mvvmcross starterpack」を入力して検索します。一字でも入力ミスがあるとヒットしてきませんので(シビアすぎぃ)、出てこないときはコピペで検索してみてください…
Formsじゃなくて、今回はネイティブです。

f:id:mocotanus:20171223165737j:plain

「パッケージを追加」ボタンを押します。

 

f:id:mocotanus:20171223165815j:plain

追加されます。

 

AndroidiOSも同様にインストールします。

f:id:mocotanus:20171223170044j:plain

f:id:mocotanus:20171223170203j:plain

 

ビルドしてシミュレーターで実行してみる(iOS)

エラーを修正する

ビルドするとiOSのプロジェクトでビルドエラーが出ると思います。
エラーを修正します。

 

何をするかはToDo-MvvmCross>_ iOS UI.txtに書いてあります。

f:id:mocotanus:20171224084717j:plain

 

1. Core PCLプロジェクトへの参照を追加する
↓最初から追加されていたようなので、特に作業なし。

f:id:mocotanus:20171224085131j:plain

 

2. AppDelegate.csを変更する

AppDelegate.cs.txtをダブルクリックで開きます。
内容を全選択して、コピーします。

f:id:mocotanus:20171223181547j:plain

 

AppDelegate.csをダブルクリックで開きます。
全選択して貼り付け(上書き)します。

f:id:mocotanus:20171223181742j:plain

 

実行する

左上の三角ボタンで実行します。

 MVVMCrossが用意したiOS用の初期画面が表示されます。

f:id:mocotanus:20171223181831j:plain

 

 この画面は、Views>MainView.xibにあります。

f:id:mocotanus:20171223182102j:plain

サンプルでは.xibファイルが使われていますが、ストーリーボードも使えます。

 

ビルドしてシミュレーターで実行してみる(Android

ファイルを修正する

このまま実行してもエラーは出ませんが、MVVMCrossが用意した画面が表示されませんので、修正します。

 

MainActivity.csに「MainLauncher = true」があると初回起動時に表示されてしまいます。
MainLauncherの指定を削除するか、

f:id:mocotanus:20171223190107j:plain

 

MainActivity.csを削除またはプロジェクトから除外します。
forMacでは「プロジェクトから除外」という名称じゃないようです。

f:id:mocotanus:20171224070808j:plain

f:id:mocotanus:20171224070854j:plain

削除:ゴミ箱へ移動?
プロジェクトから削除:プロジェクトから除外して、ファイルは残す 

 

実行する

スタートアッププロジェクトをAndroidに変更します。
左上の三角ボタンで実行します。
MVVMCrossが用意したAndroid用の初期画面が表示されます。

f:id:mocotanus:20171223182811j:plain

 

 

f:id:mocotanus:20171223183202j:plain

 

プチ解説

リセットボタンを押したときの処理は、iOSAndroid共通で使用するプロジェクト「MVVMCrossSample.Core」のViewModels>MainViewModel.csで記述されています。

f:id:mocotanus:20171224072642j:plain