Xamarin.Forms RelativeLayout

Stažení ukázky

Xamarin. Forms

RelativeLayoutSlouží k umístění a velikosti podřízených objektů vzhledem k vlastnostem rozložení nebo prvků na stejné úrovni. Díky tomu je možné vytvářet uživatelská rozhraní, které se poměrně škálují napříč velikostmi zařízení. Kromě toho na rozdíl od některých jiných tříd rozložení RelativeLayout je schopen umístit podřízené objekty tak, aby se překrývaly.

RelativeLayoutTřída definuje následující vlastnosti:

• XConstrainttyp Constraint , který je připojenou vlastností, která představuje omezení na pozici X podřízeného objektu.
• YConstrainttyp Constraint , který je připojenou vlastností, která představuje omezení na pozici Y podřízeného objektu.
• WidthConstrainttypu Constraint , což je připojená vlastnost, která představuje omezení na šířku podřízeného objektu.
• HeightConstrainttyp Constraint , který je připojenou vlastností, která představuje omezení na výšku podřízeného objektu.
• BoundsConstrainttyp BoundsConstraint , který je připojenou vlastností, která představuje omezení na pozici a velikosti podřízeného objektu. Tuto vlastnost nelze snadno spotřebovat z XAML.

Tyto vlastnosti jsou zálohová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 Xamarin.Forms Attached Properties .

RelativeLayoutTřída je odvozena z Layout<T> třídy, která definuje Children vlastnost typu IList<T> . ChildrenVlastnost je ContentPropertyLayout<T> třída, a proto nemusí být explicitně nastavena z XAML.

Omezení

V rámci je RelativeLayout pozice a velikost podřízených prvků zadána jako omezení pomocí absolutních hodnot nebo relativních hodnot. Pokud nejsou omezení zadána, podřízená položka bude umístěna v levém horním rohu rozložení.

Následující tabulka ukazuje, jak určit omezení v jazyce XAML a C#:

Další informace o určení omezení pomocí absolutních hodnot naleznete v tématu absolutní umístění a velikost. Další informace o určení omezení pomocí relativních hodnot naleznete v tématu relativní umístění a změna velikosti.

V jazyce C# mohou být podřízené položky přidány do RelativeLayout tří Add přetížení. První přetížení vyžaduje, Expression<Func<Rectangle>> aby určovala pozici a velikost podřízeného objektu. Druhé přetížení vyžaduje volitelné Expression<Func<double>> objekty pro xy argumenty,, a widthheight . Třetí přetížení vyžaduje volitelné Constraint objekty pro xy argumenty,, a widthheight .

Je možné změnit polohu a velikost podřízeného objektu RelativeLayout pomocí SetXConstraintSetYConstraint metod,, SetWidthConstraint a SetHeightConstraint . První argument pro každou z těchto metod je podřízený a druhým je Constraint objekt. Kromě toho SetBoundsConstraint lze metodu také použít ke změně pozice a velikosti podřízeného objektu. První argument této metody je podřízený a druhým je BoundsConstraint objekt.

Absolutní umístění a velikost

RelativeLayoutMůže umístit a změnit velikost podřízených objektů pomocí absolutních hodnot, které jsou zadány v jednotkách nezávislých na zařízení, které explicitně definují, kam mají být podřízené položky umístěny v rozložení. Toho je dosaženo přidáním podřízených objektů do Children kolekce RelativeLayout a nastavení XConstraint vlastností,, a YConstraintWidthConstraintHeightConstraint přidružených vlastností u jednotlivých podřízených prvků na absolutní pozici nebo hodnoty velikosti.

Následující kód XAML ukazuje, RelativeLayout jehož podřízené objekty jsou umístěny pomocí absolutních hodnot:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RelativeLayoutDemos.Views.StylishHeaderDemoPage"
             Title="Stylish header demo">
    <RelativeLayout Margin="20">
        <BoxView Color="Silver"
                 RelativeLayout.XConstraint="0"
                 RelativeLayout.YConstraint="10"
                 RelativeLayout.WidthConstraint="200"
                 RelativeLayout.HeightConstraint="5" />
        <BoxView Color="Silver"
                 RelativeLayout.XConstraint="0"
                 RelativeLayout.YConstraint="20"
                 RelativeLayout.WidthConstraint="200"
                 RelativeLayout.HeightConstraint="5" />
        <BoxView Color="Silver"
                 RelativeLayout.XConstraint="10"
                 RelativeLayout.YConstraint="0"
                 RelativeLayout.WidthConstraint="5"
                 RelativeLayout.HeightConstraint="65" />
        <BoxView Color="Silver"
                 RelativeLayout.XConstraint="20"
                 RelativeLayout.YConstraint="0"
                 RelativeLayout.WidthConstraint="5"
                 RelativeLayout.HeightConstraint="65" />
        <Label Text="Stylish header"
               FontSize="24"
               RelativeLayout.XConstraint="30"
               RelativeLayout.YConstraint="25" />
    </RelativeLayout>
</ContentPage>

V tomto příkladu je pozice každého BoxView objektu definována pomocí hodnot zadaných v XConstraint a YConstraint připojených vlastnostech. Velikost každého BoxView je definována pomocí hodnot zadaných v části WidthConstraint a HeightConstraint připojené vlastnosti. Pozice Label objektu je také definována pomocí hodnot zadaných v XConstraintYConstraint přidružených vlastnostech a. Nicméně hodnoty velikosti nejsou určeny pro Label , a proto jsou neomezené a velikosti samotné. Ve všech případech absolutní hodnoty označují jednotky nezávislé na zařízení.

Následující snímky obrazovky ukazují výsledné rozložení:

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

public class StylishHeaderDemoPageCS : ContentPage
{
    public StylishHeaderDemoPageCS()
    {
        RelativeLayout relativeLayout = new RelativeLayout
        {
            Margin = new Thickness(20)
        };

        relativeLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, () => new Rectangle(0, 10, 200, 5));

        relativeLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, () => new Rectangle(0, 20, 200, 5));

        relativeLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, () => new Rectangle(10, 0, 5, 65));

        relativeLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, () => new Rectangle(20, 0, 5, 65));

        relativeLayout.Children.Add(new Label
        {
            Text = "Stylish Header",
            FontSize = 24
        }, Constraint.Constant(30), Constraint.Constant(25));

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

V tomto příkladu BoxView jsou objekty přidány do RelativeLayout objektu pomocí Add přetížení, které vyžaduje, Expression<Func<Rectangle>> aby určovala umístění a velikost jednotlivých podřízených objektů. Pozice Label je definována pomocí Add přetížení, které vyžaduje volitelné Constraint objekty, v tomto případě vytvořeném Constraint.Constant metodou.

Relativní umístění a velikost

RelativeLayoutLze umístit a změnit velikost podřízených objektů pomocí hodnot, které jsou relativní k vlastnostem rozložení nebo prvkům na stejné úrovni. Toho je dosaženo přidáním podřízených objektů do Children kolekce RelativeLayout a nastavení XConstraint vlastností,, a YConstraintWidthConstraintHeightConstraint přidružených k relativním hodnotám pomocí Constraint objektů.

Omezení můžou být konstantní vzhledem k nadřazenému nebo relativnímu ke stejné úrovni. Typ omezení je reprezentován ConstraintType výčtem, který definuje následující členy:

• RelativeToParent, což označuje omezení, které je relativní vzhledem k nadřazenému objektu.
• RelativeToView, což označuje omezení, které je relativní vzhledem k zobrazení (nebo na stejné úrovni).
• Constant, který označuje omezení konstanty.

Rozšíření značek omezení

V jazyce XAML Constraint může být objekt vytvořen pomocí ConstraintExpression rozšíření značek. Toto rozšíření značek se obvykle používá k propojení pozice a velikosti podřízeného objektu v rámci s RelativeLayout nadřazeným objektem nebo na stejné úrovni.

ConstraintExpressionTřída definuje následující vlastnosti:

• _ConstraintExpression_Constant "data-LINKTYPE =" absolutní cestu ">Constant typu double , který představuje hodnotu konstanty omezení.
• Xamarin_Forms _ConstraintExpression_ElementName "data-LINKTYPE =" absolutní cesta ">ElementName typu string , který představuje název zdrojového elementu, oproti kterému chcete omezení vypočítat.
• Xamarin_Forms _ConstraintExpression_Factor "data-LINKTYPE =" absolutní cesta ">Factor typu double , který představuje faktor, podle kterého se má škálovat omezení dimenze vzhledem ke zdrojovému elementu. Výchozí hodnota této vlastnosti je 1.
• Xamarin_Forms _ConstraintExpression_Property "data-LINKTYPE =" absolutní cesta ">Property typu string , který představuje název vlastnosti zdrojového elementu, který se má použít při výpočtu omezení.
• Xamarin_Forms _ConstraintExpression_Type "data-LINKTYPE =" absolutní cestu ">Type typu ConstraintType , který představuje typ omezení.

Další informace o Xamarin.Forms rozšíření značek naleznete v tématu Xamarin.Forms.

Následující kód XAML ukazuje, RelativeLayout jehož podřízené objekty jsou omezeny ConstraintExpression příponou označení:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RelativeLayoutDemos.Views.RelativePositioningAndSizingDemoPage"
             Title="RelativeLayout demo">
    <RelativeLayout>
        <BoxView Color="Red"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
        <BoxView Color="Green"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-40}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
        <BoxView Color="Blue"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-40}" />
        <BoxView Color="Yellow"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-40}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-40}" />

        <!-- Centered and 1/3 width and height of parent -->
        <BoxView x:Name="oneThird"
                 Color="Silver"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.33}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.33}"
                 RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.33}"
                 RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.33}" />

        <!-- 1/3 width and height of previous -->
        <BoxView Color="Black"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=oneThird, Property=X}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=oneThird, Property=Y}"
                 RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=oneThird, Property=Width, Factor=0.33}"
                 RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=oneThird, Property=Height, Factor=0.33}" />
    </RelativeLayout>
</ContentPage>

V tomto příkladu je pozice jednotlivých BoxView objektů definována nastavením XConstraintYConstraint vlastností a připojených. První BoxView má své XConstraint a YConstraint připojené vlastnosti nastavené na konstanty, což jsou absolutní hodnoty. Všechny zbývající BoxView objekty mají svou polohu nastavenou pomocí alespoň jedné relativní hodnoty. Například žlutý BoxView objekt nastaví XConstraint připojenou vlastnost na šířku své nadřazené položky ( RelativeLayout ) minus 40. Podobně se tím BoxView nastaví YConstraint připojená vlastnost na výšku jejího nadřazeného objektu mínus 40. Tím se zajistí, že BoxView se žlutý zobrazí v pravém dolním rohu obrazovky.

Stříbrný BoxView název oneThird je umístěn centrálně vzhledem k jeho nadřazenému objektu. Velikost je také relativní vzhledem k jeho nadřazenému objektu, který je v jedné třetině šířky a výšky. Toho dosáhnete nastavením XConstraintWidthConstraint vlastností a připojených vlastností na šířku nadřazené položky ( RelativeLayout ) vynásobené 0,33. Podobně, YConstraint vlastnosti a HeightConstraint připojené jsou nastaveny na výšku nadřazeného objektu vynásobený 0,33.

Černá BoxView je umístěná a má velikost relativní vzhledem k oneThirdBoxView . Toho je dosaženo nastavením vlastností a XConstraintYConstraint připojených vlastností na X hodnoty a v rámci Y elementu na stejné úrovni. Podobně je jeho velikost nastavena na jednu třetinu šířky a výšky prvku na stejné úrovni. Toho dosáhnete nastavením vlastností a WidthConstraintHeightConstraint připojených vlastností na WidthHeight hodnoty a elementu na stejné úrovni, který je pak vynásobený 0,33.

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

Objekty omezení

ConstraintTřída definuje následující veřejné statické metody, které vracejí Constraint objekty:

• Constant, která omezuje podřízenou velikost určenou na double .
• FromExpression, která omezuje podřízenou položku pomocí výrazu lambda.
• RelativeToParent, která omezuje podřízený objekt vzhledem k jeho velikosti nadřazeného prvku.
• RelativeToView, která omezuje podřízenou položku vzhledem k velikosti zobrazení.

Kromě toho BoundsConstraint Třída definuje jedinou metodu, FromExpression která vrátí hodnotu BoundsConstraint , která omezuje pozici a velikost podřízeného objektu s Expression<Func<Rectangle>> příponou. Tuto metodu lze použít k nastavení BoundsConstraint připojené vlastnosti.

Následující kód jazyka C# ukazuje, RelativeLayout jehož podřízené objekty jsou omezeny pomocí Constraint objektů:

public class RelativePositioningAndSizingDemoPageCS : ContentPage
{
    public RelativePositioningAndSizingDemoPageCS()
    {
        RelativeLayout relativeLayout = new RelativeLayout();

        // Four BoxView's
        relativeLayout.Children.Add(
            new BoxView { Color = Color.Red },
            Constraint.Constant(0),
            Constraint.Constant(0));

        relativeLayout.Children.Add(
            new BoxView { Color = Color.Green },
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - 40;
            }), Constraint.Constant(0));

        relativeLayout.Children.Add(
            new BoxView { Color = Color.Blue },
            Constraint.Constant(0),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height - 40;
            }));

        relativeLayout.Children.Add(
            new BoxView { Color = Color.Yellow },
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - 40;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height - 40;
            }));

        // Centered and 1/3 width and height of parent
        BoxView silverBoxView = new BoxView { Color = Color.Silver };
        relativeLayout.Children.Add(
            silverBoxView,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width * 0.33;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height * 0.33;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width * 0.33;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height * 0.33;
            }));

        // 1/3 width and height of previous
        relativeLayout.Children.Add(
            new BoxView { Color = Color.Black },
            Constraint.RelativeToView(silverBoxView, (parent, sibling) =>
            {
                return sibling.X;
            }),
            Constraint.RelativeToView(silverBoxView, (parent, sibling) =>
            {
                return sibling.Y;
            }),
            Constraint.RelativeToView(silverBoxView, (parent, sibling) =>
            {
                return sibling.Width * 0.33;
            }),
            Constraint.RelativeToView(silverBoxView, (parent, sibling) =>
            {
                return sibling.Height * 0.33;
            }));

        Title = "RelativeLayout demo";
        Content = relativeLayout;
    }
}

V tomto příkladu jsou podřízené položky přidány do objektu RelativeLayout pomocí Add přetížení, které vyžaduje volitelný Constraint objekt pro xy argumenty,, width a height .

Související odkazy

• Ukázky RelativeLayout (ukázka)
• Xamarin.Forms Attached Properties
• Rozšíření značek XAML
• Choose a Xamarin.Forms Layout
• Improve Xamarin.Forms App Performance