AbsoluteLayout

[アーティクル]
02/13/2024

.NET MAUI AbsoluteLayout.

.NET Multi-platform App UI (.NET MAUI) AbsoluteLayout は、明示的な値を使用して子を配置およびサイズ変更するために使用されます。位置は、デバイスに依存しない単位で、AbsoluteLayout の左上隅を基準とする子の左上隅の位置によって指定されます。 AbsoluteLayout では、比例の配置とサイズ変更の機能も実装されています。さらに、他のレイアウトクラスとは異なり、AbsoluteLayout は子を重ねて配置することができます。

AbsoluteLayout は、子のサイズを設定できる場合、または要素のサイズが他の子の位置に影響を与えない場合にのみ使用される、特別な目的のレイアウトシステムと見なす必要があります。

AbsoluteLayout クラスでは、次のプロパティが定義されます。

Rect 型の LayoutBounds は、子の位置とサイズを表す添付プロパティです。このプロパティの既定値は (0、0、AutoSize、AutoSize) です。
AbsoluteLayoutFlags 型の LayoutFlags は、子の配置とサイズ設定に使用されるレイアウト境界のプロパティが、比例して解釈されるかどうかを示す添付プロパティです。このプロパティの既定値は AbsoluteLayoutFlags.None です。

これらのプロパティは、BindableProperty オブジェクトを基盤としています。つまり、プロパティをデータバインディングの対象にして、スタイル設定することができます。添付プロパティについて詳しくは、「.NET MAUI Attached Properties」を参照してください。

子の位置とサイズ

AbsoluteLayout の子の位置とサイズは、絶対値または比例値を使用して、各子の AbsoluteLayout.LayoutBounds 添付プロパティを設定することで定義されます。位置をスケーリングする必要があるがサイズは固定する必要がある場合、またはその逆の場合は、子の絶対値と比例値を混在させることができます。絶対値の詳細については、「絶対値での配置とサイズ設定」を参照してください。比例値の詳細については、「比例値での配置とサイズ設定」を参照してください。

AbsoluteLayout.LayoutBounds 添付プロパティは、絶対値と比例値のどちらが使用されているかに関係なく、次の 2 つの形式を使用して設定できます。

x, y。この形式では、x と y の値は、子の左上隅の位置が親に対して相対的に示されます。子は制約がなく、サイズ自体が制限されていません。
x, y, width, height。この形式では、y と x の値は子は親に対して左上隅の位置にあることを示し、width と height 値は子のサイズを示します。

子のサイズを水平方向または垂直方向、またはその両方に設定するには、width や height の値を AbsoluteLayout.AutoSize プロパティに設定します。ただし、このプロパティを過剰に使用すると、レイアウトエンジンが追加のレイアウト計算を実行するため、アプリケーションのパフォーマンスが低下する場合があります。

重要

HorizontalOptions プロパティと VerticalOptions プロパティは、AbsoluteLayout の子には影響しません。

絶対配置とサイズ設定

既定では、AbsoluteLayout は、デバイスに依存しない単位で指定された絶対値を使用して子の位置とサイズを設定します。これは、子をレイアウトに配置する場所を明示的に定義します。これは、子を AbsoluteLayout に追加し、各子の AbsoluteLayout.LayoutBounds 添付プロパティを絶対位置またはサイズ値に設定することで実現されます。

警告

デバイスによって画面サイズと解像度が異なるため、子の配置とサイズ設定に絶対値を使用すると問題が発生する可能性があります。したがって、1 つのデバイス上の画面の中心の座標は、他のデバイス上でオフセットされる可能性があります。

次の XAML は、AbsoluteLayout の子が絶対値を使用して配置されているユーザーを示しています。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AbsoluteLayoutDemos.Views.XAML.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 番目と 4 番目の値を使用して定義されます。 Label オブジェクトの位置は、AbsoluteLayout.LayoutBounds 添付プロパティで指定されている 2 つの絶対値を使用して定義されます。 Label のサイズの値は指定されていないため、制約がなく、サイズ自体も制限されません。いずれの場合も、絶対値はデバイスに依存しない単位を表します。

次のスクリーンショットは、結果のレイアウトを示しています。

Children placed in an AbsoluteLayout using absolute values.

これに相当する C# コードを次に示します。

public class StylishHeaderDemoPage : ContentPage
{
    public StylishHeaderDemoPage()
    {
        AbsoluteLayout absoluteLayout = new AbsoluteLayout
        {
            Margin = new Thickness(20)
        };

        absoluteLayout.Add(new BoxView
        {
            Color = Colors.Silver
        }, new Rect(0, 10, 200, 5));
        absoluteLayout.Add(new BoxView
        {
            Color = Colors.Silver
        }, new Rect(0, 20, 200, 5));
        absoluteLayout.Add(new BoxView
        {
            Color = Colors.Silver
        }, new Rect(10, 0, 5, 65));
        absoluteLayout.Add(new BoxView
        {
            Color = Colors.Silver
        }, new Rect(20, 0, 5, 65));

        absoluteLayout.Add(new Label
        {
            Text = "Stylish Header",
            FontSize = 24
        }, new Point(30,25));                     

        Title = "Stylish header demo";
        Content = absoluteLayout;
    }
}

この例では、それぞれの BoxView の位置とサイズを Rect オブジェクトを使用して定義します。 Label の位置は、Point オブジェクトを使用して定義されます。 C# の例では、次の Add の拡張メソッドを使用して AbsoluteLayout に子を追加します。

using Microsoft.Maui.Layouts;

namespace Microsoft.Maui.Controls
{
    public static class AbsoluteLayoutExtensions
    {
        public static void Add(this AbsoluteLayout absoluteLayout, IView view, Rect bounds, AbsoluteLayoutFlags flags = AbsoluteLayoutFlags.None)
        {
            if (view == null)
                throw new ArgumentNullException(nameof(view));
            if (bounds.IsEmpty)
                throw new ArgumentNullException(nameof(bounds));

            absoluteLayout.Add(view);
            absoluteLayout.SetLayoutBounds(view, bounds);
            absoluteLayout.SetLayoutFlags(view, flags);
        }

        public static void Add(this AbsoluteLayout absoluteLayout, IView view, Point position)
        {
            if (view == null)
                throw new ArgumentNullException(nameof(view));
            if (position.IsEmpty)
                throw new ArgumentNullException(nameof(position));

            absoluteLayout.Add(view);
            absoluteLayout.SetLayoutBounds(view, new Rect(position.X, position.Y, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
        }
    }
}

C# では、レイアウトを追加した後に、AbsoluteLayout.SetLayoutBounds メソッドを使用して AbsoluteLayout の子の位置とサイズを設定することもできます。このメソッドの最初の引数は子で、2 つ目は Rect オブジェクトです。

Note

絶対値を使用する AbsoluteLayout は、レイアウトの境界内に収まないように子の位置とサイズを設定できます。

比例位置とサイズ設定

AbsoluteLayout は、比例値を使用して子の位置とサイズを設定できます。そのためには、子を AbsoluteLayout に追加し、各子の AbsoluteLayout.LayoutBounds 添付プロパティを 0 から 1 の範囲の比例位置やサイズ値に設定します。位置とサイズの値は、各子に AbsoluteLayout.LayoutFlags 添付プロパティを設定して、比例させます。

AbsoluteLayoutFlags 型のAbsoluteLayout.LayoutFlags 添付プロパティを使用すると、子のレイアウト境界の位置とサイズの値が 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 に設定すると、子は AbsoluteLayout の幅の 4 分の 1、高さの 1/10 になります。 PositionProportional フラグも同様です。位置が (0,0) の場合、子は左上隅に配置され、(1,1) の位置は子を右下隅に配置し、(0.5,0.5) の位置は子を AbsoluteLayout の中心に配置します。

次の XAML は、子が比例値を使用して配置されている AbsoluteLayout を示しています。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AbsoluteLayoutDemos.Views.XAML.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>

この例では、各子は比例値を使用して配置されますが、絶対値を使用してサイズ設定されます。これを実現するには、子の AbsoluteLayout.LayoutFlags 添付プロパティを PositionProportional に設定します。 AbsoluteLayout.LayoutBounds 添付プロパティで指定されている最初の 2 つの値は、比例値を使用して、子ごとに位置を定義します。各子のサイズは、デバイスに依存しない単位を使用して、3 番目と 4 番目の絶対値で定義されます。

次のスクリーンショットは、結果のレイアウトを示しています。

Children placed in an AbsoluteLayout using proportional position values.

これに相当する C# コードを次に示します。

public class ProportionalDemoPage : ContentPage
{
    public ProportionalDemoPage()
    {
        BoxView blue = new BoxView { Color = Colors.Blue };
        AbsoluteLayout.SetLayoutBounds(blue, new Rect(0.5, 0, 100, 25));
        AbsoluteLayout.SetLayoutFlags(blue, AbsoluteLayoutFlags.PositionProportional);

        BoxView green = new BoxView { Color = Colors.Green };
        AbsoluteLayout.SetLayoutBounds(green, new Rect(0, 0.5, 25, 100));
        AbsoluteLayout.SetLayoutFlags(green, AbsoluteLayoutFlags.PositionProportional);

        BoxView red = new BoxView { Color = Colors.Red };
        AbsoluteLayout.SetLayoutBounds(red, new Rect(1, 0.5, 25, 100));
        AbsoluteLayout.SetLayoutFlags(red, AbsoluteLayoutFlags.PositionProportional);

        BoxView black = new BoxView { Color = Colors.Black };
        AbsoluteLayout.SetLayoutBounds(black, new Rect(0.5, 1, 100, 25));
        AbsoluteLayout.SetLayoutFlags(black, AbsoluteLayoutFlags.PositionProportional);

        Label label = new Label { Text = "Centered text" };
        AbsoluteLayout.SetLayoutBounds(label, new Rect(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 つ目は Rect オブジェクトです。各子の位置は比例値で設定され、各子のサイズはデバイスに依存しない単位を使用して絶対値で設定されます。

Note

比例値を使用する AbsoluteLayout では、0 から 1 の範囲外の値を使用して、レイアウトの境界内に収まないように、子の位置とサイズを設定できます。

AbsoluteLayout

子の位置とサイズ

絶対配置とサイズ設定

比例位置とサイズ設定

フィードバック

その他のリソース