Xamarin.Forms RelativeLayout

Download Sample Stažení ukázky

Xamarin.Forms RelativeLayout

Funkce A RelativeLayout slouží k umístění a velikosti podřízených položek vzhledem k vlastnostem rozložení nebo prvků na stejné straně. To umožňuje vytvářet uživatelská rozhraní, která se škálují proporcionálně 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é položky tak, aby se překrývaly.

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

  • XConstraint, typu Constraint, což je připojená vlastnost, která představuje omezení na pozici X podřízeného objektu.
  • YConstraint, typu Constraint, což je připojená vlastnost, která představuje omezení na pozici Y podřízeného objektu.
  • WidthConstraint, typu Constraint, což je připojená vlastnost, která představuje omezení šířky podřízeného objektu.
  • HeightConstraint, typu Constraint, což je připojená vlastnost, která představuje omezení na výšku podřízeného objektu.
  • BoundsConstraint, typu BoundsConstraint, což je připojená vlastnost, která představuje omezení na pozici a velikost podřízeného objektu. Tuto vlastnost nelze snadno využívat z XAML.

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

Poznámka

Šířku a výšku podřízeného objektu v podřízeném RelativeLayout objektu lze také zadat prostřednictvím WidthRequest podřízených a HeightRequest vlastností místo WidthConstraint vlastností a HeightConstraint připojených vlastností.

Třída RelativeLayout je odvozena od Layout<T> třídy, která definuje Children vlastnost typu IList<T>. Vlastnost Children je ContentProperty třída Layout<T> , a proto není nutné explicitně nastavit z XAML.

Tip

RelativeLayout Nepoužívejte vždy, když je to možné. Výsledkem bude, že procesor bude muset provádět výrazně více práce.

Omezení

Umístění a velikost podřízených položek v rámci objektu a v rámci této RelativeLayouthodnoty se zadává jako omezení s použitím absolutních hodnot nebo relativních hodnot. Pokud nejsou zadaná omezení, podřízená hodnota se umístí do levého horního rohu rozložení.

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

XAML C#
Absolutní hodnoty Absolutní omezení jsou určena nastavením připojených RelativeLayout vlastností k hodnotám double . Absolutní omezení jsou určena metodou Constraint.Constant nebo pomocí Children.Add přetížení, které vyžaduje Func<Rectangle> argument.
Relativní hodnoty Relativní omezení jsou určena nastavením RelativeLayout připojených vlastností na Constraint objekty, které jsou vráceny rozšířením ConstraintExpression značek. Relativní omezení jsou určena Constraint objekty, které jsou vráceny metodami Constraint třídy.

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

V jazyce C# lze podřízené položky přidat do RelativeLayout tří Add přetížení. První přetížení vyžaduje Expression<Func<Rectangle>> zadání pozice a velikosti podřízeného objektu. Druhé přetížení vyžaduje volitelné Expression<Func<double>> objekty pro xparametr , , ywidtha height argumenty. Třetí přetížení vyžaduje volitelné Constraint objekty pro xparametr , , ywidtha height argumenty.

Je možné změnit umístění a velikost podřízeného objektu v objektu s znakem RelativeLayoutSetXConstraint, , SetYConstraintSetWidthConstrainta SetHeightConstraint metodami. První argument každé z těchto metod je podřízený a druhý je Constraint objekt. Kromě toho lze metodu SetBoundsConstraint použít také ke změně pozice a velikosti podřízeného prvku. První argument této metody je podřízený a druhý je BoundsConstraint objekt.

Absolutní umístění a velikost

Podřízené RelativeLayout objekty lze umístit a upravit jejich velikost pomocí absolutních hodnot zadaných v jednotkách nezávislých na zařízeních, které explicitně definují, kde mají být podřízené položky umístěny v rozložení. Toho dosáhnete přidáním podřízených RelativeLayout položek do Children kolekce a nastavením XConstraintvlastností , YConstrainta WidthConstraintHeightConstraint připojených vlastností každého podřízeného objektu k absolutní pozici a/nebo velikosti hodnoty.

Upozornění

Použití absolutních hodnot pro umístění a velikost 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 RelativeLayout , jehož podřízené položky 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 ve XConstraint vlastnostech a YConstraint připojených vlastností. Velikost každého z nich BoxView je definována pomocí hodnot zadaných ve vlastnostech WidthConstraint a HeightConstraint připojených vlastností. Umístění objektu Label je také definováno pomocí hodnot zadaných v XConstraint a YConstraint připojených vlastnostech. Hodnoty velikosti ale nejsou zadané pro objekt Label, a proto jsou nekontrénované a samotné velikosti. Ve všech případech absolutní hodnoty představují jednotky nezávislé na zařízení.

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

Children placed in a RelativeLayout using absolute values

Ekvivalentní kód jazyka C# je znázorněn 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 BoxViewRelativeLayout jsou objekty přidány k použití Add přetížení, které vyžaduje Expression<Func<Rectangle>> zadat pozici a velikost každého podřízeného objektu. Pozice Label je definována pomocí Add přetížení, které vyžaduje volitelné Constraint objekty, v tomto případě vytvořené metodou Constraint.Constant .

Poznámka

Objekt RelativeLayout , který používá absolutní hodnoty, může umisťovat a měnit velikost podřízených hodnot tak, aby se nevešel do hranic rozložení.

Relativní umístění a velikost

Podřízené RelativeLayout položky můžou umisťovat a měnit jejich velikost pomocí hodnot, které jsou relativní k vlastnostem rozložení nebo elementům na stejné straně. Toho dosáhnete přidáním podřízených RelativeLayout položek do Children kolekce a nastavením XConstraintvlastností , YConstrainta WidthConstraintHeightConstraint připojených vlastností každého podřízeného objektu k relativním hodnotám pomocí Constraint objektů.

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

  • RelativeToParentoznačuje omezení, které je relativní k nadřazené sadě.
  • RelativeToView, což označuje omezení, které je relativní k zobrazení (nebo na stejné stejné hodnotě).
  • Constantoznačuje konstantní omezení.

Rozšíření značek omezení

V jazyce XAML Constraint lze objekt vytvořit rozšířením ConstraintExpression značek. Toto rozšíření značek se obvykle používá ke vztahu pozice a velikosti podřízeného objektu v rámci RelativeLayout nadřazeného objektu nebo ke stejné pozici.

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

  • Constant, typu double, který představuje konstantní hodnotu omezení.
  • ElementName, typu string, který představuje název zdrojového prvku, proti kterému se má vypočítat omezení.
  • Factor, typu double, který představuje faktor, podle kterého se má škálovat omezený rozměr vzhledem ke zdrojovému prvku. Tato vlastnost má výchozí hodnotu 1.
  • Property, typu string, který představuje název vlastnosti u zdrojového prvku, který se použije při výpočtu omezení.
  • Type, typu ConstraintType, který představuje typ omezení.

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

Následující xaml ukazuje RelativeLayout , jehož podřízené položky jsou omezeny rozšířením ConstraintExpression značek:

<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 každého BoxView objektu definována nastavením XConstraint a YConstraint připojených vlastností. První BoxView má své XConstraint a YConstraint připojené vlastnosti nastavené na konstanty, což jsou absolutní hodnoty. Zbývající BoxView objekty mají svoji pozici nastavenou alespoň jednou relativní hodnotou. Žlutý objekt například BoxView nastaví připojenou XConstraint vlastnost na šířku nadřazeného objektu (mínus RelativeLayout) minus 40. Podobně nastaví BoxView připojenou YConstraint vlastnost na výšku nadřazeného objektu minus 40. Tím zajistíte, že se žlutá BoxView zobrazí v pravém dolním rohu obrazovky.

Poznámka

BoxViewobjekty, které nezadávají velikost, mají automaticky velikost 40x40 .Xamarin.Forms

BoxView Silver pojmenovaný oneThird je umístěn centrálně vzhledem k nadřazené hodnotě. Velikost je také relativní vzhledem k nadřazené hodnotě a je to jedna třetina její šířky a výšky. Toho dosáhnete nastavením XConstraint a WidthConstraint připojených vlastností na šířku nadřazeného objektu (the RelativeLayout), vynásobeným 0,33. YConstraint Podobně jsou vlastnosti a HeightConstraint připojené vlastnosti nastaveny na výšku nadřazeného objektu vynásobené 0,33.

Černá BoxView je umístěna a velikost vzhledem k oneThirdBoxView. Toho dosáhnete nastavením jeho XConstraint a YConstraint připojených vlastností k X prvkům a Y hodnotám na stejné straně. Podobně je jeho velikost nastavená na jednu třetinu šířky a výšky jeho prvku na stejné straně. Toho dosáhnete nastavením jeho WidthConstraint a HeightConstraint připojených vlastností k Width elementu na stejné straně a Height hodnotami, které se pak vynásobí hodnotou 0,33.

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

Children placed in a RelativeLayout using relative values

Objekty omezení

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

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

Kromě toho BoundsConstraint třída definuje jednu metodu, FromExpressionkterá vrací BoundsConstraint omezení pozice a velikosti dítěte s Expression<Func<Rectangle>>hodnotou . Tuto metodu BoundsConstraint lze použít k nastavení připojené vlastnosti.

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

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 RelativeLayoutAdd se podřízené položky přidají do přetížení, které vyžaduje volitelný Constraint objekt pro x, , ywidtha height argumenty.

Poznámka

Hodnota RelativeLayout , která používá relativní hodnoty, může umístění a velikost podřízených hodnot zajistit, aby se nevešel do hranic rozložení.