いつの間にかXamarin.FormsのmasterブランチにFlexLayoutが生えていたので試してみました。
いつの間にかXamarin.Flexなるディレクトリが生えてるhttps://t.co/Gk1qspwOy9
— ざまりん.ふぉーむずマン🚲 (@ticktackmobile) February 15, 2018
というかFlexLayoutが生えてるhttps://t.co/I7JW4HcbYS
— ざまりん.ふぉーむずマン🚲 (@ticktackmobile) February 15, 2018
ロードマップでは Q1 2018 Pre-Release - Q2 2018 Stable として予定されている機能です。もうすぐver.2.6.0-preとしてNuGetで普通にダウンロードできるようになると思います。
What is FlexLayout ?
端的に言うとCSSにおけるFlexboxのXamarin.Forms版がFlexLayoutです。
Xamarin.Forms標準ではこ要素を折り返して並べてくれるようなLayuoutが無いので、それだけの用途でも便利そうですね。
Xamarin.Forms.FlexLayoutちょっと使ってみた pic.twitter.com/LGgwlrWkEz
— ざまりん.ふぉーむずマン🚲 (@ticktackmobile) 2018年2月18日
内部的には
- xamarin/flexを移植した
Xamarin.Flex名前空間 Xamarin.Flex.Itemを利用して子要素をレイアウトするFlexLayout、レイアウト指定用のEnumやTypeConverter
といった構成になっています。
FlexLayoutのレイアウト指定
FlexLayoutがCSSに置けるFlexコンテナ、FlexLayoutの子要素がFlexアイテムに相当します。
Flexコンテナに設定するプロパティ
CSSでFlexコンテナに設定できるプロパティは、Xamarin.FormsではFlexLayouクラスのプロパティとして実装されています。
| Flexbox(CSS) | FlaxLayout(XF) |
|---|---|
| flex-direction | Direction |
| flex-wrap | Wrap |
| justify-content | JustifyContent |
| align-items | AlignItems |
| align-content | AlignContent |
| 対応なし | Position |
Position はCSSのFlexboxと異なる部分、RelativeかAbsoluteを指定できます。
- Relative:FlexLayoutのルールで配置される位置や大きさが決まる。
- Absolute：FlexアイテムのLeft,Top,Right,Bottomによって位置と大きさが決まる。(ようなんですが、それらを設定する手段が無いように見える...)
Flexアイテムに設定するプロパティ
CSSでFlexアイテムに設定できるプロパティは、Xamarin.FormsではFlexLayouクラスのAttachedPropertyとして実装されています。
| Flexbox(CSS) | FlaxLayout(XF) |
|---|---|
| order | Order |
| flex-grow | Grow |
| flex-shrink | Shrink |
| align-self | AlignSelf |
| flex-basis | Basis |
