Sdílet prostřednictvím

AbsoluteLayout

  • Článek

Browse sample. Procházení ukázky

.NET MAUI AbsoluteLayout.

Uživatelské rozhraní multiplatformních aplikací .NET (.NET MAUI) AbsoluteLayout slouží k umístění a velikosti podřízených objektů pomocí explicitních hodnot. Pozice je určena levým horním rohem dítěte vzhledem k levému hornímu AbsoluteLayoutrohu v jednotkách nezávislých na zařízení. AbsoluteLayout implementuje také proporcionální funkci umístění a velikosti. Na rozdíl od některých jiných tříd rozložení je navíc možné umístit podřízené položky AbsoluteLayout tak, aby se překrývaly.

Mělo AbsoluteLayout by být považováno za speciální rozložení, které se má použít pouze v případě, že můžete uložit velikost na podřízené položky nebo pokud velikost prvku nemá vliv na umístění ostatních podřízených položek.

Třída AbsoluteLayout definuje následující vlastnosti:

  • LayoutBounds, typu Rect, což je připojená vlastnost, která představuje pozici a velikost podřízeného objektu. Výchozí hodnota této vlastnosti je (0,0,AutoSize,AutoSize,AutoSize).
  • LayoutFlags, typu AbsoluteLayoutFlags, což je připojená vlastnost, která označuje, zda vlastnosti hranic rozložení použité k umístění a velikosti podřízené jsou interpretovány úměrně. Výchozí hodnota této vlastnosti je AbsoluteLayoutFlags.None.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že vlastnosti mohou být cílem datových vazeb a styl. Další informace o připojených vlastnostech naleznete v tématu Připojené vlastnosti rozhraní .NET MAUI.

Umístění a velikost podřízených položek

Pozice a velikost podřízených položek v objektu AbsoluteLayout je definována nastavením AbsoluteLayout.LayoutBounds připojené vlastnosti každého podřízeného objektu pomocí absolutních hodnot nebo proporcionálních hodnot. Absolutní a proporcionální hodnoty lze pro podřízené položky kombinovat, když by se měla pozice škálovat, ale velikost by měla zůstat pevná nebo naopak. Informace o absolutních hodnotách naleznete v tématu Absolutní umístění a velikost. Informace o proporcionálních hodnotách naleznete v tématu Proporcionální umístění a velikost.

Připojenou AbsoluteLayout.LayoutBounds vlastnost lze nastavit pomocí dvou formátů bez ohledu na to, zda se používají absolutní nebo proporcionální hodnoty:

  • x, y. S tímto formátem x a y hodnoty označují pozici levého horního rohu podřízeného rohu vzhledem k nadřazené sadě. Dítě není vytrénováno a velikostí samotné.
  • x, y, width, height. V tomto formátu x označují hodnoty y umístění levého horního rohu podřízeného rohu vzhledem k nadřazené pomůcek, zatímco width hodnoty height označují velikost podřízeného objektu.

Chcete-li určit, že se podřízená velikost velikostí vodorovně nebo svisle, nebo obojí, nastavte width vlastnost a/nebo height hodnoty AbsoluteLayout.AutoSize . Nadměrné využití této vlastnosti však může poškodit výkon aplikace, protože způsobí, že modul rozložení provede další výpočty rozložení.

Důležité

Vlastnosti HorizontalOptions nemají žádný vliv na podřízené položky objektu AbsoluteLayout.VerticalOptions

Absolutní umístění a změna velikosti

Ve výchozím nastavení AbsoluteLayout pozice a velikosti podřízených položek pomocí absolutních hodnot zadaných v jednotkách nezávislých na zařízeních, které explicitně definují umístění podřízených položek do rozložení. Toho dosáhnete přidáním podřízených položek a AbsoluteLayout nastavením připojené vlastnosti u každého podřízeného objektu AbsoluteLayout.LayoutBounds na absolutní pozici a/nebo velikostní hodnoty.

Upozorňující

Použití absolutních hodnot pro umístění a změnu velikosti dětí může být problematické, protože různá zařízení mají různé velikosti a rozlišení obrazovky. Proto souřadnice středu obrazovky na jednom zařízení mohou být posunuty na jiných zařízeních.

Následující xaml ukazuje, jehož AbsoluteLayout podřízené položky jsou umístěny pomocí absolutních hodnot:

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

V tomto příkladu je pozice každého BoxView objektu definována pomocí prvních dvou absolutních hodnot zadaných AbsoluteLayout.LayoutBounds v připojené vlastnosti. Velikost každého z nich BoxView je definována pomocí třetí a další hodnoty. Pozice objektu Label je definována pomocí dvou absolutních hodnot zadaných AbsoluteLayout.LayoutBounds v připojené vlastnosti. Hodnoty velikosti nejsou pro danou Labelhodnotu zadány, a proto jsou bez omezení a velikosti samotné. Ve všech případech absolutní hodnoty představují jednotky nezávislé na zařízení.

Následující snímek obrazovky ukazuje výsledné rozložení:

Children placed in an AbsoluteLayout using absolute values.

Ekvivalentní kód jazyka C# je uvedený níže:

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

V tomto příkladu je pozice a velikost každého BoxView definována pomocí objektu Rect . Pozice objektu Label je definována pomocí objektu Point . V příkladu jazyka C# se Add k přidání podřízených objektů do jazyka 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));
        }
    }
}

V jazyce C# je také možné nastavit umístění a velikost podřízeného AbsoluteLayout objektu po jeho přidání do rozložení pomocí AbsoluteLayout.SetLayoutBounds metody. První argument této metody je podřízený a druhý je Rect objekt.

Poznámka:

Objekt AbsoluteLayout , který používá absolutní hodnoty, může umístit a zmenšit podřízené položky tak, aby se nevešly do hranic rozložení.

Proporcionální umístění a změna velikosti

Podřízené AbsoluteLayout položky lze umístit a zmenšit pomocí proporcionálních hodnot. Toho dosáhnete přidáním podřízených položek do AbsoluteLayout a nastavením AbsoluteLayout.LayoutBounds připojené vlastnosti u každého podřízeného objektu na proporcionální pozici a/nebo velikostní hodnoty v rozsahu 0–1. Hodnoty pozice a velikosti jsou proporcionální nastavením připojené vlastnosti u každého podřízeného objektu AbsoluteLayout.LayoutFlags .

Připojená AbsoluteLayout.LayoutFlags vlastnost typu AbsoluteLayoutFlagsumožňuje nastavit příznak, který označuje, že umístění a velikost rozložení hodnoty pro dítě jsou úměrné velikosti AbsoluteLayout. Při rozložení dítěte AbsoluteLayout odpovídajícím způsobem škáluje hodnoty pozice a velikosti na libovolnou velikost zařízení.

Výčet AbsoluteLayoutFlags definuje následující členy:

  • Noneoznačuje, že hodnoty budou interpretovány jako absolutní. Toto je výchozí hodnota AbsoluteLayout.LayoutFlags připojené vlastnosti.
  • XProportionaloznačuje, že x hodnota bude interpretována jako proporcionální a současně považuje všechny ostatní hodnoty za absolutní.
  • YProportionaloznačuje, že y hodnota bude interpretována jako proporcionální a současně považuje všechny ostatní hodnoty za absolutní.
  • WidthProportionaloznačuje, že width hodnota bude interpretována jako proporcionální a současně považuje všechny ostatní hodnoty za absolutní.
  • HeightProportionaloznačuje, že height hodnota bude interpretována jako proporcionální a současně považuje všechny ostatní hodnoty za absolutní.
  • PositionProportionaloznačuje, že x hodnoty a y hodnoty budou interpretovány jako proporcionální, zatímco hodnoty velikosti jsou interpretovány jako absolutní.
  • SizeProportionaloznačuje, že width hodnoty a height hodnoty budou interpretovány jako proporcionální, zatímco hodnoty pozice jsou interpretovány jako absolutní.
  • Alloznačuje, že všechny hodnoty budou interpretovány jako proporcionální.

Tip

Výčet AbsoluteLayoutFlags je Flags výčet, což znamená, že členy výčtu lze kombinovat. To se provádí v JAZYCE XAML se seznamem odděleným čárkami a v jazyce C# s bitovým operátorem OR.

Pokud například použijete SizeProportional příznak a nastavíte šířku dítěte na 0,25 a výšku na 0,1, dítě bude o jednu čtvrtinu šířky AbsoluteLayout a jednu desetinu výšky. Příznak PositionProportional je podobný. Pozice (0,0) umístí dítě do levého horního rohu, zatímco pozice (1,1) umístí dítě do pravého dolního rohu a pozice (0,5,0,5) zacentruje dítě uvnitř AbsoluteLayout.

Následující xaml ukazuje, jehož AbsoluteLayout podřízené položky jsou umístěny pomocí proporcionálních hodnot:

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

V tomto příkladu je každé podřízené umístění pomocí proporcionálních hodnot, ale velikost pomocí absolutních hodnot. Toho se dosahuje nastavením AbsoluteLayout.LayoutFlags připojené vlastnosti každého podřízeného objektu na PositionProportionalhodnotu . První dvě hodnoty zadané v AbsoluteLayout.LayoutBounds připojené vlastnosti pro každou podřízenou vlastnost definují pozici pomocí proporcionálních hodnot. Velikost každého podřízeného souboru je definována s třetí a další absolutními hodnotami pomocí jednotek nezávislých na zařízení.

Následující snímek obrazovky ukazuje výsledné rozložení:

Children placed in an AbsoluteLayout using proportional position values.

Ekvivalentní kód jazyka C# je uvedený níže:

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

V tomto příkladu je pozice a velikost každého podřízeného objektu nastavena metodou AbsoluteLayout.SetLayoutBounds . První argument metody je podřízený a druhý je Rect objekt. Pozice každého podřízeného souboru je nastavena s proporcionálními hodnotami, zatímco velikost každého podřízeného objektu je nastavena s absolutními hodnotami pomocí jednotek nezávislých na zařízení.

Poznámka:

Objekt AbsoluteLayout , který používá proporcionální hodnoty, může umístit a zmenšit podřízené položky tak, aby se nevešel do mezí rozložení pomocí hodnot mimo rozsah 0–1.