Xamarin.Forms の画像レイアウトを確認する

Xamarin.Formsで画像を表示する場合のレイアウトについて確認しました。

サンプルはこちら

github.com

Xamarin.Formsで画像を表示するには、2点設定する必要があります。

  • 画像の表示アスペクトを設定する
  • 表示領域を設定する

画像の表示アスペクトを設定する

アスペクトには3つの種類があります。

  • AspectFit
  • AspectFill
  • Fill

AspectFit

アスペクトを維持したまま、表示領域にきっちり収まるサイズで表示します。 表示領域が余る場合は空白スペースになります。

AspectFill

アスペクトを維持したまま、表示領域全体を画像で満たすように表示します。 画像と表示領域のサイズによっては、画像が切れて表示されます。

Fill

アスペクトを無視し、表示領域全体を満たすように表示します。

画像の表示領域を設定する

Xamarin.Formsのレイアウトを使用して、画像の表示領域を決めます。 http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/layouts/

*StackLayoutやGridでレイアウトのサイズを指定しなかった場合、 画像そのままのサイズで画像が表示されます。

画像をそのまま表示する

Xamarin.Forms でサイズを指定せずに画像を表示する

サイズの指定を行わない場合、アスペクトの設定に関わらず、 どれも同じに表示になることがわかります。

f:id:mattsuDev:20150628184907p:plain

サイズを変更してAspect設定の違いを確認する

Xamarin.Formsで画面幅いっぱいにレイアウトする

全体のレイアウトを横幅いっぱいにするようにしました。 表示領域を設定した場合、アスペクトの設定による表示の違いが生じることがわかります。 今回はレイアウトの配置設定を変更し、画面幅いっぱいに表示するようにしています。

f:id:mattsuDev:20150628184932p:plain

配置設定について

配置設定は"LayoutOptions"を使用します。 "LayoutOptions"には8つのタイプがあります。

  • Start
  • Center
  • End
  • Fill
  • StartAndExpand
  • CenterAndExpand
  • EndAndExpand
  • FillAndExpand

Expandがついているものに関しては画面いっぱいの表示になりそうな気がしますが、 実際はしてくれません。 画面いっぱいの表示になるのは"Fill"と"FillAndExpand"のみです。 注意してください。 設定の仕方が悪いだけなのでしょうか?