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

Prism.Unity.FormsでファイルにテキストをR/Wする

 はじめに

こちらを参考にしながらファイルIOのサンプルを作成します。
Entryタグに入力したテキストをtemp.txtに保存、読み込み、ファイルの削除を行うシンプルなものです。

使用するライブラリ？は、PCLStorageになります。

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

PCLStorageの追加
MainPage.xamlにEntry、ラベル、ボタンを配置する。
MainPageViewModel.csに各ボタン（保存、読み出し、削除）のロジックを追加する

PLCStorageの追加

ソリューションを右クリックし、Manage NuGet Packages...を選択し、PCLStorageをインストールします。適用するプロジェクトは、全てになります（PCL,Android,IOS）

PCLStorageはピクルスみたいなアイコンです。

MainPage.xamlにEntry、ラベル、ボタンを配置する。

MainPage.xamlに以下を追加します。

• ファイルに保存するテキストを入力するためのEntryタグを追加
• ファイルの保存、読み出し、削除を行うボタンタグの追加
• 読み出し時のファイル内容を表示するラベルタグの追加

MainPageViewModel.csに各ボタン（保存、読み出し、削除）のロジックを追加する

MainPageViewModel.csにボタンに対応するロジックを追加します。

コンストラクタ

保存ボタン

読み出しボタン

削除ボタン

以上です。

ソースコードは、以下になります。
https://github.com/gucchi4141/prismXamarin/
ブランチ名：storage

Prism.Unity.Formsで画面遷移先にメッセージ（テキスト）を飛ばす

はじめに 

今回は、Prism.Unity.Formsで画面遷移元のメッセージを画面遷移先に飛ばして表示する方法について記載します。

ベースにするソースコードは、こちらになります。

 

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

1. MainPage（画面遷移元）にテキスト入力（Entryタグ）を配置する。
2. 画面遷移ボタンが押下された時、入力されているメッセージをMyContentPage（画面遷移元）に渡す。
3. MyContentPageで受け取ったメッセージをMyContentPage内で表示させるためのLabelタグを配置する。
4. MainPage画面から渡されたメッセージを表示する

MainPage（画面遷移元）にテキスト入力（Entryタグ）を配置する。

MainPage.xamlに、MyContentPageに表示させるメッセージ（Entryタグ）を追加します。

下図は、入力する場所がわかりやすくするためにLabelタグも追加しています。

画面遷移ボタンが押下された時、入力されているメッセージをMyContentPage（画面遷移元）に渡す

MainPageViewModel.csに追加します。

まずは、Entryタグから入力されたテキストを保持するためのプロパティを追加します。

次に画面遷移ボタンが押下イベントにEntryタグのプロパティを渡します。

NavigationParameter型にEntryタグのプロパティを設定し、NavigationService.NavigationAsyncメソッドの第２引数にパラメータを設定します。

MyContentPageで受け取ったメッセージをMyContentPage内で表示させるためのLabelタグを配置する

MyContentPage.xamlに画面遷移元から渡されたメッセージを表示するためのLabelタグを追加します。

MainPage画面から渡されたメッセージを表示する

MyContentPageViewModel.csにMainPage画面から渡されたメッセージを保持するプロパティとそのメッセージを表示する処理を追加します。

メッセージを表示するタイミングは、画面遷移時のOnNavigatedToメソッドで行います。

このメソッドは、継承元のViewModelsBaseクラスでも記述されていますが、MyContentPageViewModel.csにも記述します。

以上で終了です。

ソースコードは、GithubにもUpしてあります。

ViewModelsフォルダに追加したクラスの記述を「ちょっとだけ」楽にする

 はじめに

prism.unity.formsでViewModelsにクラスを追加した時は毎回以下を行う必要があります。

1.BindableBase, IInitialize, INavigationAware, IDestructibleクラスを継承する

2.INavigationServiceプロパティを追加する

3.Initialize, OnNavigatedFrom, OnNavigatedTo, Destroyメソッドを追加する

毎回行うのは面倒なので、Baseクラスを作成し、それを継承するようにします。

ViewModelsBaseクラスを追加する

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

次に、General、空のクラスを選択し、クラス名をViewModelsBaseと入力し新規ボタンを押下します。

ViewModelsBase.csには毎回追加していた記述を追加します。

これで、ViewModelsフォルダに追加したクラスには、以下を追加すれば良くなります。

1.ViewModelsBaseクラスを継承

2.コンストラクタのINavigationService引数を基底クラスに渡します。

githubのリポジトリは以下です

https://github.com/gucchi4141/prismXamarin.git

タグ名:chapter4

以上になります。

Prism.Unity.Formsで画面を遷移させる

はじめに

ContentPage XAMLを追加して、ボタンを押したら画面が遷移するようにします。

手順

1.MainPage.xamlに画面遷移させるボタンを追加する

2.ContentPage XAMLクラス（クラス名：MyContentPage）を追加する

3.MyContentPageViewModel.csを追加し、変更する

4.MainPageViewModel.csに画面遷移する処理を追加する

5.App.xaml.csに追加する

1.MainPage.xamlに画面遷移させるボタンを追加する

Buttonタグを追加し、Commandプロパティを{Binding ButtonMyContentPage}にします。

2.ContentPage XAMLクラス（クラス名：MyContentPage）を追加する

ViewsフォルダにMyContentPage名でクラスを追加します。

クラス追加時は、Forms、フォームContentPage XAMLを選択します。

3.MyContentPageViewModel.csを追加し、変更する

以下を追加します。

using Prism.Mvvm;

using Prism.Navigation;

以下のクラスを継承します。

BindableBase, IInitialize, INavigationAware, IDestructible

プロパティとコンストラクタに以下を追加します。

Initialize, OnNavigatedFrom, OnNavigatedTo, Destroyメソッドを追加します。

画面が遷移したことがわかるように以下のプロパティを追加します。（必須ではありません）

4.MainPageViewModel.csに画面遷移する処理を追加する

プロパティとメソッドを追加します。

メソッド内の処理も併せて追加します。

コンストラクタに以下の処理を追加します。

5.App.xaml.csに追加する

RegisterTypesメソッドに以下を追加します。

以上で終了です。ビルドして実行してみましょう。

ソースコードは、以下にあります。

https://github.com/gucchi4141/prismXamarin.git

タグ名はchapter3