タイトル：WorkingWithImages

本日の目標：

Xamarin.formsの公式 SampleアプリのWorkingWithImagesを作ろう

公式 SampleにあるWorkingWithImagesを作ります。この Sampleでは画像の表示の仕方について、 3つの異なる方法がある事を学びます。

1つ目は Local形式で表示させる LocalImages。これはソリューションの中に画像をあらかじめ保存しておく方法です。

2つ目は Download形式で表示させるDownloadImages。これは画像が保管されているネット上の URLを指定する事で表示させる方法です。

3つ目は Embedded形式で表示させるEmbeddedImages。これは埋め込み画像と呼ばれるもので、 LocalImagesとほとんど同じです。

それでは最初に、今回作成するアプリの完成型を先に確認しておきましょう。作成したコードを実行すると、左の画面が表示されます。

左の画面では、 Local形式で画像を表示しています。画像の名前が waterfront.jpgですので、 waterfront.jpgという画像ファイルがソリューション中に保存されているということです。

また、 Local形式 (❶)、 Download形式(❷)、 Embedded形式 (❸)の画像は、それぞれ上のタブを切り替える事で参照できるようになっています。次のスライドに Download形式とEmbedded形式のタブをクリックしたときの画像を載せました。

❶ ❷ ❸

ご覧のように、一見画像が同じように表示されているだけですが、それぞれ画像の保存先や出力の仕方が異なっています。

以上がWorkingWithImagesの完成型になります。

それでは次のスライドから、 Local形式、 Download形式、 Embedded形式の順番で、実際に画像を表示させるまでの流れを見ていきましょう。

また、画面中のソリューションの部分 (❹)は以下ようになっています。

まずはソリューションの新規作成から、 Hello, Forms!を作成します。この流れは別のスライドで紹介していますので、今回は割愛します。

ちなみに名前はWorkingWithImages2としました。

すると以下のような画面が表示されているはずです。

❹

それではいよいよ次のスライドから、実際にソースコードを書く流れに移ります。

作成の流れとして、このソリューションのコア部分であるWorkingWithImages2にファイルを追加していくということを頭に入れておいてください。

これを以下のように書き換えてみてください。1. タブの作成

最初はタブの作成です。ソリューションの一覧から App.csを表示させてみてください。以下のようになっているかと思います。

App.cs

App.cs❺ ❻

変更点は上で示した (❺)と (❻)です。 (❻)ではそれぞれのタブを作成しており、 Titleで名前を指定しています。

App.cs

2〜 4行目で、

LocalImagesXamlDownloadImagesXamlEmbeddedImagesXaml

という表記があるかと思います。

これらはつまり、それぞれのファイル (クラス )を参照しているということなのです。

しかしこれらのファイルはまだ作成されておらず、このまま実行してもエラーが出るだけです。

ですので次は、これらそれぞれのファイルを別々に作っていくという流れになります。

以上が App.csの設定になります。

さて、次の操作ですが、もう一度前スライドの (❻)を見てみましょう。

2. LocalImagesの作成

まずは LocalImagesの作成、すなわち Local形式で画像を表示する流れを説明します。

[WorkingWithImages2]フォルダで右クリックをし、 [追加 ]-[新しいファイル ]を選択してください。

[Forms]-[Forms ContentPage Xaml]を選択し、名前を LocalImagesXamlにします。

新規ボタンを押してください。

[WorkingWithImages2]フォルダにLocalImagesXaml.xamlとLocalImagesXaml.xaml.csが追加されました。

この流れがわからない人は Textbookスライドを参照してください。このファイル作成の流れは重要なので覚えておきましょう。

ファイルを追加すると上のような画面になっているかと思います。

ここからは LocalImagesXamlに加筆していくのでLocalImagesXamlを表示させてあります。

簡単に解説をします。

(❼ )では画像の表示位置を指定しています。VerticalOptionsで縦位置、 HorizontalOptions で横の位置を指定します。今は中央に画像を表示させたいので、ともに Centerを代入しているということです。

(❽ )では画像の前後に表示したいテキストを書いています。

(❾ )では表示したい画像を指定しています。今回は waterfront.jpgを指定しました。

では実際にコードを追加していきます。以下のように表示されているコードを、

LocalImagesXaml.xaml

以下のように書き換えてください。

LocalImagesXaml.xaml

❼

❽ ❾

画像の保存は最後に行うとして、以上が LocalImages作成の流れになります。

では次は DownloadImagesの作成に移ります。

3. DownloadImagesの作成

まずは DownloadImagesの作成、すなわちDownload形式で画像を表示する流れを説明します。

LocalImagesと同じ手順で、[WorkingWithImages2]フォルダにDownloadImagesXaml.xamlとDownloadImagesXaml.xaml.csを追加してください。

そしたら DownloadImagesXaml.xamlをLocalImagesと同じように、次のページのように書き換えてください。

ご覧の通り、 LocalImagesと大きく違うのは (❿)で示した 1文だけです。LocalImagesでは画像の名前を直接指定していましたが、 DownloadImagesでは URLを指定しています。DownloadImagesの名前からもわかる通り、この形式ではネット上にある画像をローカルに保存することなく出力するので、

DownloadImagesXaml.xaml

❿

URLを指定しておくだけで、画像を表示できるのです。

それでは最後の EmbeddedImagesに移りましょう。

実は埋め込み画像は、 LocalImagesと多くの点で類似しており、ほとんど同じと考えて問題ありません。

厳密な解説は

Xamarin公式ホームページ (http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/images/)

に掲載されておりますが、内容は非常に高度なものとなっております。

ですので今回は EmbeddedImagesは LocalImagesとほぼ同じと考えて、話を進めていきます。

それでは今までと同じように、 EmbeddedImagesXaml.xamlを作成し、次のページのように書き換えてください。

4. EmbeddedImagesの作成

最後は EmbeddedImagesですが、コードをいじる前に、そもそも EmbeddedImagesがどういうものか、イメージがつきにくいと思います。

LocalImagesや DownloadImagesと同様に、名前の意味を考えてみましょう。

Embedとは埋め込むという意味です。したがって EmbeddedImagesは日本語で、

埋め込み画像

という意味です。

EmbeddedImagesXaml.xaml

⓫

今回も大きな違いは、 (⓫)の 1文だけです。

前半の local:ImageResource は定型文です。

後半では画像を指定しますが、 LocalImagesと違い、画像を上の階層から指定する必要があります。

bench.jpg は WorkingWithImages というフォルダに保存されているため、WorkingWithImages の bench.jpg という意味で、

WorkingWithImages.bench.jpg と記述する必要があります。

これは階層が何層になろうとも同じことです。