Xamarin.Forms AbsoluteLayout

Beispiel herunterladen Das Beispiel herunterladen

Xamarin.Forms AbsoluteLayout

Ein AbsoluteLayout wird verwendet, um untergeordnete Elemente mithilfe expliziter Werte zu positionieren und zu vergrößern. Die Position wird durch die linke obere Ecke des untergeordneten Elements relativ zur oberen linken Ecke des AbsoluteLayout-Elements in geräteunabhängigen Einheiten angegeben. AbsoluteLayout implementiert außerdem eine Funktion für proportionale Positionierung und Größenanpassung. Darüber hinaus ist es im Gegensatz zu einigen anderen Layoutklassen in der Lage, untergeordnete Elemente so zu positionieren, AbsoluteLayout dass sie sich überlappen.

Ein AbsoluteLayout sollte als Sonderlayout betrachtet werden, das nur verwendet werden kann, wenn Sie untergeordneten Elementen eine Größe auferlegen können oder wenn die Größe des Elements keine Auswirkungen auf die Positionierung anderer untergeordneter Elemente hat.

Die AbsoluteLayout-Klasse definiert die folgenden Eigenschaften:

  • LayoutBounds, vom Typ Rectangle, das eine angefügte Eigenschaft ist, die die Position und Größe eines untergeordneten Elements darstellt. Der Standardwert dieser Eigenschaft ist (0,0, AutoSize, AutoSize).
  • LayoutFlags, vom Typ AbsoluteLayoutFlags, das eine angefügte Eigenschaft ist, die angibt, ob Eigenschaften der Layoutgrenzen, die verwendet werden, um das untergeordnete Element zu positionieren und zu vergrößern, proportional interpretiert werden. Der Standardwert dieser Eigenschaft ist AbsoluteLayoutFlags.None.

Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen und stilisiert sein können. Weitere Informationen zu angefügten Eigenschaften finden Sie unter Xamarin.Forms Angefügte Eigenschaften.

Die AbsoluteLayout -Klasse leitet sich von der Layout<T> -Klasse ab, die eine Children Eigenschaft vom Typ IList<T>definiert. Die Children -Eigenschaft ist die ContentProperty der Layout<T> -Klasse und muss daher nicht explizit von XAML festgelegt werden.

Tipp

Befolgen Sie die Richtlinien unter Optimieren der Layoutleistung, um die bestmögliche Layoutleistung zu erzielen.

Position und Größe untergeordneter Elemente

Die Position und Größe von untergeordneten Elementen in einem AbsoluteLayout wird definiert, indem die AbsoluteLayout.LayoutBounds angefügte Eigenschaft jedes untergeordneten Elements mithilfe von absoluten Werten oder proportionalen Werten festgelegt wird. Absolute und proportionale Werte können für untergeordnete Elemente gemischt werden, wenn die Position skaliert werden soll, aber die Größe sollte fest bleiben oder umgekehrt. Informationen zu absoluten Werten finden Sie unter Absolute Positionierung und Größenanpassung. Informationen zu proportionalen Werten finden Sie unter Proportionale Positionierung und Größenanpassung.

Die AbsoluteLayout.LayoutBounds angefügte Eigenschaft kann mit zwei Formaten festgelegt werden, unabhängig davon, ob absolute oder proportionale Werte verwendet werden:

  • x, y. Bei diesem Format geben die x Werte und y die Position der linken oberen Ecke des untergeordneten Elements relativ zum übergeordneten Element an. Das Kind ist nicht eingeschränkt und hat die Größe selbst.
  • x, y, width, height. Bei diesem Format geben die x Werte und y die Position der linken oberen Ecke des untergeordneten Elements relativ zum übergeordneten Element an, während die width Werte und height die Größe des untergeordneten Elements angeben.

Wenn Sie angeben möchten, dass sich ein untergeordnetes Element horizontal oder vertikal oder beide Größen ausweitet, legen Sie die width Werte und/oder height auf die AbsoluteLayout.AutoSize -Eigenschaft fest. Eine übermäßige Verwendung dieser Eigenschaft kann jedoch die Anwendungsleistung beeinträchtigen, da die Layout-Engine zusätzliche Layoutberechnungen ausführt.

Wichtig

Die Eigenschaften HorizontalOptions und VerticalOptions haben keinen Effekt auf untergeordnete Elemente eines AbsoluteLayout.

Absolute Positionierung und Größenanpassung

Standardmäßig AbsoluteLayout werden untergeordnete Elemente mit absoluten Werten positioniert und groß, die in geräteunabhängigen Einheiten angegeben sind und explizit definieren, wo untergeordnete Elemente im Layout platziert werden sollen. Dies wird erreicht, indem der Auflistung eines AbsoluteLayout untergeordneten Elements untergeordnete Children Elemente hinzugefügt und die AbsoluteLayout.LayoutBounds angefügte Eigenschaft für jedes untergeordnete Element auf absolute Positions- und/oder Größenwerte festgelegt wird.

Warnung

Die Verwendung absoluter Werte für die Positionierung und Größenanpassung untergeordneter Elemente kann problematisch sein, da verschiedene Geräte unterschiedliche Bildschirmgrößen und Auflösungen aufweisen. Daher können die Koordinaten für die Mitte des Bildschirms auf einem Gerät auf anderen Geräten offset sein.

Im folgenden XAML-Code wird ein AbsoluteLayout angezeigt, dessen untergeordnete Elemente mit absoluten Werten positioniert werden:

<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>

In diesem Beispiel wird die Position jedes BoxView Objekts mithilfe der ersten beiden absoluten Werte definiert, die in der AbsoluteLayout.LayoutBounds angefügten Eigenschaft angegeben werden. Die Größe der einzelnen BoxView Werte wird mit den dritten und vierten Werten definiert. Die Position des Label Objekts wird mithilfe der beiden absoluten Werte definiert, die in der AbsoluteLayout.LayoutBounds angefügten Eigenschaft angegeben sind. Größenwerte werden für nicht Labelangegeben, und daher ist es nicht eingeschränkt und hat die Größe selbst. In allen Fällen stellen die absoluten Werte geräteunabhängige Einheiten dar.

Der folgende Screenshot zeigt das Layout, das sich ergibt:

Untergeordnete Elemente, die in einem AbsoluteLayout mit absoluten Werten platziert werden

Der entsprechende C#-Code ist unten dargestellt:

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;
    }
}

In diesem Beispiel werden die Position und Größe der einzelnen BoxView Objekte mithilfe eines Rectangle -Objekts definiert. Die Position des Label wird mithilfe eines Point -Objekts definiert.

In C# ist es auch möglich, die Position und Größe eines untergeordneten einer AbsoluteLayout festzulegen, nachdem es der Children Auflistung hinzugefügt wurde, mithilfe der AbsoluteLayout.SetLayoutBounds -Methode. Das erste Argument für diese Methode ist das untergeordnete, das zweite ein Rectangle -Objekt.

Hinweis

Ein AbsoluteLayout , der absolute Werte verwendet, kann untergeordnete Elemente positionieren und so groß sein, dass sie nicht in die Grenzen des Layouts passen.

Proportionale Positionierung und Größenanpassung

Ein AbsoluteLayout kann untergeordnete Elemente mithilfe proportionaler Werte positionieren und vergrößern. Dies wird erreicht, indem der Children Auflistung von AbsoluteLayoutuntergeordnete Elemente hinzugefügt und die AbsoluteLayout.LayoutBounds angefügte Eigenschaft für jedes untergeordnete Element auf proportionale Positions- und/oder Größenwerte im Bereich 0-1 festgelegt wird. Positions- und Größenwerte werden proportional gemacht, indem die AbsoluteLayout.LayoutFlags angefügte Eigenschaft für jedes untergeordnete Element festgelegt wird.

Mit AbsoluteLayout.LayoutFlags der angefügten Eigenschaft vom Typ AbsoluteLayoutFlagskönnen Sie ein Flag festlegen, das angibt, dass die Layoutgrenzenposition und die Größenwerte für ein untergeordnetes Element proportional zur Größe von AbsoluteLayoutsind. Wenn Sie ein untergeordnetes Element auslegen, AbsoluteLayout skalieren Sie die Positions- und Größenwerte entsprechend auf eine beliebige Gerätegröße.

Die AbsoluteLayoutFlags-Enumeration definiert die folgenden Member:

  • Nonegibt an, dass Werte als absolut interpretiert werden. Dies ist der Standardwert der angefügten AbsoluteLayout.LayoutFlags-Eigenschaft.
  • XProportionalgibt an, dass der x Wert als proportional interpretiert wird, während alle anderen Werte als absolut behandelt werden.
  • YProportionalgibt an, dass der y Wert als proportional interpretiert wird, während alle anderen Werte als absolut behandelt werden.
  • WidthProportionalgibt an, dass der width Wert als proportional interpretiert wird, während alle anderen Werte als absolut behandelt werden.
  • HeightProportionalgibt an, dass der height Wert als proportional interpretiert wird, während alle anderen Werte als absolut behandelt werden.
  • PositionProportionalgibt an, dass die x Werte und y als proportional interpretiert werden, während die Größenwerte als absolut interpretiert werden.
  • SizeProportionalgibt an, dass die width Werte und height als proportional interpretiert werden, während die Positionswerte als absolut interpretiert werden.
  • Allgibt an, dass alle Werte als proportional interpretiert werden.

Tipp

Die AbsoluteLayoutFlags Enumeration ist eine Flags Enumeration, was bedeutet, dass Enumerationsmember kombiniert werden können. Dies wird in XAML mit einer durch Trennzeichen getrennten Liste und in C# mit dem bitweisen OR-Operator erreicht.

Wenn Sie beispielsweise das SizeProportional Flag verwenden und die Breite eines untergeordneten Elements auf 0,25 und die Höhe auf 0,1 festlegen, ist das untergeordnete Element ein Viertel der Breite und AbsoluteLayout ein Zehntel der Höhe. Das PositionProportional Flag ist ähnlich. Eine Position von (0,0) versetzt das Untergeordnete in die obere linke Ecke, während eine Position von (1,1) das Kind in die rechte untere Ecke stellt, und eine Position von (0,5,0,5) zentriert das Kind innerhalb des AbsoluteLayout.

Im folgenden XAML-Code wird ein AbsoluteLayout angezeigt, dessen untergeordnete Elemente mit proportionalen Werten positioniert werden:

<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>

In diesem Beispiel wird jedes untergeordnete Element mit proportionalen Werten positioniert, die Größe jedoch mit absoluten Werten. Dies wird erreicht, indem die AbsoluteLayout.LayoutFlags angefügte Eigenschaft jedes untergeordneten Elements auf PositionProportionalfestgelegt wird. Die ersten beiden Werte, die in der AbsoluteLayout.LayoutBounds angefügten Eigenschaft für jedes untergeordnete Element angegeben werden, definieren die Position mit proportionalen Werten. Die Größe jedes untergeordneten Elements wird mit den dritten und vierten absoluten Werten definiert, wobei geräteunabhängige Einheiten verwendet werden.

Der folgende Screenshot zeigt das Layout, das sich ergibt:

Untergeordnete Elemente, die in einem AbsoluteLayout mit proportionalen Positionswerten platziert werden

Der entsprechende C#-Code ist unten dargestellt:

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 }
        };
    }
}

In diesem Beispiel wird die Position und Größe jedes untergeordneten Elements mit der AbsoluteLayout.SetLayoutBounds -Methode festgelegt. Das erste Argument für die -Methode ist das untergeordnete, das zweite ein Rectangle -Objekt. Die Position jedes untergeordneten Elements wird mit proportionalen Werten festgelegt, während die Größe jedes untergeordneten Elements mit absoluten Werten festgelegt wird, wobei geräteunabhängige Einheiten verwendet werden.

Hinweis

Ein AbsoluteLayout , der proportionale Werte verwendet, kann untergeordnete Elemente positionieren und größenmäßig so positionieren, dass sie nicht in die Grenzen des Layouts passen, indem Werte außerhalb des Bereichs von 0 bis 1 verwendet werden.