Udostępnij za pośrednictwem

Xamarin.Forms Względna nakładka

  • Artykuł

Xamarin.Forms Względna nakładka

Element A RelativeLayout służy do ustawiania i określania rozmiaru elementów podrzędnych względem właściwości układu lub elementów równorzędnych. Dzięki temu interfejsy użytkownika mogą być tworzone proporcjonalnie do rozmiarów urządzeń. Ponadto, w przeciwieństwie do niektórych innych klas układu, RelativeLayout jest w stanie ustawić elementy podrzędne tak, aby nakładały się na siebie.

Klasa RelativeLayout definiuje następujące właściwości:

  • XConstraint, typu Constraint, który jest dołączoną właściwością, która reprezentuje ograniczenie na pozycji X elementu podrzędnego.
  • YConstraint, typu Constraint, który jest dołączoną właściwością, która reprezentuje ograniczenie na pozycji Y elementu podrzędnego.
  • WidthConstraint, typu Constraint, który jest dołączoną właściwością, która reprezentuje ograniczenie szerokości elementu podrzędnego.
  • HeightConstraint, typu Constraint, który jest dołączoną właściwością reprezentującą ograniczenie na wysokości dziecka.
  • BoundsConstraint, typu BoundsConstraint, który jest dołączoną właściwością reprezentującą ograniczenie pozycji i rozmiaru elementu podrzędnego. Tej właściwości nie można łatwo używać z kodu XAML.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że właściwości mogą być obiektami docelowymi powiązań danych i stylizowanymi. Aby uzyskać więcej informacji na temat dołączonych właściwości, zobacz Xamarin.Forms Dołączone właściwości.

Uwaga

Szerokość i wysokość elementu podrzędnego w obiekcie RelativeLayout można również określić za pomocą właściwości i HeightRequest elementu podrzędnegoWidthRequest, zamiast WidthConstraint właściwości i HeightConstraint dołączonych.

Klasa RelativeLayout pochodzi z Layout<T> klasy , która definiuje Children właściwość typu IList<T>. Właściwość Children jest ContentProperty klasą Layout<T> i dlatego nie musi być jawnie ustawiona z języka XAML.

Napiwek

Unikaj używania zawsze RelativeLayout , gdy jest to możliwe. Spowoduje to, że procesor cpu będzie musiał wykonać znacznie więcej pracy.

Ograniczenia

W obiekcie RelativeLayoutpozycja i rozmiar elementów podrzędnych są określane jako ograniczenia przy użyciu wartości bezwzględnych lub wartości względnych. Jeśli ograniczenia nie zostaną określone, element podrzędny zostanie umieszczony w lewym górnym rogu układu.

W poniższej tabeli przedstawiono sposób określania ograniczeń w językach XAML i C#:

XAML C#
Wartości bezwzględne Ograniczenia bezwzględne są określane przez ustawienie dołączonych RelativeLayout właściwości do double wartości. Ograniczenia bezwzględne są określane przez metodę Constraint.Constant lub przy użyciu Children.Add przeciążenia, które wymaga argumentu Func<Rectangle> .
Wartości względne Ograniczenia względne są określane przez ustawienie RelativeLayout dołączonych właściwości do Constraint obiektów zwracanych przez ConstraintExpression rozszerzenie znaczników. Względne ograniczenia są określane przez Constraint obiekty, które są zwracane przez metody Constraint klasy.

Aby uzyskać więcej informacji na temat określania ograniczeń przy użyciu wartości bezwzględnych, zobacz Bezwzględne pozycjonowanie i ustalanie rozmiaru. Aby uzyskać więcej informacji na temat określania ograniczeń przy użyciu wartości względnych, zobacz Względne pozycjonowanie i ustalanie rozmiaru.

W języku C# elementy podrzędne można dodawać RelativeLayout przez trzy Add przeciążenia. Pierwsze przeciążenie wymaga określenia Expression<Func<Rectangle>> położenia i rozmiaru elementu podrzędnego. Drugie przeciążenie wymaga opcjonalnych Expression<Func<double>> obiektów dla xargumentów , y, i .height width Trzecie przeciążenie wymaga opcjonalnych Constraint obiektów dla xargumentów , y, i .height width

Istnieje możliwość zmiany położenia i rozmiaru elementu podrzędnego za RelativeLayout pomocą SetXConstraintmetod , SetYConstraint, SetWidthConstrainti SetHeightConstraint . Pierwszym argumentem dla każdej z tych metod jest element podrzędny, a drugi jest obiektem Constraint . Ponadto metodę SetBoundsConstraint można również użyć do zmiany położenia i rozmiaru elementu podrzędnego. Pierwszym argumentem tej metody jest element podrzędny, a drugi jest obiektem BoundsConstraint .

Pozycjonowanie bezwzględne i ustalanie rozmiaru

Element RelativeLayout podrzędny może ustawiać i ustawiać rozmiar elementów podrzędnych przy użyciu wartości bezwzględnych określonych w jednostkach niezależnych od urządzenia, które jawnie określają, gdzie należy umieścić elementy podrzędne w układzie. Jest to osiągane przez dodanie elementów podrzędnych do Children kolekcji i ustawienie XConstraintwłaściwości , YConstraint, WidthConstrainti HeightConstraint dołączonych dla każdego elementu podrzędnego do wartości położenia bezwzględnego i/lub rozmiaruRelativeLayout.

Ostrzeżenie

Używanie wartości bezwzględnych do pozycjonowania i określania rozmiaru elementów podrzędnych może być problematyczne, ponieważ różne urządzenia mają różne rozmiary i rozdzielczości ekranu. W związku z tym współrzędne środka ekranu na jednym urządzeniu mogą być przesunięte na innych urządzeniach.

Poniższy kod XAML pokazuje RelativeLayout , których elementy podrzędne są ustawione przy użyciu wartości bezwzględnych:

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

W tym przykładzie pozycja każdego BoxView obiektu jest definiowana przy użyciu wartości określonych we właściwościach i YConstraint dołączonychXConstraint. Rozmiar każdego z nich BoxView jest definiowany przy użyciu wartości określonych we właściwościach WidthConstraint i HeightConstraint dołączonych. Położenie Label obiektu jest również definiowane przy użyciu wartości określonych we właściwościach XConstraint i YConstraint dołączonych. Jednak wartości rozmiaru Labelnie są określone dla elementu , a więc same rozmiary nie są ograniczone. We wszystkich przypadkach wartości bezwzględne reprezentują jednostki niezależne od urządzenia.

Na poniższych zrzutach ekranu przedstawiono wynikowy układ:

Elementy podrzędne umieszczone w elemencji względnej przy użyciu wartości bezwzględnych

Równoważny kod języka C# jest pokazany poniżej:

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

W tym przykładzie BoxView RelativeLayout obiekty są dodawane do obiektu przy użyciu Add przeciążenia, które wymaga Expression<Func<Rectangle>> określenia położenia i rozmiaru każdego elementu podrzędnego. Pozycja obiektu Label jest definiowana przy użyciu Add przeciążenia, które wymaga opcjonalnych Constraint obiektów, w tym przypadku utworzonych przez metodę Constraint.Constant .

Uwaga

Element RelativeLayout używający wartości bezwzględnych może umieszczać i ustawiać rozmiar elementów podrzędnych, aby nie mieściły się w granicach układu.

Względne pozycjonowanie i ustalanie rozmiaru

Element RelativeLayout podrzędny może ustawiać i określać rozmiar elementów podrzędnych przy użyciu wartości względnych względem właściwości układu lub elementów równorzędnych. Jest to osiągane przez dodanie elementów podrzędnych do Children kolekcji i ustawienie XConstraintwłaściwości , YConstraint, WidthConstrainti HeightConstraint dołączonych dla każdego elementu podrzędnego do wartości względnych przy użyciu Constraint RelativeLayout obiektów.

Ograniczenia mogą być stałe, względem elementu nadrzędnego lub względem elementu równorzędnego. Typ ograniczenia jest reprezentowany przez ConstraintType wyliczenie, które definiuje następujące elementy członkowskie:

  • RelativeToParent, który wskazuje ograniczenie, które jest powiązane z elementem nadrzędnym.
  • RelativeToView, który wskazuje ograniczenie, które jest powiązane z widokiem (lub elementem równorzędnym).
  • Constant, który wskazuje ograniczenie stałe.

Rozszerzenie znaczników ograniczeń

W języku XAML Constraint obiekt można utworzyć za pomocą ConstraintExpression rozszerzenia znaczników. To rozszerzenie znaczników jest zwykle używane do powiązania pozycji i rozmiaru elementu podrzędnego w obiekcie RelativeLayout nadrzędnym lub z elementem równorzędnym.

Klasa ConstraintExpression definiuje następujące właściwości:

  • Constant, typu double, który reprezentuje wartość stałej ograniczenia.
  • ElementName, typu string, który reprezentuje nazwę elementu źródłowego, względem którego ma być obliczane ograniczenie.
  • Factor, typu double, który reprezentuje współczynnik skalowania wymiaru ograniczonego względem elementu źródłowego. Ta właściwość jest domyślnie ustawiona na 1.
  • Property, typu string, który reprezentuje nazwę właściwości w elemecie źródłowym do użycia w obliczeniu ograniczenia.
  • Type, typu ConstraintType, który reprezentuje typ ograniczenia.

Aby uzyskać więcej informacji na temat Xamarin.Forms rozszerzeń znaczników, zobacz Rozszerzenia znaczników XAML.

Poniższy kod XAML pokazuje RelativeLayout , których elementy podrzędne są ograniczone przez ConstraintExpression rozszerzenie znaczników:

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

W tym przykładzie pozycja każdego BoxView obiektu jest definiowana przez ustawienie XConstraint właściwości i YConstraint dołączonych. BoxView Pierwszy ma swoje XConstraint i YConstraint dołączone właściwości ustawione na stałe, które są wartościami bezwzględnymi. Pozostałe BoxView obiekty mają ich położenie ustawione przy użyciu co najmniej jednej wartości względnej. Na przykład żółty BoxView obiekt ustawia dołączoną XConstraint właściwość na szerokość elementu nadrzędnego () RelativeLayoutminus 40. BoxView Podobnie ustawia dołączoną YConstraint właściwość na wysokość elementu nadrzędnego minus 40. Dzięki temu żółty BoxView zostanie wyświetlony w prawym dolnym rogu ekranu.

Uwaga

BoxView obiekty, które nie określają rozmiaru, mają automatycznie rozmiar do 40x40 według Xamarin.Forms.

Srebro BoxView nazwane oneThird jest umieszczone centralnie w stosunku do jego elementu nadrzędnego. Jest również wielkości względem jej rodzica, będąc jedną trzecią szerokości i wysokości. Jest to osiągane przez ustawienie XConstraint właściwości i WidthConstraint dołączonych do szerokości elementu nadrzędnego (), RelativeLayoutpomnożonego przez 0,33. YConstraint Podobnie właściwości i HeightConstraint dołączone są ustawione na wysokość elementu nadrzędnego, pomnożone przez 0,33.

BoxView jest umieszczony i ma rozmiar względem oneThird BoxViewwartości . Jest to osiągane przez ustawienie jej XConstraint i YConstraint dołączonych właściwości odpowiednio do X wartości i Y elementu równorzędnego. Podobnie jego rozmiar jest ustawiony na jedną trzecią szerokości i wysokości elementu równorzędnego. Można to osiągnąć, ustawiając odpowiednio jego WidthConstraint i HeightConstraint dołączone właściwości do Width wartości i Height elementu równorzędnego, które następnie są mnożone przez 0,33.

Poniższy zrzut ekranu przedstawia wynikowy układ:

Elementy podrzędne umieszczone w elemencji względnej przy użyciu wartości względnych

Obiekty ograniczeń

Klasa Constraint definiuje następujące publiczne metody statyczne, które zwracają Constraint obiekty:

  • Constant, co ogranicza element podrzędny do rozmiaru określonego za pomocą elementu double.
  • FromExpression, który ogranicza element podrzędny przy użyciu wyrażenia lambda.
  • RelativeToParent, który ogranicza element podrzędny względem rozmiaru elementu nadrzędnego.
  • RelativeToView, które ogranicza element podrzędny względem rozmiaru widoku.

Ponadto BoundsConstraint klasa definiuje pojedynczą metodę , FromExpressionktóra zwraca wartość ograniczającą BoundsConstraint położenie i rozmiar elementu podrzędnego z wartością Expression<Func<Rectangle>>. Tej metody można użyć do ustawienia dołączonej BoundsConstraint właściwości.

Poniższy kod języka C# pokazuje RelativeLayout , których elementy podrzędne są ograniczone przez Constraint obiekty:

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

W tym przykładzie RelativeLayout elementy podrzędne są dodawane do elementu używającego Add przeciążenia, które wymaga opcjonalnego Constraint obiektu dla xargumentów , y, widthi height .

Uwaga

Element RelativeLayout , który używa wartości względnych, może umieszczać i ustawiać rozmiar elementów podrzędnych, aby nie mieściły się w granicach układu.