Xamarin.Forms AbsoluteLayout
An AbsoluteLayout
は、明示的な値を使用して子の配置とサイズを設定するために使用されます。 位置は、デバイスに依存しない単位で、子の左上隅の左上隅 AbsoluteLayout
を基準にして指定されます。 AbsoluteLayout
では、比例の配置とサイズ変更の機能も実装されています。 さらに、他のレイアウト クラスとは異なり、 AbsoluteLayout
子を重なるように配置できます。
子 AbsoluteLayout
にサイズを設定できる場合、または要素のサイズが他の子の配置に影響を与えない場合にのみ、特別な目的のレイアウトと見なす必要があります。
AbsoluteLayout
クラスでは、次のプロパティが定義されます。
LayoutBounds
の型Rectangle
。これは、子の位置とサイズを表す添付プロパティです。 このプロパティの既定値は (0,0,AutoSize,AutoSize) です。LayoutFlags
の型AbsoluteLayoutFlags
。これは、子の配置とサイズ設定に使用されるレイアウト境界のプロパティが比例的に解釈されるかどうかを示す添付プロパティです。 このプロパティの既定値はAbsoluteLayoutFlags.None
です。
これらのプロパティはオブジェクトによって BindableProperty
サポートされます。つまり、プロパティはデータ バインディングとスタイル設定のターゲットにすることができます。 添付プロパティの詳細については、「添付プロパティ」を参照してくださいXamarin.Forms。
クラスは AbsoluteLayout
、型のプロパティを Layout<T>
定義 Children
するクラスから派生します IList<T>
。 このプロパティはChildren
ContentProperty
クラスのLayout<T>
プロパティであるため、XAML から明示的に設定する必要はありません。
ヒント
レイアウトパフォーマンスを最大限に高めるには、「レイアウトパフォーマンスの 最適化」のガイドラインに従ってください。
子の位置とサイズ
子の AbsoluteLayout
位置とサイズは、絶対値または比例値を AbsoluteLayout.LayoutBounds
使用して、各子の添付プロパティを設定することによって定義されます。 位置をスケーリングする必要があるが、サイズを固定する必要がある場合、またはその逆の場合は、子の絶対値と比例値を混在させることができます。 絶対値の詳細については、「 絶対配置とサイズ設定」を参照してください。 比例値の詳細については、「 比例配置とサイズ設定」を参照してください。
添付プロパティは AbsoluteLayout.LayoutBounds
、絶対値と比例値のどちらを使用するかに関係なく、次の 2 つの形式を使用して設定できます。
x, y
. この形式のx
場合、値とy
値は、親に対する子の左上隅の位置を示します。 子は制約がなく、サイズ自体が異なります。x, y, width, height
. この形式では、x
値とy
値は親に対する子の左上隅の位置を示し、width
値はheight
子のサイズを示します。
子のサイズを水平方向または垂直方向、またはその両方に設定するには、プロパティにwidth
値AbsoluteLayout.AutoSize
をheight
設定します。 ただし、このプロパティの過剰使用により、レイアウト エンジンが追加のレイアウト計算を実行するため、アプリケーションのパフォーマンスが低下する可能性があります。
重要
HorizontalOptions
プロパティと VerticalOptions
プロパティは、AbsoluteLayout
の子には影響しません。
絶対配置とサイズ設定
既定では、 AbsoluteLayout
デバイスに依存しない単位で指定された絶対値を使用して子の位置とサイズを設定します。これにより、レイアウトに子を配置する場所を明示的に定義します。 これは、子をコレクションに Children
追加し、各子の AbsoluteLayout
添付プロパティを AbsoluteLayout.LayoutBounds
絶対位置またはサイズ値に設定することで実現されます。
警告
デバイスの画面サイズと解像度が異なるため、子の配置とサイズ設定に絶対値を使用すると問題が発生する可能性があります。 したがって、1つのデバイス上の画面の中心の座標は、他のデバイス上でオフセットされ得る。
次の XAML は、絶対値を AbsoluteLayout
使用して子が配置される子を示しています。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AbsoluteLayoutDemos.Views.StylishHeaderDemoPage"
Title="Stylish header demo">
<AbsoluteLayout Margin="20">
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="0, 10, 200, 5" />
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="0, 20, 200, 5" />
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="10, 0, 5, 65" />
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="20, 0, 5, 65" />
<Label Text="Stylish Header"
FontSize="24"
AbsoluteLayout.LayoutBounds="30, 25" />
</AbsoluteLayout>
</ContentPage>
この例では、添付プロパティで指定された最初の 2 つの絶対値を使用して、各 BoxView
オブジェクトの位置を AbsoluteLayout.LayoutBounds
定義します。 それぞれの BoxView
サイズは、3 番目と 3 番目の値を使用して定義されます。 オブジェクトの Label
位置は、添付プロパティで指定された 2 つの絶対値を AbsoluteLayout.LayoutBounds
使用して定義されます。 サイズの値は指定 Label
されていないため、制約がなく、サイズ自体が大きくなります。 いずれの場合も、絶対値はデバイスに依存しない単位を表します。
次のスクリーンショットは、結果のレイアウトを示しています。
これに相当する C# コードを次に示します。
public class StylishHeaderDemoPageCS : ContentPage
{
public StylishHeaderDemoPageCS()
{
AbsoluteLayout absoluteLayout = new AbsoluteLayout
{
Margin = new Thickness(20)
};
absoluteLayout.Children.Add(new BoxView
{
Color = Color.Silver,
}, new Rectangle(0, 10, 200, 5));
absoluteLayout.Children.Add(new BoxView
{
Color = Color.Silver
}, new Rectangle(0, 20, 200, 5));
absoluteLayout.Children.Add(new BoxView
{
Color = Color.Silver
}, new Rectangle(10, 0, 5, 65));
absoluteLayout.Children.Add(new BoxView
{
Color = Color.Silver
}, new Rectangle(20, 0, 5, 65));
absoluteLayout.Children.Add(new Label
{
Text = "Stylish Header",
FontSize = 24
}, new Point(30,25));
Title = "Stylish header demo";
Content = absoluteLayout;
}
}
この例では、それぞれの BoxView
位置とサイズをオブジェクトを Rectangle
使用して定義します。 の位置 Label
は、オブジェクトを Point
使用して定義されます。
C# では、メソッドを使用して、コレクションに追加Children
された後の子のAbsoluteLayout
位置とサイズをAbsoluteLayout.SetLayoutBounds
設定することもできます。 このメソッドの最初の引数は子で、2 番目の引数はオブジェクトです Rectangle
。
注意
AbsoluteLayout
絶対値を使用する An は、レイアウトの境界内に収まらないよう、子の位置とサイズを設定できます。
比例配置とサイズ設定
比例 AbsoluteLayout
値を使用して子を配置およびサイズを設定できます。 これは、子をコレクションに Children
追加し、各子の AbsoluteLayout
添付プロパティを AbsoluteLayout.LayoutBounds
0 から 1 の範囲の比例位置またはサイズ値に設定することで実現されます。 位置とサイズの値は、各子に添付プロパティを AbsoluteLayout.LayoutFlags
設定することで比例します。
AbsoluteLayout.LayoutFlags
添付プロパティ (種類AbsoluteLayoutFlags
) を使用すると、子のレイアウト境界の位置とサイズの値が 、のサイズに比例することを示すフラグをAbsoluteLayout
設定できます。 子をレイアウトするときは、 AbsoluteLayout
任意のデバイス サイズに合わせて位置とサイズの値を適切にスケーリングします。
AbsoluteLayoutFlags
列挙体を使って、次のメンバーを定義できます。
None
は、値が絶対として解釈されることを示します。 これはAbsoluteLayout.LayoutFlags
添付プロパティの既定値です。XProportional
は、他のすべての値をx
絶対として扱いながら、値が比例として解釈されることを示します。YProportional
は、他のすべての値をy
絶対として扱いながら、値が比例として解釈されることを示します。WidthProportional
は、他のすべての値をwidth
絶対として扱いながら、値が比例として解釈されることを示します。HeightProportional
は、他のすべての値をheight
絶対として扱いながら、値が比例として解釈されることを示します。PositionProportional
は、サイズ値がx
絶対として解釈されるのに対し、値がy
比例として解釈されることを示します。SizeProportional
は、位置の値がwidth
絶対として解釈されるのに対し、値がheight
比例として解釈されることを示します。All
は、すべての値が比例として解釈されることを示します。
ヒント
AbsoluteLayoutFlags
列挙体はFlags
列挙体であり、列挙メンバーを結合できることを意味します。 これは、XAML でコンマ区切りのリストを使用し、C# でビットごとの OR 演算子を使用して行います。
たとえば、フラグを SizeProportional
使用し、子の幅を 0.25 に設定し、高さを 0.1 に設定すると、子は高さの幅の 4 分の 1、高さ 10 分の AbsoluteLayout
1 になります。 フラグも PositionProportional
同様です。 (0,0) の位置は左上隅に子を配置し、(1,1) の位置は右下隅に子を配置し、(0.5,0.5) の位置は子を中央 AbsoluteLayout
に配置します。
次の XAML は、 AbsoluteLayout
その子が比例値を使用して配置されていることを示しています。
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AbsoluteLayoutDemos.Views.ProportionalDemoPage"
Title="Proportional demo">
<AbsoluteLayout>
<BoxView Color="Blue"
AbsoluteLayout.LayoutBounds="0.5,0,100,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Green"
AbsoluteLayout.LayoutBounds="0,0.5,25,100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Red"
AbsoluteLayout.LayoutBounds="1,0.5,25,100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Black"
AbsoluteLayout.LayoutBounds="0.5,1,100,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<Label Text="Centered text"
AbsoluteLayout.LayoutBounds="0.5,0.5,110,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</ContentPage>
この例では、各子は比例値を使用して配置されますが、絶対値を使用してサイズが設定されます。 これは、各子PositionProportional
の添付プロパティを AbsoluteLayout.LayoutFlags
. 添付プロパティで指定された最初の AbsoluteLayout.LayoutBounds
2 つの値は、子ごとに、比例値を使用して位置を定義します。 各子のサイズは、デバイスに依存しない単位を使用して、3 番目と 3 番目の絶対値で定義されます。
次のスクリーンショットは、結果のレイアウトを示しています。
これに相当する C# コードを次に示します。
public class ProportionalDemoPageCS : ContentPage
{
public ProportionalDemoPageCS()
{
BoxView blue = new BoxView { Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds(blue, new Rectangle(0.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags(blue, AbsoluteLayoutFlags.PositionProportional);
BoxView green = new BoxView { Color = Color.Green };
AbsoluteLayout.SetLayoutBounds(green, new Rectangle(0, 0.5, 25, 100));
AbsoluteLayout.SetLayoutFlags(green, AbsoluteLayoutFlags.PositionProportional);
BoxView red = new BoxView { Color = Color.Red };
AbsoluteLayout.SetLayoutBounds(red, new Rectangle(1, 0.5, 25, 100));
AbsoluteLayout.SetLayoutFlags(red, AbsoluteLayoutFlags.PositionProportional);
BoxView black = new BoxView { Color = Color.Black };
AbsoluteLayout.SetLayoutBounds(black, new Rectangle(0.5, 1, 100, 25));
AbsoluteLayout.SetLayoutFlags(black, AbsoluteLayoutFlags.PositionProportional);
Label label = new Label { Text = "Centered text" };
AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, 110, 25));
AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);
Title = "Proportional demo";
Content = new AbsoluteLayout
{
Children = { blue, green, red, black, label }
};
}
}
この例では、各子の位置とサイズをメソッドで AbsoluteLayout.SetLayoutBounds
設定します。 メソッドの最初の引数は子で、2 番目の引数はオブジェクトです Rectangle
。 各子の位置は比例値で設定され、各子のサイズはデバイスに依存しない単位を使用して絶対値で設定されます。
注意
比例 AbsoluteLayout
値を使用する場合は、0 から 1 の範囲外の値を使用して、子を配置し、レイアウトの境界内に収まないようにサイズを設定できます。