こんにちは。エクセルソフトの田淵です。
今回は基本中の基本、StackLayout についてです。
公式ドキュメントは StackLayout - Xamarin です。
StackLayout
積み上げ式のレイアウトです。Android では LinearLayout、iOS では 9 以上から UIStackView があるので、iOS／Android 両方の方が StackLayout の感覚を掴んでいただけると思います。
余談ですが、iOS は 2つ前のバージョンまでサポートすれば良いと言われているので、今から Xamarin.iOS 開発をされる方は対応バージョンを iOS 9 以上にして、なるべく UIStackView を使うと良いでしょう。コチラ や コチラ の記事が分かりやすいと思います。
公式ドキュメントでは上記画像で説明されているレイアウトですね。
StackLayout の仕組み
StackLayout には、HorizontalOptions と VerticalOptions に加え WidthRequest と HeightRequest がメインの要素です。Orientation と Spacing の設定要素もあり、Orientation はデフォルトが縦 Vertical で、Spacing がデフォルトで 7（だと思います）のスペースがありますので、ピッタリくっ付けたい場合は Spacing=0 を指定してくだださい。
ここでは標準の縦の StackLayout として話を進めます。例えば次のようなレイアウトの場合、
一番上の BoxView は横幅の HorizotalOptions が未記入のためデフォルトの Fill が指定され WidthRequest=100 は無視されます。そのため、次のように表示されます。
Expand について
Orientation が Vertical の時は VerticalOptions の Expand だけが有効になり、Horizontal の時は HorizontalOptions の Expand だけが有効になります。（そのため先ほどのセクションのサンプルで言うと HorizotalOptions="StartAndExpand" を指定しても無視されます。）Expand を指定したコントロールが利用できる領域をすべての Expand が指定されたコントロールで等分して、各コントロールの領域内で余白をどこに配置するかを決めます。
例えば次のようなレイアウトの場合、一番上の BoxView は HeightRequest=100 が指定されていますが VerticalOptions が未指定のため、広がりません。残りの下三つの BoxView で残りの領域を分け合い、StartAndExpand で自身の下に余白、CenterAndExpand で上下に余白、EndAndExpand で自身の上に余白が配置されます。FillAndExpand は領域最大まで自身のサイズを広げますので、この場合では HeightRequest が無視されます。
次のように表示されます。
パフォーマンス
非常に使い勝手がよい StackLayout ですが、ネストが多く発生する場合は、AbsoluteLayout や Grid を使用した方が良いみたいです。公式ドキュメントの ListView のパフォーマンスを向上させるには？ を参照してください。
Xamarin 気になった方は
是非 ダウンロード して触ってみてください。Visual Studio 2015 をご利用の方は Update 3 にアップデートする際にカスタムインストールで Xamarin を追加しましょう。 学習用リソース や JXUG リンクページ に参考資料を纏めてますので併せてどうぞ。
Xamarin の導入支援サービスを始めました。ベースは基本的なアプリを一緒に作ることで Xamarin を使えるようになって頂く内容ですが、ご要望に応じて講習内容のカスタマイズも可能です。詳しくは田淵までお問い合わせください(^^)
有償セミナー、トレーニング | Xamarin : XLsoft エクセルソフト
Xamarin の情報が欲しい方はこのブログも購読いただいたり、私のTwitterアカウントをフォローいただいたりすると嬉しいです。
私が所属している エクセルソフト の宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの ReSharper (JetBrains)、 や Atlassian の JIRA, Confluence、Office/PDF ファイルを .NET/Java で操作するライブラリ Aspose（アスポーズ）、Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる TestComplete などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。
以上です。
