trapemiyaの日記

hatenablogが新しくなったんで新規一転また2019年1月からちょこちょこ書いてます。C#中心のプログラミングに関するお話です。

Xamarin + MvvmCrossをVisual Studio 2013で開発する最初の手順

表記の件について、トータルでまとまっている記事を見かけなかったので、自分用のメモも兼ねてまとめておきます。
とりあえず、ターゲットはandroidのみとして話を進めます。


1.Visual Studio 2013(以下、VS2013)のインストール(当たり前!)


2.Xamarinのインストール(当たり前!)


3.PCLプロジェクトの作成

いよいよVisual Studio 2013でプロジェクトと作っていきます。
最初はPCLからにしましょう。
プロジェクトのテンプレートは「クラス ライブラリ(ポータブル)」を選択します。PCLは慣習でプロジェクト名の最後に「.Core」を付けるようですので、そのようにします。
また、気を付けたいのは、このようにするとVS2013は自動的にソリューション名をプロジェクト名と同じにしますので、ソリューション名まで「.Core」が付いてしまいます。
それが嫌なので、ソリューション名は手で編集します。ここはうっかりしますので、注意ポイントです。

#ちなみに、テンプレートで「クラス ライブラリ(ユニバーサル アプリ用ポータブル)」を選択しても良いですが、その場合はプロジェクトのプロパティを開き、ターゲットに、Xamarin.Android を追加する必要があります。

PCLのプロジェクトを作成途中で、以下の画面のようにターゲットを選択する画面が表示されますが、Xamarin.Androidにデフォルトでチェックが入っていますので、そのままOKボタンを押して閉じます。

#ちなみに、テンプレートで「クラス ライブラリ(ユニバーサル アプリ用ポータブル)」を選択した場合、上記のターゲットを選択する画面は表示されません。表示されませんが、上記にも書いた通り、プロジェクトのプロパティから変更できます。


4.PCLプロジェクトにMvvmCrossのインストール

ソリューションエクスプローラーで、「参照設定」を右クリックし、「NuGetパッケージの管理」をクリックします。


「NuGetパッケージの管理」の画面が開いたら、右上の検索ボックスに「MvvmCross」と入力して検索し、検索結果から「MvvmCross - Hot Tuna Starter Pack」を選択してインストールします。


インストール後、ViewModel等のフォルダが作成されます。


5.androidプロジェクトの作成

続いて、androidのプロジェクトを作成します。
プロジェクトのテンプレートは、「Visual C#」にある「Android」の中の「Blank App (Android)」を選択します。
プロジェクト名はandroidとわかりやすいように、XamarinMvvmCross.androidとしています。


6.androidプロジェクトにMvvmCrossのインストール

PCLのプロジェクトと全く同様にして、MvvmCrossをインストールします。


7.androidプロジェクトにPCLプロジェクトの参照を追加

ソリューションエクスプローラーの「参照の設定」からPCLプロジェクトの参照設定をします。


8.androidプロジェクトをスタートアッププロジェクトに設定

当然ですが、PCLプロジェクトの起動はできませんので、androidプロジェクトを起動するようにします。


9.不必要なアクティビティを削除

Xamarinのテンプレート(androidプロジェクトを作成したテンプレート)から生成された初期画面のアクティビティと、MvvmCrossをインストールした際に追加された初期画面のアクティビティの2つがあり、このままコンパイルして実行すると、android端末のランチャにこれら2つのアイコンが登録されてしまいます。そして、表示されるのはXamarinの初期画面になります。これはたまたま私の環境がそうであって、違う環境であればMvvmCrossの初期画面が出るのかもしれませんが、この辺りは調査していません。(すみません)
初期画面のアクティビティを指定するのは、MainLauncher = trueというアトリビュートで行います。今回の場合、Xamarinのデモアプリの初期画面であるMainActivity.csと、MvvmCrossのデモアプリの初期画面であるSplashScreen.csの両方に指定があります。よって、MainActivity.csのMainLauncher属性をfalseにしてしまえば良いのですが、MainActivity.cs、およびそれに対応するViewであるMain.axml(Rsources/layoutに存在)はもう必要ないので、削除してしまいましょう。といっても、物理的に削除すると何かの参考の時に見れなくなりますので、以下のようにプロジェクトからこれら2つのファイルを除外してしまいます。


10.MvvmCrossのデモアプリが動作することを確認

では、VS2013からコンパイルして、無事に以下の画面が表示されれば完了です。バインドの動作をデモするサンプルですから、上のEditBoxに入力した文字列が、下のTextViewにリアルタイムで表示されることを確認して下さい。

#上記のエミュレーターは、Xamarin Android Playerです。

以上です。おつかれさまでした。