読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Xamarin.Forms の StackLayout を活用するには

こんにちは。エクセルソフトの田淵です。

今回は基本中の基本、StackLayout についてです。

公式ドキュメントは StackLayout - Xamarin です。

StackLayout

積み上げ式のレイアウトです。Android では LinearLayoutiOS では 9 以上から UIStackView があるので、iOSAndroid 両方の方が StackLayout の感覚を掴んでいただけると思います。

余談ですが、iOS は 2つ前のバージョンまでサポートすれば良いと言われているので、今から Xamarin.iOS 開発をされる方は対応バージョンを iOS 9 以上にして、なるべく UIStackView を使うと良いでしょう。コチラコチラ の記事が分かりやすいと思います。

f:id:ytabuchi:20170101183245p:plain:w150

公式ドキュメントでは上記画像で説明されているレイアウトですね。

StackLayout の仕組み

StackLayout には、HorizontalOptionsVerticalOptions に加え WidthRequestHeightRequest がメインの要素です。OrientationSpacing の設定要素もあり、Orientation はデフォルトが縦 Vertical で、Spacing がデフォルトで 7(だと思います)のスペースがありますので、ピッタリくっ付けたい場合は Spacing=0 を指定してくだださい。

ここでは標準の縦の StackLayout として話を進めます。例えば次のようなレイアウトの場合、

gist.github.com

gist.github.com

一番上の BoxView は横幅の HorizotalOptions が未記入のためデフォルトの Fill が指定され WidthRequest=100 は無視されます。そのため、次のように表示されます。

f:id:ytabuchi:20170104164025p:plain:w150

Expand について

OrientationVertical の時は VerticalOptions の Expand だけが有効になり、Horizontal の時は HorizontalOptions の Expand だけが有効になります。(そのため先ほどのセクションのサンプルで言うと HorizotalOptions="StartAndExpand" を指定しても無視されます。)Expand を指定したコントロールが利用できる領域をすべての Expand が指定されたコントロールで等分して、各コントロールの領域内で余白をどこに配置するかを決めます。

例えば次のようなレイアウトの場合、一番上の BoxView は HeightRequest=100 が指定されていますが VerticalOptions が未指定のため、広がりません。残りの下三つの BoxView で残りの領域を分け合い、StartAndExpand で自身の下に余白、CenterAndExpand で上下に余白、EndAndExpand で自身の上に余白が配置されます。FillAndExpand は領域最大まで自身のサイズを広げますので、この場合では HeightRequest が無視されます。

gist.github.com

gist.github.com

次のように表示されます。

f:id:ytabuchi:20170104170938p:plain:w450

パフォーマンス

非常に使い勝手がよい 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 も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。

以上です。