Xamarin.Forms RelativeLayout

Örneği indirme

Xamarin.Forms

, RelativeLayout düzenin veya karpuz öğelerinin özelliklerine göre çocukların konumlarını ve boyutunu değiştirmek için kullanılır. Bu, cihaz boyutları arasında orantılı olarak ölçeklendirilen kullanıcı oluşturulduğunda UI'lere olanak sağlar. Buna ek olarak, diğer bazı düzen sınıflarını aksine, RelativeLayout örtüşme için alt konumlandırmak mümkün.

sınıfı RelativeLayout aşağıdaki özellikleri tanımlar:

• XConstraint, alt Constraint dosyanın X konumundaki kısıtlamayı temsil eden ekli bir özellik olan türü.
• YConstraint, Constraint türü, alt değerin Y konumundaki kısıtlamayı temsil eden ekli bir özelliktir.
• WidthConstraint, alt Constraint dosyanın genişliğiyle ilgili kısıtlamayı temsil eden ekli bir özellik olan türü.
• HeightConstraint, Constraint türü, alt çocuğun yüksekliğiyle ilgili kısıtlamayı temsil eden ekli bir özelliktir.
• BoundsConstraint, BoundsConstraint türü, alt dosyanın konumu ve boyutuyla ilgili kısıtlamayı temsil eden ekli bir özelliktir. Bu özellik XAML'den kolayca tüketilmemelidir.

Bu özellikler nesneler tarafından desteklene, bu da özelliklerin veri bağlamalarının hedefi ve BindableProperty stile sahip olması anlamına gelir. Ekli özellikler hakkında daha fazla bilgi için Xamarin.Forms Attached Properties bkz. .

sınıfı, RelativeLayout türünde bir özelliği tanımlayan Layout<T>Children sınıfından IList<T> türetmektedir. Childrenözelliği sınıfının ContentPropertyLayout<T> özelliğidir ve bu nedenle XAML'den açıkça ayarlanmış olması gerekmez.

Kısıtlamalar

içinde, RelativeLayout çocukların konumu ve boyutu mutlak değerler veya göreli değerler kullanılarak kısıtlamalar olarak belirtilir. Kısıtlamalar belirtilmezse, bir alt düzen, düzenin sol üst köşesinde yer atılır.

Aşağıdaki tabloda, XAML ve C# içinde kısıtlamaların nasıl belirtilmesiyle ilgili bilgiler ve bilgiler yer almaktadır:

Mutlak değerleri kullanarak kısıtlamaları belirtme hakkında daha fazla bilgi için bkz. Mutlak konumlandırma ve boyutlandırma. Göreli değerleri kullanarak kısıtlamaları belirtme hakkında daha fazla bilgi için bkz. Göreli konumlandırma ve boyutlandırma.

C# içinde, üç aşırı yükleme RelativeLayout ile 'ye Add çocuk eklenebilir. İlk aşırı yükleme, Expression<Func<Rectangle>> bir alt dosyanın konumunu ve boyutunu belirtmek için gerektirir. İkinci aşırı yükleme, , Expression<Func<double>> , ve bağımsız değişkenleri için xywidth isteğe bağlı nesneler height gerektirir. Üçüncü aşırı yükleme, , Constraint , ve bağımsız değişkenleri için xywidth isteğe bağlı nesneler height gerektirir.

, , ve yöntemleriyle bir alt dosyanın konumunu ve boyutunu RelativeLayoutSetXConstraint değiştirmek SetYConstraintSetWidthConstraintSetHeightConstraint mümkündür. Bu yöntemlerin her biri için ilk bağımsız değişken alt, ikinci bağımsız değişken ise bir Constraint nesnesidir. Ayrıca, yöntemi SetBoundsConstraint bir alt dosyanın konumunu ve boyutunu değiştirmek için de kullanılabilir. Bu yöntemin ilk bağımsız değişkeni alt, ikinci bağımsız değişken ise bir BoundsConstraint nesnesidir.

Mutlak konumlandırma ve boyutlandırma

Bir, cihazdan bağımsız birimlerde belirtilen mutlak değerleri kullanarak, düzende çocukların yerleştirilmeli olduğu yeri açıkça tanımlayan bir konum ve RelativeLayout boyuta sahip olabilir. Bu, bir koleksiyonuna alt ekleme ve her altta bulunan , , ve ekli özelliklerini mutlak konum ve/veya boyut değerlerine ChildrenRelativeLayoutXConstraintYConstraintWidthConstraintHeightConstraint ayararak elde edilir.

Aşağıdaki XAML, mutlak RelativeLayout değerler kullanılarak konumlara sahip olan bir'i gösterir:

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

Bu örnekte, her nesnenin konumu BoxView ve ekli özelliklerinde belirtilen değerler XConstraint kullanılarak YConstraint tanımlanır. Her bir BoxView boyutu, ve ekli özelliklerinde belirtilen WidthConstraint değerler HeightConstraint kullanılarak tanımlanır. Nesnenin Label konumu, ve ekli özelliklerinde belirtilen değerler kullanılarak XConstraint da YConstraint tanımlanır. Ancak, boyut değerleri için belirtilmez ve bu Label nedenle sınırlandırilmemiştir ve kendisini boyutlarına sahiptir. Her durumda, mutlak değerler cihazdan bağımsız birimleri temsil eder.

Aşağıdaki ekran görüntüleri sonuçta elde edilen düzeni gösterir:

Eşdeğer C# kodu aşağıda gösterilmiştir:

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

Bu örnekte, her alt anın konumunu ve boyutunu belirtmek için bir gerektiren bir aşırı BoxViewRelativeLayout yükleme kullanılarak AddExpression<Func<Rectangle>> nesnelerine eklenir. konumu, yöntemi Label tarafından oluşturulan bu durumda Add isteğe bağlı nesneler gerektiren bir aşırı yükleme Constraint kullanılarak Constraint.Constant tanımlanır.

Göreli konumlandırma ve boyutlandırma

, RelativeLayout düzenin özelliklerine veya ögelere göre değerleri kullanarak öğeleri konumlarını ve boyutlarını kullanabilir. Bu, nesneleri kullanarak her altta bulunan ve , , ve ekli özelliklerini koleksiyonuna alt değerler ekleyerek elde ChildrenRelativeLayoutXConstraintYConstraintWidthConstraintHeightConstraintConstraint edilir.

Kısıtlamalar sabit, üst öğeye göre veya bir kardelik ile ilgili olabilir. Kısıtlama türü, aşağıdaki üyeleri ConstraintType tanımlayan listeyle temsil edilen bir listedir:

• RelativeToParent, üst öğeye göre bir kısıtlamayı gösterir.
• RelativeToView, bir görünüme (veya iki öğeye) göre bir kısıtlamayı gösterir.
• Constant, sabit bir kısıtlama olduğunu gösterir.

Kısıtlama işaretleme uzantısı

XAML'de, Constraint işaretleme uzantısı tarafından bir nesnesi ConstraintExpression oluşturulabilir. Bu işaretleme uzantısı genellikle bir içindeki alt öğenin konumunu ve boyutunu üst öğesiyle veya bir kardesi RelativeLayout ile ilişkilendirmek için kullanılır.

sınıfı ConstraintExpression aşağıdaki özellikleri tanımlar:

• _ConstraintExpression_Constant" data-linktype="absolute-path">, türü kısıtlama sabit Constant değerini temsil double eder.
• Xamarin_Forms _ConstraintExpression_ElementName" data-linktype="absolute-path">, türü, kısıtlamanın hesaplandırılamayacak kaynak ElementNamestring öğenin adını temsil eder.
• Xamarin_Forms _ConstraintExpression_Factor" data-linktype="absolute-path">, türü, kaynak öğeye göre kısıtlanmış bir boyutu ölçeklendirmek için gereken Factor faktörü temsil double eder. Bu özellik varsayılan olarak 1'i kullanır.
• Xamarin_Forms _ConstraintExpression_Property" data-linktype="absolute-path">, türü, kısıtlama hesaplamada kullanmak üzere kaynak öğedeki özelliğin Property adını temsil string eder.
• Xamarin_Forms _ConstraintExpression_Type türü olan data-linktype="absolute-path">, kısıtlama Type türünü temsil ConstraintType eder.

İşaretleme uzantıları hakkında Xamarin.Forms daha fazla bilgi için bkz. Xamarin.Forms

Aşağıdaki XAML, kar RelativeLayout marjı uzantısıyla kısıtlanmış olan ConstraintExpression bir'i gösterir:

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

Bu örnekte, ve ekli BoxView özellikleri ayarlandığı için her bir nesnenin XConstraintYConstraint konumu tanımlanır. BoxViewİlki, mutlak değerler olan XConstraintYConstraint sabitlere ayarlanmış ve ekli özelliklerine sahiptir. Kalan nesnelerin BoxView en az bir göreli değer kullanılarak konumlarının ayarlanmış olduğu nesneler. Örneğin, sarı nesne ekli özelliği üst öğenin BoxViewXConstraint genişliğine () eksi RelativeLayout 40'a ayarlar. Benzer şekilde, BoxView ekli YConstraint özelliği üst öğenin yüksekliği eksi 40 olarak ayarlar. Bu, ekranın BoxView sağ alt köşesinde sarının görünür.

adlı BoxViewoneThird gümüş, üst öğeye göre merkezi olarak konumlandı. Ayrıca, genişliği ve yüksekliğinin üçte biri olan üst öğeye göre de boyutlandırır. Bu, ve ekli özelliklerini XConstraintWidthConstraint üst öğenin genişliğine (), RelativeLayout 0,33 ile çarparak elde edilir. Benzer şekilde, YConstraint ve HeightConstraint ekli özellikleri üst öğenin yüksekliğine ayarlanır ve 0,33 ile çarpılır.

Siyah BoxView konumlara ve boyutuna göre oneThirdBoxView boyutlandırıldı. Bu, ve XConstraintYConstraint ekli özelliklerini, sırasıyla ve XY değerlerine, öbgenin değerine ayararak elde edilir. Benzer şekilde, boyutu, bu öğenin genişliğinin ve yüksekliğinin üçte biri olarak ayarlanır. Bu, onun ve ekli özelliklerini sırasıyla WidthConstraintHeightConstraintWidth 0,33 ile çarpılarak, öbgenin ve değerlerine Height ayarılarak elde edilir.

Aşağıdaki ekran görüntüsünde sonuçta elde edilen düzen yer alenidir:

Kısıtlama nesneleri

sınıfı, Constraint nesneleri geri alan aşağıdaki genel statik yöntemleri Constraint tanımlar:

• Constant, alt bir alt adı ile belirtilen bir boyuta double kısıtlar.
• FromExpression, bir lambda ifadesi kullanarak alt sınırlar.
• RelativeToParent, bir alt öğeyi üst öğenin boyutuna göre kısıtlar.
• RelativeToView, bir görünümün boyutuna göre alt sınırlar.

Ayrıca sınıfı, bir alt ın konumunu ve boyutunu bir ile kısıtlar bir döndüren tek BoundsConstraintFromExpression bir yöntemi BoundsConstraintExpression<Func<Rectangle>> tanımlar. Bu yöntem, ekli özelliği ayarlamak BoundsConstraint için kullanılabilir.

Aşağıdaki C# kodu, RelativeLayout nesneleriyle kısıtlanmış olan bir'i Constraint gösterir:

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

Bu örnekte, , , ve bağımsız değişkenleri için isteğe bağlı bir nesne gerektiren aşırı yükleme kullanılarak RelativeLayoutAddConstraintxywidth 'ye height eklenmiştir.

İlgili bağlantılar

• RelativeLayout tanıtımları (örnek)
• Xamarin.Forms Attached Properties
• XAML Biçimlendirme Uzantıları
• Choose a Xamarin.Forms Layout
• Improve Xamarin.Forms App Performance