The Xamarin.Forms FlexLayout
サンプルのダウンロード子ビューのコレクションをスタックまたはラップする場合は、FlexLayout を使用します。
Xamarin.FormsFlexLayoutバージョン 3.0 のXamarin.Forms新機能です。 これは CSS フレキシブル ボックス レイアウト モジュール (一般にフレックス レイアウトまたはフレックスボックスと呼ばれます) に基づいています。これは、レイアウト内に子を配置するための柔軟なオプションが多数含まれているためです。
FlexLayout は、 Xamarin.FormsStackLayout スタック内で子を水平方向と垂直方向に配置できる点に似ています。 ただし、 FlexLayout 1 つの行または列に収まらない数が多すぎる場合は、子を折り返すこともできます。また、向き、配置、さまざまな画面サイズへの適応のための多くのオプションもあります。
FlexLayout は Layout<View> から派生し、IList<View> 型の Children プロパティを継承します。
FlexLayout では、6 つのパブリック バインド可能なプロパティと、子要素のサイズ、向き、配置に影響を与える 5 つのバインド可能なプロパティが定義されています。 (添付のバインド可能なプロパティに慣れていない場合は、記事を参照してください。添付プロパティ)。)これらのプロパティについては、以下の「バインド可能なプロパティの詳細」および「添付のバインド可能なプロパティ」のセクションで詳しく説明します。 ただし、この記事では、これらのプロパティの多くをより非公式に説明するいくつかの一般的な使用シナリオFlexLayoutに関するセクションから始めます。 この記事の最後に、CSS スタイル シートと組み合わせるFlexLayout方法について説明します。
一般的な利用シナリオ
FlexLayoutDemos サンプル プログラムには、いくつかの一般的な使用方法FlexLayoutを示すページがいくつか含まれており、そのプロパティを試すことができます。
単純なスタックに FlexLayout を使用する
[Simple Stack]\(単純なスタック\) ページには、単純なマークアップに置き換えるStackLayout方法FlexLayoutが示されています。 このサンプルのすべてが XAML ページで定義されています。 次の FlexLayout 4 つの子が含まれています。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.SimpleStackPage"
Title="Simple Stack">
<FlexLayout Direction="Column"
AlignItems="Center"
JustifyContent="SpaceEvenly">
<Label Text="FlexLayout in Action"
FontSize="Large" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
<Button Text="Do-Nothing Button" />
<Label Text="Another Label" />
</FlexLayout>
</ContentPage>
iOS、Android、およびユニバーサル Windows プラットフォームで実行されているページを次に示します。
SimpleStackPage.xaml ファイルには、次の 3 つのプロパティFlexLayoutが表示されます。
プロパティは
Direction列挙の値にFlexDirection設定されます。 既定値は、Rowです。 プロパティを設定するとColumn、アイテムのFlexLayout1 つの列に配置される子が作成されます。a
FlexLayout内の項目が列に配置されている場合、FlexLayout垂直メイン軸と水平クロス軸を持つと言われます。プロパティは
AlignItems型FlexAlignItemsであり、項目をクロス軸に配置する方法を指定します。 このCenterオプションを選択すると、各項目が水平方向に中央揃えになります。このタスクにではなく a
StackLayoutFlexLayoutを使用していた場合は、各項目のプロパティをHorizontalOptions割り当てることで、すべてのアイテムを中央揃Centerえにします。 プロパティはHorizontalOptions、子のFlexLayout場合は機能しませんが、1 つのAlignItemsプロパティは同じ目標を達成します。 必要に応じて、添付のバインド可能なプロパティをAlignSelf使用して、個々の項目のプロパティをAlignItemsオーバーライドできます。<Label Text="FlexLayout in Action" FontSize="Large" FlexLayout.AlignSelf="Start" />この変更により、この値
Labelは読み取り順序が左から右のFlexLayout場合の左端に配置されます。プロパティの
JustifyContent種類FlexJustifyは、項目をメイン軸に配置する方法を指定します。 このオプションはSpaceEvenly、すべての項目の間、最初の項目の上、および最後の項目の下に、残っているすべての垂直領域を均等に割り当てます。を使用
StackLayoutしていた場合は、同様の効果をVerticalOptions得るために各項目のプロパティをCenterAndExpand割り当てる必要があります。 ただし、このオプションでは、最初のCenterAndExpand項目の前と最後の項目の後の 2 倍のスペースが各項目の間に割り当てられます。 のプロパティSpaceAroundFlexLayoutをCenterAndExpand設定することで、VerticalOptionsオプションをJustifyContent模倣できます。
これらの FlexLayout プロパティの詳細については、以下の「バインド可能なプロパティ」セクション で詳しく説明 します。
折り返しアイテムに FlexLayout を使用する
FlexLayoutDemos サンプルの [写真の折り返し] ページでは、その子を追加の行または列にラップする方法FlexLayoutを示します。 XAML ファイルは、そのインスタンスを FlexLayout インスタンス化し、その 2 つのプロパティを割り当てます。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.PhotoWrappingPage"
Title="Photo Wrapping">
<Grid>
<ScrollView>
<FlexLayout x:Name="flexLayout"
Wrap="Wrap"
JustifyContent="SpaceAround" />
</ScrollView>
<ActivityIndicator x:Name="activityIndicator"
IsRunning="True"
VerticalOptions="Center" />
</Grid>
</ContentPage>
このFlexLayoutプロパティはDirection設定されていないため、既定のRow設定は 、子が行に配置され、メイン軸が水平であることを意味します。
プロパティは Wrap 列挙型 FlexWrapです。 行に収まらない項目が多すぎる場合、このプロパティ設定により、項目が次の行に折り返されます。
の FlexLayout 子 ScrollViewであることに注意してください。 ページに収まらない行が多すぎる場合は、既定OrientationのScrollViewVerticalプロパティが設定され、垂直スクロールが可能になります。
このプロパティはJustifyContent、メイン軸 (横軸) に残りの領域を割り当てて、各項目が同じ量の空白スペースで囲まれるようにします。
分離コード ファイルは、サンプル写真のコレクションにアクセスし、以下のFlexLayoutコレクションにChildren追加します。
public partial class PhotoWrappingPage : ContentPage
{
// Class for deserializing JSON list of sample bitmaps
[DataContract]
class ImageList
{
[DataMember(Name = "photos")]
public List<string> Photos = null;
}
public PhotoWrappingPage ()
{
InitializeComponent ();
LoadBitmapCollection();
}
async void LoadBitmapCollection()
{
using (WebClient webClient = new WebClient())
{
try
{
// Download the list of stock photos
Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json");
byte[] data = await webClient.DownloadDataTaskAsync(uri);
// Convert to a Stream object
using (Stream stream = new MemoryStream(data))
{
// Deserialize the JSON into an ImageList object
var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream);
// Create an Image object for each bitmap
foreach (string filepath in imageList.Photos)
{
Image image = new Image
{
Source = ImageSource.FromUri(new Uri(filepath))
};
flexLayout.Children.Add(image);
}
}
}
catch
{
flexLayout.Children.Add(new Label
{
Text = "Cannot access list of bitmap files"
});
}
}
activityIndicator.IsRunning = false;
activityIndicator.IsVisible = false;
}
}
上から下に段階的にスクロールされるプログラムは次のとおりです。
FlexLayout を使用したページ レイアウト
非常に望ましいとは言え、完璧に実現するのが難しいことが多いレイアウト形式なので聖杯と呼ばれる、ウェブデザインの標準レイアウトがあります。 レイアウトは、ページ上部のヘッダーと下部のフッターで構成され、どちらもページの全幅にまで及びます。 ページの中央を占めるのはメインコンテンツですが、多くの場合、コンテンツの左側に列メニューがあり、右側には補足情報 (アサイド領域とも呼ばれます) があります。 CSS フレキシブル ボックス レイアウト仕様 のセクション 5.4.1 では、フレキシブル ボックスを使用して聖杯のレイアウトを実現する方法について説明します。
FlexLayoutDemos サンプルの Holy Grail Layout ページには、別のレイアウトに入れ子になったレイアウトを使用したFlexLayout簡単な実装が示されています。 このページは縦モードの電話用に設計されているため、コンテンツ領域の左右の領域の幅は 50 ピクセルのみです。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.HolyGrailLayoutPage"
Title="Holy Grail Layout">
<FlexLayout Direction="Column">
<!-- Header -->
<Label Text="HEADER"
FontSize="Large"
BackgroundColor="Aqua"
HorizontalTextAlignment="Center" />
<!-- Body -->
<FlexLayout FlexLayout.Grow="1">
<!-- Content -->
<Label Text="CONTENT"
FontSize="Large"
BackgroundColor="Gray"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FlexLayout.Grow="1" />
<!-- Navigation items-->
<BoxView FlexLayout.Basis="50"
FlexLayout.Order="-1"
Color="Blue" />
<!-- Aside items -->
<BoxView FlexLayout.Basis="50"
Color="Green" />
</FlexLayout>
<!-- Footer -->
<Label Text="FOOTER"
FontSize="Large"
BackgroundColor="Pink"
HorizontalTextAlignment="Center" />
</FlexLayout>
</ContentPage>
ここでは、次の手順を実行しています。
ナビゲーション領域とアサイド領域は、BoxView を使用して左と右にレンダリングされます。
XAML ファイルの最初FlexLayoutのファイルには、垂直メイン軸があり、列に配置された 3 つの子が含まれています。 これらはヘッダー、ページの本文、フッターです。 入れ子になったFlexLayout子は、3 つの子が 1 行に配置された水平方向のメイン軸を持ちます。
このプログラムでは、次の 3 つの添付バインド可能なプロパティを示します。
Order添付されたバインド可能なプロパティは、最初BoxViewに設定されます。 このプロパティは、既定値が 0 の整数です。 このプロパティを使用して、レイアウトの順序を変更できます。 一般に、開発者は、ページのコンテンツを、ナビゲーション 項目やアサイド アイテムの前にマークアップで表示することを好みます。 最初BoxViewのプロパティを他のOrder兄弟よりも小さい値に設定すると、行の最初の項目として表示されます。 同様に、プロパティを兄弟よりも大きい値に設定Orderすることで、アイテムが最後に表示されるようにすることができます。Basis添付されたバインド可能なプロパティは、50 ピクセルの幅を与えるために、2 つのBoxView項目に設定されます。 このプロパティの型FlexBasisは、既定の名前Autoの型FlexBasisの静的プロパティを定義する構造体です。 メイン軸上の項目が占める領域の量を示すピクセル サイズまたはパーセンテージを指定するために使用Basisできます。 これは、後続のすべてのレイアウトの基礎である項目サイズを指定するため、基準と呼ばれます。この
Growプロパティは、入れ子になった子とコンテンツをLabel表す子に設定されますLayout。 このプロパティは型floatであり、既定値は 0 です。 正の値に設定すると、メイン軸に沿った再メイン空間がすべて、その項目と正のGrow値を持つ兄弟に割り当てられます。 スペースは、値Gridに比例して割り当てられます。最初
Growの添付プロパティは入れ子に設定されFlexLayout、外側FlexLayoutのすべての未使用の垂直空間を占有することをFlexLayout示します。 2 番目Growの添付プロパティは、コンテンツを表す上でLabel設定され、このコンテンツが内部FlexLayout内のすべての未使用の水平空間を占有することを示します。また、子のサイズがサイズを超えているが折り返しが望ましくない場合に使用できる、同様
ShrinkのFlexLayout添付バインド可能なプロパティもあります。
FlexLayout を使用したカタログアイテム
FlexLayoutDemos サンプルのカタログ項目ページは、CSS Flex Layout Box 仕様のセクション 1.1 の例 1 に似ていますが、水平方向にスクロール可能な一連の画像と 3 匹のサルの説明が表示される点が異なります。
3匹のサルのそれぞれは、FlexLayout明示的な高さと幅が与えられ、大きなFlexLayout子でもあるaに含まれていますFrame。 この XAML ファイルでは、子の FlexLayout ほとんどのプロパティがスタイルで指定されており、そのうちの 1 つを含むすべてが暗黙的なスタイルです。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.CatalogItemsPage"
Title="Catalog Items">
<ContentPage.Resources>
<Style TargetType="Frame">
<Setter Property="BackgroundColor" Value="LightYellow" />
<Setter Property="BorderColor" Value="Blue" />
<Setter Property="Margin" Value="10" />
<Setter Property="CornerRadius" Value="15" />
</Style>
<Style TargetType="Label">
<Setter Property="Margin" Value="0, 4" />
</Style>
<Style x:Key="headerLabel" TargetType="Label">
<Setter Property="Margin" Value="0, 8" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="Blue" />
</Style>
<Style TargetType="Image">
<Setter Property="FlexLayout.Order" Value="-1" />
<Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>
<Style TargetType="Button">
<Setter Property="Text" Value="LEARN MORE" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="White" />
<Setter Property="BackgroundColor" Value="Green" />
<Setter Property="BorderRadius" Value="20" />
</Style>
</ContentPage.Resources>
<ScrollView Orientation="Both">
<FlexLayout>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Seated Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
<Label Text=" • Doesn't make a lot of noise" />
<Label Text=" • Often smiles mysteriously" />
<Label Text=" • Sleeps sitting up" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}"
WidthRequest="180"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Banana Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="Watch this monkey eat a giant banana." />
<Label Text=" • More fun than a barrel of monkeys" />
<Label Text=" • Banana not included" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}"
WidthRequest="240"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Face-Palm Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
<Label Text=" • Cynical but not unfriendly" />
<Label Text=" • Seven varieties of grimaces" />
<Label Text=" • Doesn't laugh at your jokes" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}"
WidthRequest="180"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
</FlexLayout>
</ScrollView>
</ContentPage>
次の Image 2 つの添付バインド可能なプロパティのインクルード設定の Flexlayout暗黙的なスタイル。
<Style TargetType="Image">
<Setter Property="FlexLayout.Order" Value="-1" />
<Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>
Order–1 を設定すると、Image子コレクション内での位置に関係なく、入れ子になった各ビューで最初にFlexLayout要素が表示されます。 のプロパティはAlignSelf、 ImageFlexLayout.Center これにより、既定値StretchであるプロパティのAlignItems設定がオーバーライドされます。つまりLabel、子とButton子が幅FlexLayout全体に拡大されます。
3 つの FlexLayout ビューのそれぞれ内で、空白 Label が 1 の前 Buttonにありますが、設定は Grow 1 です。 つまり、すべての余分な垂直領域がこの空白 Labelに割り当てられ、実質的に下部にプッシュ Button されます。
バインド可能なプロパティの詳細
いくつかの一般的なアプリケーション FlexLayoutを見てきたので、 FlexLayout プロパティの詳細を調べることができます。
FlexLayout は、方向と配置を制御するために、コードまたは XAML で自身に FlexLayout 設定した 6 つのバインド可能なプロパティを定義します。 (これらのプロパティの 1 つは、 Positionこの記事では取り上げません)。
FlexLayoutDemos サンプルの実験ページを使用して、バインド可能な 5 つの再メインプロパティを試すことができます。 このページでは、5 つのバインド可能なプロパティの組み合わせを設定したり、子を a FlexLayout から追加または削除したりできます。 すべての子 FlexLayout は、 Label さまざまな色とサイズのビューであり、プロパティは Text コレクション内の Children 位置に対応する数値に設定されます。
プログラムが起動すると、5 つの Picker ビューにこれら 5 つの FlexLayout プロパティの既定値が表示されます。 FlexLayout画面の下部には、次の 3 つの子が含まれています。
各ビューには灰色のLabel背景があり、そのビュー内に割り当てられた領域がFlexLayout表示されますLabel。 それ自体の FlexLayout 背景はアリスブルーです。 左右に少し余白がある場合を除き、ページの下部領域全体を占めます。
Direction プロパティ
このプロパティの Direction 型 FlexDirectionは、次の 4 つのメンバーを持つ列挙体です。
ColumnColumnReverse(または XAML の "列反転" )Row(既定値)RowReverse(または XAML の "行の逆" )
XAML では、列挙メンバー名を小文字、大文字、または大文字の混在で指定してこのプロパティの値を指定するか、CSS インジケーターと同じかっこで囲まれた 2 つの追加文字列を使用できます。 ("列反転" 文字列と "行逆" 文字列は、XAML パーサーによって使用されるクラスで FlexDirectionTypeConverter 定義されます)。
実験ページには、(左から右へ)、方向、方向、Column方向ColumnReverseがRow表示されます。
オプションの Reverse 場合、項目は右または下部から始まります。
Wrap プロパティ
このプロパティの Wrap 型 FlexWrapは、次の 3 つのメンバーを持つ列挙型です。
NoWrap(既定値)WrapReverse(または XAML の "折り返し反転" )
左から右に、次の画面に 12 人の NoWrap子のオプション Wrap が Reverse 表示されます。
プロパティがWrap設定NoWrapされていて、メイン軸が制約されていて (このプログラムのように)、メイン軸が幅や高さがすべての子に合わない場合、FlexLayoutiOS のスクリーンショットが示すように、項目を小さくしようとします。 添付されたバインド可能なプロパティを使用して、項目の Shrink 縮小を制御できます。
JustifyContent プロパティ
このプロパティの JustifyContent 型 FlexJustifyは、次の 6 つのメンバーを持つ列挙体です。
Start(または XAML の "flex-start" )、既定値CenterEnd(または XAML の "flex-end" )SpaceBetween(または XAML の "space-between" )SpaceAround(または XAML の "space-around" )SpaceEvenly
このプロパティは、項目をメイン軸 (この例では横軸) に配置する方法を指定します。
3 つのスクリーンショットすべてで、プロパティは WrapWrap. 既定値は Start 、前の Android のスクリーンショットに示されています。 ここでの iOS のスクリーンショットは、すべての項目が中央に移動されるオプションを示しています Center 。 単語 Space で始まる他の 3 つのオプションは、項目によって占有されない余分な領域を割り当てます。 SpaceBetween 項目間に均等にスペースを割り当てます。 SpaceAround は各項目の周囲に等しいスペースを置き、 SpaceEvenly 各項目の間と最初の項目の前と行の最後の項目の後に等しいスペースを置きます。
AlignItems プロパティ
このプロパティの AlignItems 型 FlexAlignItemsは、次の 4 つのメンバーを持つ列挙体です。
Stretch(既定値)CenterStart(または XAML の "flex-start" )End(または XAML の "flex-end" )
これは、子がクロス軸にどのように配置されるかを示す 2 つのプロパティのいずれか (もう AlignContent一方のプロパティ) です。 各行内では、次の 3 つのスクリーンショットに示すように、子は (前のスクリーンショットに示されているように) 引き伸ばされるか、各項目の開始、中央、または末尾に配置されます。
iOS のスクリーンショットでは、すべての子の上部が揃っています。 Android のスクリーンショットでは、項目は最も高い子に基づいて垂直方向に中央揃えされています。 UWP のスクリーンショットでは、すべての項目の下部が揃っています。
個々の項目に対して AlignItems 、バインド可能な添付プロパティを使用して設定を AlignSelf オーバーライドできます。
AlignContent プロパティ
このプロパティの AlignContent 型 FlexAlignContentは、次の 7 つのメンバーを持つ列挙型です。
Stretch(既定値)CenterStart(または XAML の "flex-start" )End(または XAML の "flex-end" )SpaceBetween(または XAML の "space-between" )SpaceAround(または XAML の "space-around" )SpaceEvenly
同様 AlignItemsに、このプロパティは AlignContent クロス軸上の子も整列しますが、行または列全体に影響します。
iOS のスクリーンショットでは、両方の行が一番上にあります。Android のスクリーンショットでは、それらは中央にあります。UWP のスクリーンショットでは、下部にあります。 行は、さまざまな方法で間隔を空けることもできます。
行または列が 1 つしかない場合、効果 AlignContent はありません。
バインド可能な添付プロパティの詳細
FlexLayout では、5 つのアタッチされたバインド可能なプロパティが定義されます。 これらのプロパティは、その子に設定され、その特定の FlexLayout 子にのみ関連します。
AlignSelf プロパティ
AlignSelfバインド可能な添付プロパティの型FlexAlignSelfは、次の 5 つのメンバーを持つ列挙型です。
Auto(既定値)StretchCenterStart(または XAML の "flex-start" )End(または XAML の "flex-end" )
個々の FlexLayout子の場合、このプロパティ設定は、それ自体に設定された AlignItems プロパティを FlexLayout オーバーライドします。 規定設定の Auto は、AlignItems 設定を使用することを意味します。
(または例) という名前labelのLabel要素の場合は、次のようにコードでプロパティをAlignSelf設定できます。
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);
の親への参照がないことにFlexLayoutLabel注意してください。 XAML では、次のようにプロパティを設定します。
<Label ... FlexLayout.AlignSelf="Center" ... />
Order プロパティ
Order プロパティは int 型です。 既定値は0です。
プロパティ Order を使用すると、子を配置する順序を FlexLayout 変更できます。 通常、a FlexLayout の子はコレクションに表示される順序と同じ順序で Children 配置されます。 この順序をオーバーライドするには、アタッチされたバインド可能なプロパティを 1 つ以上の子の 0 以外の整数値に設定 Order します。 FlexLayout次に、各子のプロパティの設定に基づいて子をOrder配置しますが、同じOrder設定の子はコレクションに表示される順序でChildren配置されます。
Basis プロパティ
バインド可能な添付プロパティはBasis、メイン軸の子に割り当てられる領域のFlexLayout量を示します。 プロパティで指定されるBasisサイズは、親FlexLayoutのメイン軸に沿ったサイズです。 したがって、 Basis 子が行に配置されたときの子の幅、または子が列に配置されている場合の高さを示します。
プロパティの Basis 型 FlexBasisは構造体です。 サイズは、デバイスに依存しない単位で指定することも、サイズに対する FlexLayout割合として指定することもできます。 プロパティの Basis 既定値は静的プロパティ FlexBasis.Autoです。これは、子の要求された幅または高さが使用されることを意味します。
コードでは、次のように、名前付きの label 40 個のデバイスに依存しない単位のプロパティLabelを設定Basisできます。
FlexLayout.SetBasis(label, new FlexBasis(40, false));
コンストラクターの 2 番目のFlexBasis引数には名前が付けられisRelative、サイズが相対 () か絶対 (truefalse) かを示します。 引数には既定値 falseが設定されているため、次のコードを使用することもできます。
FlexLayout.SetBasis(label, new FlexBasis(40));
to からのfloatFlexBasis暗黙的な変換が定義されているため、さらに簡略化できます。
FlexLayout.SetBasis(label, 40);
次のように、親のサイズを 25% に FlexLayout 設定できます。
FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));
この小数部の値は、0 から 1 の範囲である必要があります。
XAML では、デバイスに依存しない単位でサイズに数値を使用できます。
<Label ... FlexLayout.Basis="40" ... />
または、0% から 100% の範囲でパーセンテージを指定できます。
<Label ... FlexLayout.Basis="25%" ... />
FlexLayoutDemos サンプルの [Basis Experiment] ページでは、プロパティをBasis試すことができます。 ページには、背景色と前景色が交互に表示された 5 つの Label 要素の折り返された列が表示されます。 2 つのSlider要素を使用すると、2 番目と 4 Label番目の要素の値を指定Basisできます。
左側の iOS のスクリーンショットは、デバイスに依存しない単位で高さが指定されている 2 つの Label 要素を示しています。 Android画面は、それらの高 FlexLayoutさが与えられていることを示しています。 Basis 100% に設定されている場合、UWP のスクリーンショットが示すように、子は次のFlexLayout列に折り返され、その列の高さ全体を占めます。5 人の子が 1 行に配置されているかのように見えますが、実際には 5 列に配置されます。
Grow プロパティ
Grow添付されたバインド可能なプロパティは型intです。 既定値は 0 で、値は 0 以上である必要があります。
プロパティがGrow設定NoWrapされていて、子の行の幅が子の幅より小さい場合、または子の列のFlexLayout高さが 〗 より短い場合Wrap、プロパティは役割をFlexLayout果たします。 Grow プロパティは、子の残りのスペースを割り当てる方法を示します。
[Grow Experiment] \(実験 の拡大\) ページでは、交互の色の 5 Label つの要素が列に配置され、2 つの要素を使用して 2 Slider 番目と 4 番目のプロパティを調整 Grow できます Label。 左端の iOS のスクリーンショットは、既定 Grow のプロパティ 0 を示しています。
いずれかの子に正Growの値が与えられている場合、Android のスクリーンショットに示すように、その子はすべての再メイン領域を占有します。 この領域は、2 人以上の子に割り当てることもできます。 UWP のスクリーンショットでは、 Grow 2 番目 Label のプロパティは 0.5 に設定され Grow 、4 番目 Label のプロパティは 1.5 に設定されています。4 番目のプロパティでは、残っている領域の 4 Label 番目の 3 倍の領域が 2 番目 Labelの領域の 3 倍になります。
子ビューでそのスペースを使用する方法は、特定の種類の子によって異なります。 a Labelの場合、テキストは Label プロパティ HorizontalTextAlignment と VerticalTextAlignment.
Shrink プロパティ
Shrink添付されたバインド可能なプロパティは型intです。 既定値は 1 で、値は 0 以上である必要があります。
プロパティがShrink設定NoWrapされ、子の行の集計幅が子の 1 つの列のFlexLayout集計の高さを超える場合、または子の 1 つの列の集計の高さが高さよりも大きい場合Wrap、プロパティは役割をFlexLayout果たします。 通常、FlexLayout ではこれらの子はサイズを制限して表示されます。 Shrink プロパティは、フル サイズで表示する際にどの子が優先されているかを示すことができます。
[ Shrink Experiment]\(実験 の縮小\) ページでは、 FlexLayout 幅よりも多くのスペースを必要とする 5 つの Label 子の 1 つの行を含む A が FlexLayout 作成されます。 左側の iOS のスクリーンショットは、既定値が 1 のすべての Label 要素を示しています。
Android のスクリーンショットでは、 Shrink 2 番目 Label の値は 0 に設定され、全 Label 幅で表示されます。 また、4 番目 Label には 1 より大きい値が与えられ Shrink 、圧縮されています。 UWP のスクリーンショットは、可能であればShrink、両方Labelの要素に値 0 が与えられていることを示しています。
集計子サイズが Grow サイズより小さい場合や大きい場合がある場合に対応するために、値と Shrink 値の FlexLayout両方を設定できます。
FlexLayout を使用した CSS スタイル設定
に関連して3.0でXamarin.Forms導入されたCSSスタイル機能をFlexLayout使用することができます。 FlexLayoutDemos サンプルの CSS カタログ アイテム ページは、[カタログアイテム] ページのレイアウトを複製しますが、多くのスタイルの CSS スタイル シートを使用します。
元の CatalogItemsPage.xaml ファイルのセクションには、15 個のオブジェクトをResources含む 5 Setter つのStyle定義があります。 CssCatalogItemsPage.xaml ファイルでは、4 つのSetterオブジェクトのみを含む 2 つのStyle定義に縮小されています。 これらのスタイルは、CSS スタイル機能が現在サポートしていないプロパティの Xamarin.Forms CSS スタイル シートを補完します。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.CssCatalogItemsPage"
Title="CSS Catalog Items">
<ContentPage.Resources>
<StyleSheet Source="CatalogItemsStyles.css" />
<Style TargetType="Frame">
<Setter Property="BorderColor" Value="Blue" />
<Setter Property="CornerRadius" Value="15" />
</Style>
<Style TargetType="Button">
<Setter Property="Text" Value="LEARN MORE" />
<Setter Property="BorderRadius" Value="20" />
</Style>
</ContentPage.Resources>
<ScrollView Orientation="Both">
<FlexLayout>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Seated Monkey" StyleClass="header" />
<Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
<Label Text=" • Doesn't make a lot of noise" />
<Label Text=" • Often smiles mysteriously" />
<Label Text=" • Sleeps sitting up" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Banana Monkey" StyleClass="header" />
<Label Text="Watch this monkey eat a giant banana." />
<Label Text=" • More fun than a barrel of monkeys" />
<Label Text=" • Banana not included" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Face-Palm Monkey" StyleClass="header" />
<Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
<Label Text=" • Cynical but not unfriendly" />
<Label Text=" • Seven varieties of grimaces" />
<Label Text=" • Doesn't laugh at your jokes" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
</FlexLayout>
</ScrollView>
</ContentPage>
CSS スタイル シートは、セクションの最初の行で Resources 参照されます。
<StyleSheet Source="CatalogItemsStyles.css" />
また、3 つの項目のそれぞれに設定が含まれる StyleClass 2 つの要素があることにも注意してください。
<Label Text="Seated Monkey" StyleClass="header" />
···
<Label StyleClass="empty" />
これらは、CatalogItemsStyles.css スタイル シートのセレクターを参照します。
frame {
width: 300;
height: 480;
background-color: lightyellow;
margin: 10;
}
label {
margin: 4 0;
}
label.header {
margin: 8 0;
font-size: large;
color: blue;
}
label.empty {
flex-grow: 1;
}
image {
height: 180;
order: -1;
align-self: center;
}
button {
font-size: large;
color: white;
background-color: green;
}
ここでは、バインド可能な添付プロパティをいくつか FlexLayout 参照します。 セレクターには label.empty 、属性が flex-grow 表示されます。この属性では、空 Label のスタイルを設定して、空のスペースを Button指定します。 imageセレクターには属性と属性がalign-self含まれorder、どちらもアタッチされたバインド可能なプロパティにFlexLayout対応します。
あなたは、プロパティを直接設定 FlexLayout できることと、アタッチされたバインド可能なプロパティを FlexLayout. または、従来の XAML ベースのスタイルまたは CSS スタイルを使用して、これらのプロパティを間接的に設定することもできます。 重要なのは、これらのプロパティを知り、理解することです。 これらのプロパティは、本当に FlexLayout 柔軟です。
Xamarin.University を使用した FlexLayout
Xamarin.Forms 3.0 フレックスレイアウトビデオ