Xamarin.Forms RelativeLayout

Stáhnout ukázku Stažení ukázky

<span class= RelativeLayout v Xamarin.Forms" data-linktype="relative-path"/></p>
<p>Slouží <a href=RelativeLayout k umístění a nastavení velikosti podřízeného objektu vzhledem k vlastnostem rozložení nebo elementů na stejné úrovni. To umožňuje vytváření UI, které se škáluje proporcionálně napříč velikostmi zařízení. Kromě toho je na rozdíl od některých jiných tříd rozložení možné umístit děti tak, RelativeLayout 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í pozice X podřízeného objektu.
  • YConstraint, typu , což je připojená vlastnost, která představuje omezení na pozici Constraint 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í výšky podřízeného objektu.
  • BoundsConstraint, typu , což je připojená vlastnost, která představuje omezení pozice a BoundsConstraint velikosti podřízeného objektu. Tuto vlastnost nelze snadno využívat v jazyce XAML.

Tyto vlastnosti jsou zálohovány objekty, což znamená, že vlastnosti mohou být cíle datových vazeb a BindableProperty se stylem. Další informace o připojených vlastnostech najdete v tématu Xamarin.Forms Attached Properties .

Poznámka

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

Třída RelativeLayout je odvozena z Layout<T> třídy , která definuje vlastnost typu ChildrenIList<T> . Vlastnost je třída , a proto není nutné explicitně ChildrenContentProperty nastavovat z Layout<T> XAML.

Tip

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

Omezení

V objektu jsou pozice a velikost dětí zadány jako RelativeLayout omezení pomocí absolutních nebo relativních hodnot. Pokud omezení nezadáte, podřízený objekt bude umístěn v levém horním rohu rozložení.

Následující tabulka ukazuje, jak zadat omezení v XAML a C#:

XAML C#
Absolutní hodnoty Absolutní omezení jsou určená nastavením RelativeLayout připojených vlastností na double hodnoty. Absolutní omezení jsou určená Constraint.Constant metodou 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í Constraint na objekty, které jsou vráceny ConstraintExpression rozšířením značek. Relativní omezení jsou určena Constraint objekty, které jsou vráceny metodami Constraint třídy.

Další informace o zadávání omezení pomocí absolutních hodnot najdete v tématu Absolutní umístění a velikost. Další informace o zadávání omezení pomocí relativních hodnot najdete v tématu Relativní umístění a nastavení velikosti.

V jazyce C# lze do funkce přidat děti RelativeLayoutAdd třemi přetíženími. První přetížení vyžaduje k Expression<Func<Rectangle>> určení pozice a velikosti podřízeného. Druhé přetížení vyžaduje volitelné Expression<Func<double>> objekty pro xywidth argumenty , , height a . Třetí přetížení vyžaduje volitelné Constraint objekty pro xywidth argumenty , , height a .

Umístění a velikost podřízeného souboru je možné změnit pomocí metod RelativeLayoutSetXConstraint , , a SetYConstraintSetWidthConstraintSetHeightConstraint . První argument každé z těchto metod je podřízený a druhý je Constraint objekt . Kromě toho SetBoundsConstraint lze metodu použít také ke změně pozice a velikosti podřízeného souboru. Prvním argumentem této metody je podřízený objekt a druhý je BoundsConstraint objekt .

Absolutní umístění a velikost

Může RelativeLayout umístit a nastavit velikost dětí pomocí absolutních hodnot zadaných v jednotkách nezávislých na zařízení, které explicitně definují, kam se mají v rozložení umístit děti. Toho se dosáhne přidáním podřízených objektů do kolekce a nastavením vlastností , , a připojených vlastností u každého podřízeného objektu na absolutní pozici ChildrenRelativeLayoutXConstraintYConstraintWidthConstraintHeightConstraint a/nebo velikost.

Upozornění

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

Následující kód XAML ukazuje, RelativeLayout jejichž děti jsou umístění 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 objektu definována pomocí hodnot zadaných v připojených BoxViewXConstraintYConstraint vlastnostech a . Velikost každého objektu je BoxView definována pomocí hodnot zadaných v připojených WidthConstraintHeightConstraint vlastnostech a . Pozice objektu je také definována pomocí hodnot zadaných v připojených LabelXConstraintYConstraint vlastnostech a . Hodnoty velikosti se ale nezadá pro , a proto se jedná o hodnoty bez omezení Label a samotné velikosti. Ve všech případech představují absolutní hodnoty jednotky nezávislé na zařízení.

Výsledné rozložení jsou znázorněné na následujících snímcích obrazovky:

Children placed in a RelativeLayout using absolute values

Ekvivalentní kód jazyka C# je zobrazen 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 jsou objekty přidány do objektu pomocí přetížení, které vyžaduje k určení BoxViewRelativeLayout pozice a AddExpression<Func<Rectangle>> velikosti každého podřízeného objektu . Pozice objektu je Label definována pomocí Add přetížení, které vyžaduje volitelné Constraint objekty, v tomto případě vytvořené metodou Constraint.Constant .

Poznámka

Metoda , která používá absolutní hodnoty, může umístit a nastavit velikost dětí tak, aby se nevešly do RelativeLayout hranic rozložení.

Relativní umístění a velikost

Objekt může umístit a nastavit velikost podřízeného objektu pomocí hodnot, které jsou relativní vzhledem k vlastnostem rozložení nebo elementům na RelativeLayout stejné úrovni. Toho lze dosáhnout přidáním podřízených objektů do kolekce objektů a nastavením vlastností , , a připojených k jednotlivým podřízeným objektům na ChildrenRelativeLayout relativní hodnoty pomocí XConstraintYConstraintWidthConstraintHeightConstraintConstraint objektů.

Omezení mohou být konstanta relativní k nadřazené nebo relativní vzhledem k objektu na stejné úrovni. Typ omezení je reprezentován ConstraintType výčtem, který definuje následující členy:

  • RelativeToParentoznačuje omezení, které je relativní vzhledem k nadřazenému objektu.
  • RelativeToViewoznačuje omezení, které je relativní vzhledem k zobrazení (nebo na stejné úrovni).
  • Constantoznačuje konstantní omezení.

Rozšíření značek omezení

V jazyce XAML Constraint lze objekt vytvořit pomocí rozšíření ConstraintExpression značek. Toto rozšíření značek se obvykle používá ke souvisení pozice a velikosti podřízeného prvku s nadřazeným objektem nebo objektu na RelativeLayout stejné úrovni.

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

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

Následující kód XAML ukazuje, RelativeLayout jejichž děti jsou omezeny ConstraintExpression rozšířením 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 vlastností a XConstraintYConstraint připojených. První má BoxView své a připojené vlastnosti nastavené na XConstraintYConstraint konstanty, což jsou absolutní hodnoty. Všechny zbývající BoxView objekty mají svou pozici nastavenou alespoň jednou relativní hodnotou. Žlutý objekt například nastaví připojenou vlastnost na šířku svého nadřazeného BoxViewXConstraint objektu RelativeLayout () minus 40. Podobně nastaví připojenou vlastnost na výšku nadřazeného objektu BoxViewYConstraint minus 40. Tím zajistíte, že se BoxView žlutá zobrazí v pravém dolním rohu obrazovky.

Poznámka

BoxViewObjekty, které nezadá velikost, mají automaticky velikost 40 × 40. Xamarin.Forms

Barva s BoxView názvem oneThird je umístěna centrálně vzhledem k nadřazenému objektu. Má také relativní velikost vzhledem k nadřazenému objektu, který má jednu třetinu šířky a výšky. Toho se dosáhne nastavením vlastností a připojených na šířku nadřazeného objektu () vynásobené XConstraintWidthConstraintRelativeLayout hodnotou 0,33. Podobně jsou vlastnosti a připojené nastaveny na výšku nadřazeného objektu YConstraintHeightConstraint vynásobené hodnotou 0,33.

Černá je BoxView umístěná a má relativní velikost vzhledem k oneThirdBoxView . Toho lze dosáhnout nastavením jeho a připojených vlastností na hodnoty a elementu na stejné XConstraintYConstraintXY úrovni. Podobně je její velikost nastavená na jednu třetinu šířky a výšky prvku na stejné úrovni. Toho se dosáhne nastavením jeho a připojených vlastností na hodnoty a prvku na stejné úrovni, které se pak vynásobí WidthConstraintHeightConstraintWidthHeight hodnotou 0,33.

Výsledné rozložení je znázorněno na následujícím snímku obrazovky:

Podměty umístěné v relativeLayout s použitím relativních hodnot

Objekty omezení

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

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

Kromě toho třída definuje jednu metodu , která vrací , která omezuje pozici a velikost podřízeného typu pomocí BoundsConstraintFromExpressionBoundsConstraintExpression<Func<Rectangle>> . Tuto metodu lze použít k nastavení BoundsConstraint připojené vlastnosti.

Následující kód jazyka C# ukazuje RelativeLayout objekty, jejichž děti jsou omezeny 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 jsou do objektu přidány děti pomocí přetížení, které vyžaduje volitelný objekt pro RelativeLayoutAddConstraintxywidth argumenty , , height a .

Poznámka

Třída , která používá relativní hodnoty, může umístit a nastavit velikost dětí tak, aby se nevešly do RelativeLayout hranic rozložení.