Prism.Unity.Formsでカメラ(Xam.Plugin.Media)を使う

 はじめに

Xam.Plugin.Mediaを使ったカメラの撮影し、画面に表示するアプリを作ってみたいと思います。
色々なサイトを見ると、パッケージのインストール時に自動で表示されるreadme.txtに従って設定を行えば良いようですが、私の環境ではAndroidで起動時に例外が発生しましたので、その対応も含めて記載します。

手順の概要は以下のとおりです。

• Xam.Plugin.Mediaパッケージをインストールする
• readme.txtに従って各ファイルを変更する
• カメラ撮影と画像を表示する処理を追加する

ベースとなるソースは、以下にしました。

Github
タグ名：chapter1

Xam.Plugin.Mediaパッケージをインストールする

ソリューションの右クリックでManage NuGet Packages...を選択します。

検索キーワードにxam.plugin.mediaを入力し、Xam.Plugin.Mediaをインストールします。

この時のVersionは5.0.1でした。

適用するプロジェクトは、PCL,Android,iOSにチェックを入れ、適用します。

readme.txtに従って各ファイルを変更する

パッケージのインストール中にreadme.txtに従ってAndroid, iOSのプロジェクトを変更します。

Xamarin.iOSの場合

info.plistに以下の記述を追加します。VisualSutdio for MAC上では、編集できないのでinfo.plistを右クリックし、プログラムから開く -> Visua Studio Codeを選択しました。

info.plistを開いたら、dictタグの最後の方に以下のreadme.txtに記載されているタグを追加します。

Xamarin.Androidの場合

まずは、Propertiesフォルダ内のAndroidManifest.xmlを右クリックし、プログラムから開くを選択し、ソースコードエディタを選択して開きます。

ファイルを開いたら、 applicationタグにreadme.txtに記載されているproviderタグを追加します。

この時、以下の部分は

android:name="android.support.v4.content.FileProvider" 

以下のように変更します。

※変更せずに実行した場合はアプリ起動時に例外が発生しました。

android:name="Android.core.content.FileProvider"

次にResourcesフォルダに以下を追加します。

xmlフォルダを作成する

xmlフォルダ内にfile_paths.xmlファイルを作成する

file_paths.xmlファイルには、readme.txtに記載されている以下の部分を追加します。

カメラ撮影と画像を表示する処理を追加する

準備が整ったので、MainPage.xamlにカメラで撮影するためのボタンと撮影した画像を表示するImageタグを追加します。

次にMainPageViewModel.csにusingを追加します。

コンストラクタにボタン（ButtonPicture）の処理を追加します。

ボタンをクリック（タップ）した時に処理を追加します。

最後に撮影した画像を表示するプロパティを追加します。

以上で終了です。

このソースコードは、以下から取得できます。

Github

ブランチ名：camera

Xamarinでprismを使う準備

はじめに

Windowsでは、Prism Template packがあるので、プロジェクト作成時にPrismを選択できるので

特に初期設定は不要ですが、VS for MACではPrism Template Packがないので、手動で設定する必要があります。

色々な設定を行う必要があるので、備忘録として記載しておきます。

環境によっては微妙な違いがあると思います。

Xamarin.Formsでprismを使うには毎回設定が必要になります。

プロジェクトの作成

まずは、 Xamarin.Formsを選択して、アプリ名を設定します。ここでは、prismXamarinとしました。

次は、プロジェクト名とソリューション名を確認して、作成ボタンを押下します。

パッケージを追加する

Manage NuGet Packagesを選択してPrism.Unity.Formsを選択します。

右下のパッケージの追加ボタンを押下します。

パッケージをプロジェクトに追加します。

すべてのプロジェクトにチェックを入れ、OKボタンを押下します。

パッケージの追加処理は、少々時間が必要になります。

場合によってはエラーが発生するのでプロジェクトを再起動した方が良いです。

プロジェクトの構成を変更する

prismXamarinプロジェクトにViewsとViewModelsフォルダを追加します。

ViewsフォルダにMainPage.xamlとMainPage.xaml.csを移動します。

（MainPage.xamlをドラッグ＆ドロップすると２つのファイルを移動できます）

MainPage.xamlとMainPage.xaml.csを変更

MainPage.xamlの名前空間に.Viewsを追加します。

MainPage.xamlのx:ClassにViewsを追加します。

MainPageViewModelクラスを追加する

ViewModelsフォルダに新しくMainPageViewModelクラスを新規作成します。

※ViewModelsフォルダ上で右クリックし、追加->新しいクラスを選択します。

Generalと空のクラスを選択し、クラス名をMainPageViewModelとし、新規ボタンを押下します。

MainPageViewModel.csへの追加

usingの追加

using Prism.Mvvm;
using Prism.Navigation;

を追加します

継承するクラスの追加

BindableBase, IInitialize, INavigationAware, IDestructibleを追加します

メンバ変数？を追加する

protected INavigationService NavigationService { get; private set; }を追加します。

コンストラクタを変更する

INavigationServie型を引数に追加し、メンバ変数に渡します。

メソッドを追加する

Initialize, OnNavigatedFrom, OnNavigatedTo, Destroyを追加します。

App.xamlを変更する

Applicationタグをprism:PrismApplicationに変更します。

xmlns:prism="http://prismlibrary.com"を追加します。

App.xaml.csを変更する

using の追加と削除

下図のようにします。

クラスの継承を削除

Applicationクラスを継承しないように削除します。

メソッドの追加と削除

・OnInitializedとRegisterTypesメソッドを追加します。

・OnStart,OnSleep,OnResumeメソッドを削除します。

コンストラクタ

・App()からImitilizedComponentをOnInitializedメソッドに移動します。

・MainPage = new MainPage()を削除します。

OnInitializedメソッドに処理を追加

RegisterTypesメソッドに処理を追加

変更前と変更後

変更前

変更後

以上で、準備完了です。

Prism Template Packのありがたみがわかりますね。