Bagikan melalui

Xamarin.Forms RelativeLayout

  • Artikel

Xamarin.Forms RelativeLayout

RelativeLayout digunakan untuk memosisikan dan mengukur anak relatif terhadap properti tata letak atau elemen saudara. Ini memungkinkan UI dibuat yang menskalakan secara proporsional di seluruh ukuran perangkat. Selain itu, tidak seperti beberapa kelas tata letak lainnya, RelativeLayout mampu memposisikan turunan sehingga tumpang tindih.

Kelas RelativeLayout menentukan properti berikut:

  • XConstraint, dari jenis Constraint, yang merupakan properti terlampir yang mewakili batasan pada posisi X anak.
  • YConstraint, dari jenis Constraint, yang merupakan properti terlampir yang mewakili batasan pada posisi Y anak.
  • WidthConstraint, dari jenis Constraint, yang merupakan properti terlampir yang mewakili batasan pada lebar anak.
  • HeightConstraint, dari jenis Constraint, yang merupakan properti terlampir yang mewakili batasan pada tinggi anak.
  • BoundsConstraint, dari jenis BoundsConstraint, yang merupakan properti terlampir yang mewakili batasan pada posisi dan ukuran anak. Properti ini tidak dapat dengan mudah dikonsumsi dari XAML.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti dapat menjadi target pengikatan data dan ditata. Untuk informasi selengkapnya tentang properti terlampir, lihat Xamarin.Forms Properti Terlampir.

Catatan

Lebar dan tinggi anak dalam RelativeLayout juga dapat ditentukan melalui properti dan HeightRequest anakWidthRequest, bukan WidthConstraint properti dan HeightConstraint terlampir.

Kelas RelativeLayout berasal dari Layout<T> kelas , yang mendefinisikan Children properti jenis IList<T>. Properti Children adalah ContentProperty kelas Layout<T> , dan oleh karena itu tidak perlu diatur secara eksplisit dari XAML.

Tip

Hindari menggunakan RelativeLayout jika memungkinkan. Ini akan mengakibatkan CPU harus melakukan lebih banyak pekerjaan secara signifikan.

Kendala

RelativeLayoutDalam , posisi dan ukuran anak ditentukan sebagai batasan menggunakan nilai absolut atau nilai relatif. Ketika batasan tidak ditentukan, anak akan diposisikan di sudut kiri atas tata letak.

Tabel berikut ini memperlihatkan cara menentukan batasan di XAML dan C#:

XAML C#
Nilai absolut Batasan absolut ditentukan dengan mengatur RelativeLayout properti terlampir ke double nilai. Batasan absolut ditentukan oleh Constraint.Constant metode , atau dengan menggunakan Children.Add kelebihan beban yang memerlukan Func<Rectangle> argumen.
Nilai relatif Batasan relatif ditentukan dengan mengatur RelativeLayout properti terlampir ke Constraint objek yang dikembalikan oleh ConstraintExpression ekstensi markup. Batasan relatif ditentukan oleh Constraint objek yang dikembalikan oleh metode Constraint kelas.

Untuk informasi selengkapnya tentang menentukan batasan menggunakan nilai absolut, lihat Posisi dan ukuran absolut. Untuk informasi selengkapnya tentang menentukan batasan menggunakan nilai relatif, lihat Posisi dan ukuran relatif.

Di C#, anak-anak dapat ditambahkan ke RelativeLayout tiga Add kelebihan beban. Kelebihan beban pertama memerlukan Expression<Func<Rectangle>> untuk menentukan posisi dan ukuran anak. Kelebihan beban kedua memerlukan objek opsional Expression<Func<double>> untuk argumen , , ywidth, dan heightx. Kelebihan beban ketiga memerlukan objek opsional Constraint untuk argumen , , ywidth, dan heightx.

Dimungkinkan untuk mengubah posisi dan ukuran anak dengan RelativeLayout metode , , SetYConstraintSetWidthConstraint, dan SetHeightConstraint .SetXConstraint Argumen pertama untuk masing-masing metode ini adalah anak, dan yang kedua adalah Constraint objek. Selain itu, metode ini SetBoundsConstraint juga dapat digunakan untuk mengubah posisi dan ukuran anak. Argumen pertama untuk metode ini adalah anak, dan yang kedua adalah BoundsConstraint objek.

Posisi dan ukuran absolut

Dapat RelativeLayout memosisikan dan mengukur anak menggunakan nilai absolut, yang ditentukan dalam unit independen perangkat, yang secara eksplisit menentukan di mana anak-anak harus ditempatkan dalam tata letak. Ini dicapai dengan menambahkan anak-anak ke Children koleksi dan mengatur XConstraintproperti , , YConstraintWidthConstraint, dan HeightConstraint terlampir pada setiap anak ke posisi absolut dan/RelativeLayoutatau nilai ukuran.

Peringatan

Menggunakan nilai absolut untuk penempatan dan ukuran anak dapat bermasalah, karena perangkat yang berbeda memiliki ukuran dan resolusi layar yang berbeda. Oleh karena itu, koordinat untuk pusat layar pada satu perangkat mungkin diimbangi pada perangkat lain.

XAML berikut menunjukkan RelativeLayout anak-anaknya diposisikan menggunakan nilai absolut:

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

Dalam contoh ini, posisi setiap BoxView objek didefinisikan menggunakan nilai yang ditentukan dalam XConstraint properti terlampir dan YConstraint . Ukuran masing-masing BoxView ditentukan menggunakan nilai yang ditentukan dalam WidthConstraint properti terlampir dan HeightConstraint . Posisi Label objek juga didefinisikan menggunakan nilai yang ditentukan dalam XConstraint properti terlampir dan YConstraint . Namun, nilai ukuran tidak ditentukan untuk Label, sehingga tidak dibatasi dan ukuran itu sendiri. Dalam semua kasus, nilai absolut mewakili unit independen perangkat.

Cuplikan layar berikut menunjukkan tata letak yang dihasilkan:

Anak-anak ditempatkan di RelativeLayout menggunakan nilai absolut

Kode C# yang setara ditunjukkan di bawah ini:

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

Dalam contoh ini, BoxView objek ditambahkan ke RelativeLayout penggunaan Add kelebihan beban yang memerlukan Expression<Func<Rectangle>> untuk menentukan posisi dan ukuran setiap anak. Posisi Label didefinisikan menggunakan Add kelebihan beban yang memerlukan objek opsional Constraint , dalam hal ini dibuat oleh Constraint.Constant metode .

Catatan

RelativeLayout Yang menggunakan nilai absolut dapat memposisikan dan mengukur anak sehingga tidak cocok dalam batas tata letak.

Posisi dan ukuran relatif

Dapat RelativeLayout memosisikan dan mengukur anak menggunakan nilai yang relatif terhadap properti tata letak, atau elemen saudara. Ini dicapai dengan menambahkan anak-anak ke Children koleksi dan mengatur XConstraintproperti , , YConstraintWidthConstraint, dan HeightConstraint terlampir pada setiap anak ke nilai relatif menggunakan ConstraintRelativeLayout objek.

Batasan bisa berupa konstanta, relatif terhadap induk, atau relatif terhadap saudara kandung. Jenis batasan diwakili oleh ConstraintType enumerasi, yang menentukan anggota berikut:

  • RelativeToParent, yang menunjukkan batasan yang relatif terhadap induk.
  • RelativeToView, yang menunjukkan batasan yang relatif terhadap tampilan (atau saudara kandung).
  • Constant, yang menunjukkan batasan konstanta.

Ekstensi markup batasan

Di XAML, Constraint objek dapat dibuat oleh ConstraintExpression ekstensi markup. Ekstensi markup ini biasanya digunakan untuk menghubungkan posisi dan ukuran anak dalam dengan RelativeLayout induknya, atau ke saudara kandung.

Kelas ConstraintExpression menentukan properti berikut:

  • Constant, dari jenis double, yang mewakili nilai konstanta batasan.
  • ElementName, dari jenis string, yang mewakili nama elemen sumber untuk menghitung batasan.
  • Factor, dari jenis double, yang mewakili faktor untuk menskalakan dimensi yang dibatasi, relatif terhadap elemen sumber. Properti ini default ke 1.
  • Property, dari jenis string, yang mewakili nama properti pada elemen sumber yang akan digunakan dalam perhitungan batasan.
  • Type, dari jenis ConstraintType, yang mewakili jenis batasan.

Untuk informasi selengkapnya tentang Xamarin.Forms ekstensi markup, lihat Ekstensi Markup XAML.

XAML berikut menunjukkan RelativeLayout anak-anaknya dibatasi oleh ConstraintExpression ekstensi markup:

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

Dalam contoh ini, posisi setiap BoxView objek didefinisikan dengan mengatur XConstraint properti terlampir dan YConstraint . Properti pertama BoxView memiliki properti yang XConstraint terlampir dan YConstraint diatur ke konstanta, yang merupakan nilai absolut. Objek yang tersisa BoxView semuanya memiliki posisi yang ditetapkan dengan menggunakan setidaknya satu nilai relatif. Misalnya, objek kuning BoxView mengatur XConstraint properti terpasang ke lebar induknya ( RelativeLayout) minus 40. Demikian pula, ini BoxView mengatur YConstraint properti terlampir ke tinggi induknya minus 40. Ini memastikan bahwa kuning BoxView muncul di sudut kanan bawah layar.

Catatan

BoxView objek yang tidak menentukan ukuran secara otomatis berukuran 40x40 dengan Xamarin.Forms.

Perak BoxView bernama oneThird diposisikan secara terpusat, relatif terhadap induknya. Ukurannya juga relatif terhadap induknya, menjadi sepertiga dari lebar dan tingginya. Ini dicapai dengan mengatur XConstraint properti yang terpasang dan WidthConstraint ke lebar induk ( RelativeLayout), dikalikan dengan 0,33. Demikian pula, YConstraint properti yang terpasang dan HeightConstraint diatur ke tinggi induk, dikalikan dengan 0,33.

BoxView Hitam diposisikan dan berukuran relatif terhadap oneThirdBoxView. Ini dicapai dengan mengatur XConstraint properti dan YConstraint terlampir ke X nilai dan Y , masing-masing, dari elemen saudara. Demikian pula, ukurannya diatur ke sepertiga dari lebar dan tinggi elemen saudaranya. Ini dicapai dengan mengatur propertinya WidthConstraint dan HeightConstraint terlampir ke Width nilai dan Height elemen saudara, masing-masing, yang kemudian dikalikan dengan 0,33.

Cuplikan layar berikut menunjukkan tata letak yang dihasilkan:

Anak-anak ditempatkan di RelativeLayout menggunakan nilai relatif

Objek batasan

Kelas Constraint mendefinisikan metode statis publik berikut, yang mengembalikan Constraint objek:

  • Constant, yang membatasi anak ke ukuran yang ditentukan dengan double.
  • FromExpression, yang membatasi anak menggunakan ekspresi lambda.
  • RelativeToParent, yang membatasi anak relatif terhadap ukuran induknya.
  • RelativeToView, yang membatasi anak relatif terhadap ukuran tampilan.

Selain itu, BoundsConstraint kelas mendefinisikan satu metode, FromExpression, yang mengembalikan BoundsConstraint yang membatasi posisi dan ukuran anak dengan Expression<Func<Rectangle>>. Metode ini dapat digunakan untuk mengatur BoundsConstraint properti terlampir.

Kode C# berikut menunjukkan RelativeLayout anak-anaknya dibatasi oleh Constraint objek:

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

Dalam contoh ini, anak ditambahkan ke RelativeLayout penggunaan kelebihan beban yang memerlukan objek opsional Constraint untuk xargumen , , ywidth, dan heightAdd .

Catatan

RelativeLayout Yang menggunakan nilai relatif dapat memposisikan dan mengukur anak sehingga tidak cocok dalam batas tata letak.