本サイトからスピンオフした姉妹サイトです。Xamarin2015年8月5日MvvmCrossでのiOS/Androidアプリ開発において、画像のURLをViewへバインディングできるMvxImageViewの使い方を説明する。→MvvmCrossのiOS/Androidアプリ開発では、MvxImageViewへ画像のURLをバインディングすることで画像のダウンロードと表示ができる。今回は、MvxImageViewへバインディングして画像を表示する方法を解説する*1。Studio(5.9.4)+MvvmCross(3.5.1)で動作を確認している。MvxImageViewMvvmCrossに標準で含まれているMvxImageViewクラスは、任意の画像をバインディング可能なViewクラスである。iOSではUIImageViewクラスを、AndroidではImageViewクラスを継承しており、画面へ配置することが可能だ。MvxImageViewクラスのImageUrlプロパティには、ローカルの画像リソース名または画像URLを指定する。ファイル名が「sample.png」である画像リソースをアプリが保持しているとき、ImageUrlプロパティへ文字列「res:sample」を設定すると、それぞれのプラットフォームのリソースから「sample.png」を取得して表示する。このように、リソース名の先頭に「res:」を付与したものはローカルリソースと見なされる。iOSであればXCAssetsの仕組みに従って画像が選択され、AndroidであればDrawableフォルダーの仕組みに従って画像が選択される*2。画像リソースは画面解像度や端末の種類によって、OSが適切な画像を選択する。Developers(英語)」を参照のこと。ImageUrlプロパティへHTTPやHTTPSの画像URLが指定されると、MvxImageViewクラスが画面へ表示されるタイミングで画像のダウンロードを開始し、ダウンロードが完了したら画面へ表示される。MvxImageViewクラスにはDefaultImagePathプロパティとErrorImagePathプロパティがあり、DefaultImagePathプロパティは、画像のダウンロードが完了するまでの間に表示する画像リソースを指定し、ErrorImagePathプロパティは画像のダウンロードが失敗したときに表示する画像リソースを指定する。DefaultImagePathとErrorImagePathにはローカルの画像リソースのみ指定することができる。MvxImageViewの画像リソース指定プロパティ一覧MvxImageViewクラスの画像のダウンロードにはDownloadCacheプラグインが使用されており、画像のメモリキャッシュやストレージキャッシュもDownloadCacheプラグインの設定に従って動作する。実装方針それでは、実際にMvxImageViewクラスを用いた画像表示を実装してみよう。今回はDefaultImagePathプロパティとImageUrlプロパティの動作を確認する。画面に2つのボタンとMvxImageViewを設置し、ボタンによってImageUrlプロパティの値を変化させることでMvxImageViewの動作を確認する。DefaultImagePathプロパティへ設定する画像として、次の「placeholder.png」画像リソースを使用する。MvvmCrossのプロジェクトをセットアップするには?」の手順に従い、MvvmCrossプロジェクトを作成する。ソリューション名は「CrossImageSample」と設定する。プラグインの追加まずは、MvxImageViewクラスの動作に必要なプラグインをNuGetから追加する。Coreプロジェクト、Touchプロジェクト、Droidプロジェクト全てに、以下のNuGetパッケージを取得する。Packages]から取得する。PluginCoreの実装CoreプロジェクトのViewModelクラスを実装する。ViewModelsフォルダーのFirstViewModel.csファイルを次のように実装する。ImageUrl);}}}}FirstViewModel.csの実装1は画像URLにnullを設定することで画像表示をリセットするコマンドを実装している。2は画像URLに「https:///re.buildinsider.net/img/logo-fb.png」を設定するコマンドを実装している。3はMvxImageViewへバインドするプロパティを定義している。初期値はnullとしている。Touchプロジェクトの実装Touchプロジェクトにplaceholder.png画像リソースを設置する。Set]によってImages.xcassetsフォルダー内へ「Image.imageset」フォルダーを作成する。作成した「Image.imageset」フォルダーの名前を「placeholder.imageset」へ変更する。1xの項目へドラッグ&ドロップする*3。StudioでのiOS画像リソースの追加TouchプロジェクトのViewクラスを実装する。ViewsフォルダーのFirstView.csファイルを次のように実装する。vm.ImageUrl);set.Apply();}}}TouchプロジェクトのFirstView.csの実装1で画面レイアウトを作成している。imageViewのDefaultImagePathプロパティにローカルリソースの「placeholder」画像リソースを設定している。UIImageクラスのContentModeプロパティを設定し、画像がViewのサイズに収まるようにしている。2でバインディングを設定している。imageViewはImageUrlプロパティがバインディングされている。Droidプロジェクトの実装Droidプロジェクトにplaceholder.png画像リソースを追加する。具体的には図2の手順で、[Resources]ー[drawable-mdpi]フォルダーへplaceholder.png画像リソースを設置する。Droidプロジェクトへの画像リソースの追加Droidプロジェクトのレイアウトを実装する。[Resources]ー[layout]フォルダー内のFirstView.axmlファイルを次のように実装する。/></LinearLayout>FirstView.axmlの実装1ではMvxImageViewを設置している。MvxImageViewはレイアウトXMLファイル内ではタグ名にMvx.MvxImageViewと指定する。MvxImageViewクラスのImageUrlプロパティをバインディング設定している。次に、Viewクラスを実装する。[Views]フォルダー内のFirstView.csファイルを次のように実装する。"res:placeholder";}}}DroidプロジェクトのFirstView.csの実装1で、imageViewのDefaultImagePathプロパティを設定する。DefaultImagePathプロパティにはローカルのplaceholder画像リソースを指定している。レイアウトXMLファイルではDefaultImagePathプロパティを設定することはできないため、FirstViewクラスを実装している。実行結果Touchプロジェクト、Droidプロジェクトを実行すると、それぞれ次のような動作結果となる。Image]ボタンをタップすると、画像をダウンロードした後、その画像を表示する。[Reset]ボタンをタップするとplaceholder画像の表示に戻る。Image]ボタンタップでは、画像がキャッシュされているため、ダウンロードをスキップして指定された画像を表示する。※以下では、本稿の前後を合わせて5回分(第55回~第59回)のみ表示しています。INDEX]を参照してください。MvvmCrossでカスタムコントロールをTwo-Wayバインディングに対応させるには?MvvmCrossでのiOS/Androidアプリ開発において、カスタムビュークラスをTwo-Wayバインディングに対応させる方法を解説する。Xamarin.FormsでAzureモバイルサービスによるToDoアプリを作成するには?ひな型プロジェクトが用意されているXamarin.iOSやXamarin.Androidではなく、Xamarin.FormsからAzureモバイルサービスを活用する基本的な方法を、簡単なToDoアプリを題材に解説する。MvvmCrossで画像をバインディングするには?MvvmCrossでのiOS/Androidアプリ開発において、画像のURLをViewへバインディングできるMvxImageViewの使い方を説明する。MvvmCrossで文字列をローカライズ(多言語化)するには?MvvmCrossでのiOS/Androidアプリ開発において、ViewModelの文字列リソースを多言語化してローカライズする方法を解説する。MvvmCrossでViewModelからViewにイベントを通知するには?(Messengerパターン)MvvmCrossでのiOS/Androidアプリ開発において、ViewModelからViewにイベントを通知するMessengerパターンの実装方法を紹介する。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。2020最適なビューへの切り替えを推奨します:スマートフォン用表示に。