Xamarin.Forms AbsoluteLayout
Digunakan AbsoluteLayout
untuk memposisikan dan mengukur anak menggunakan nilai eksplisit. Posisi ditentukan oleh sudut kiri atas anak relatif terhadap sudut AbsoluteLayout
kiri atas , dalam unit independen perangkat. AbsoluteLayout
juga menerapkan fitur penempatan dan ukuran yang proporsional. Selain itu, tidak seperti beberapa kelas tata letak lainnya, AbsoluteLayout
dapat memposisikan anak-anak sehingga tumpang tindih.
AbsoluteLayout
Harus dianggap sebagai tata letak tujuan khusus yang akan digunakan hanya ketika Anda dapat memaksakan ukuran pada anak-anak, atau ketika ukuran elemen tidak memengaruhi posisi anak lain.
Kelas AbsoluteLayout
menentukan properti berikut:
LayoutBounds
, dari jenisRectangle
, yang merupakan properti terlampir yang mewakili posisi dan ukuran anak. Nilai default properti ini adalah (0,0,AutoSize,AutoSize).LayoutFlags
, dari jenisAbsoluteLayoutFlags
, yang merupakan properti terlampir yang menunjukkan apakah properti batas tata letak yang digunakan untuk memosisikan dan mengukur anak ditafsirkan secara proporsional. Nilai default properti ini adalahAbsoluteLayoutFlags.None
.
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.
Kelas AbsoluteLayout
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
Untuk mendapatkan performa tata letak terbaik, ikuti panduan di Mengoptimalkan performa tata letak.
Posisi dan ukuran anak
Posisi dan ukuran anak dalam suatu AbsoluteLayout
ditentukan dengan mengatur AbsoluteLayout.LayoutBounds
properti terlampir dari setiap anak, menggunakan nilai absolut atau nilai proporsional. Nilai absolut dan proporsional dapat dicampur untuk anak-anak ketika posisi harus diskalakan, tetapi ukurannya harus tetap, atau sebaliknya. Untuk informasi tentang nilai absolut, lihat Posisi dan ukuran absolut. Untuk informasi tentang nilai proporsional, lihat Penempatan dan ukuran proporsional.
Properti AbsoluteLayout.LayoutBounds
terlampir dapat diatur menggunakan dua format, terlepas dari apakah nilai absolut atau proporsional digunakan:
x, y
. Dengan format ini,x
nilai dany
menunjukkan posisi sudut kiri atas anak relatif terhadap induknya. Anak tidak dibatasi dan ukurannya sendiri.x, y, width, height
. Dengan format ini,x
nilai dany
menunjukkan posisi sudut kiri atas anak relatif terhadap induknya, sementarawidth
nilai danheight
menunjukkan ukuran anak.
Untuk menentukan bahwa ukuran anak itu sendiri secara horizontal atau vertikal, atau keduanya, atur width
nilai dan/atau height
ke AbsoluteLayout.AutoSize
properti . Namun, penggunaan properti ini secara berlebihan dapat membahayakan performa aplikasi, karena menyebabkan mesin tata letak melakukan perhitungan tata letak tambahan.
Penting
Properti HorizontalOptions
dan VerticalOptions
tidak berpengaruh pada anak-anak dari AbsoluteLayout
.
Posisi dan ukuran absolut
Secara default, AbsoluteLayout
posisi dan ukuran anak yang menggunakan nilai absolut, 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 AbsoluteLayout
dan mengatur AbsoluteLayout.LayoutBounds
properti terlampir pada setiap anak ke posisi absolut dan/atau 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 AbsoluteLayout
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="AbsoluteLayoutDemos.Views.StylishHeaderDemoPage"
Title="Stylish header demo">
<AbsoluteLayout Margin="20">
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="0, 10, 200, 5" />
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="0, 20, 200, 5" />
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="10, 0, 5, 65" />
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="20, 0, 5, 65" />
<Label Text="Stylish Header"
FontSize="24"
AbsoluteLayout.LayoutBounds="30, 25" />
</AbsoluteLayout>
</ContentPage>
Dalam contoh ini, posisi setiap BoxView
objek didefinisikan menggunakan dua nilai absolut pertama yang ditentukan dalam AbsoluteLayout.LayoutBounds
properti terlampir. Ukuran masing-masing BoxView
ditentukan menggunakan nilai ketiga dan ke depan. Posisi Label
objek didefinisikan menggunakan dua nilai absolut yang ditentukan dalam AbsoluteLayout.LayoutBounds
properti terlampir. Nilai ukuran tidak ditentukan untuk Label
, sehingga tidak dibatasi dan ukurannya sendiri. Dalam semua kasus, nilai absolut mewakili unit independen perangkat.
Cuplikan layar berikut menunjukkan tata letak yang dihasilkan:
Kode C# yang setara ditunjukkan di bawah ini:
public class StylishHeaderDemoPageCS : ContentPage
{
public StylishHeaderDemoPageCS()
{
AbsoluteLayout absoluteLayout = new AbsoluteLayout
{
Margin = new Thickness(20)
};
absoluteLayout.Children.Add(new BoxView
{
Color = Color.Silver,
}, new Rectangle(0, 10, 200, 5));
absoluteLayout.Children.Add(new BoxView
{
Color = Color.Silver
}, new Rectangle(0, 20, 200, 5));
absoluteLayout.Children.Add(new BoxView
{
Color = Color.Silver
}, new Rectangle(10, 0, 5, 65));
absoluteLayout.Children.Add(new BoxView
{
Color = Color.Silver
}, new Rectangle(20, 0, 5, 65));
absoluteLayout.Children.Add(new Label
{
Text = "Stylish Header",
FontSize = 24
}, new Point(30,25));
Title = "Stylish header demo";
Content = absoluteLayout;
}
}
Dalam contoh ini, posisi dan ukuran masing-masing BoxView
didefinisikan menggunakan Rectangle
objek. Posisi Label
didefinisikan menggunakan Point
objek.
Di C#, Anda juga dapat mengatur posisi dan ukuran anak AbsoluteLayout
setelah ditambahkan ke Children
koleksi, menggunakan AbsoluteLayout.SetLayoutBounds
metode . Argumen pertama untuk metode ini adalah anak, dan yang kedua adalah Rectangle
objek.
Catatan
Yang AbsoluteLayout
menggunakan nilai absolut dapat memposisikan dan mengukur anak sehingga tidak sesuai dalam batas tata letak.
Penempatan dan ukuran proporsional
Dapat AbsoluteLayout
memposisikan dan mengukur anak menggunakan nilai proporsional. Ini dicapai dengan menambahkan anak-anak ke Children
koleksi AbsoluteLayout
, dan dengan mengatur AbsoluteLayout.LayoutBounds
properti terlampir pada setiap anak ke posisi proporsional dan/atau nilai ukuran dalam rentang 0-1. Nilai posisi dan ukuran dibuat proporsional dengan mengatur AbsoluteLayout.LayoutFlags
properti terlampir pada setiap anak.
Properti AbsoluteLayout.LayoutFlags
terlampir, dari jenis AbsoluteLayoutFlags
, memungkinkan Anda mengatur bendera yang menunjukkan bahwa nilai posisi dan ukuran tata letak untuk anak sebanding dengan ukuran AbsoluteLayout
. Saat meletakkan anak, AbsoluteLayout
menskalakan nilai posisi dan ukuran dengan tepat, ke ukuran perangkat apa pun.
Enumerasi AbsoluteLayoutFlags
menentukan anggota berikut:
None
, menunjukkan bahwa nilai akan ditafsirkan sebagai absolut. Ini adalah nilai default propertiAbsoluteLayout.LayoutFlags
terlampir.XProportional
, menunjukkan bahwax
nilai akan ditafsirkan sebagai proporsional, sambil memperlakukan semua nilai lain sebagai absolut.YProportional
, menunjukkan bahway
nilai akan ditafsirkan sebagai proporsional, sambil memperlakukan semua nilai lain sebagai absolut.WidthProportional
, menunjukkan bahwawidth
nilai akan ditafsirkan sebagai proporsional, sambil memperlakukan semua nilai lain sebagai absolut.HeightProportional
, menunjukkan bahwaheight
nilai akan ditafsirkan sebagai proporsional, sambil memperlakukan semua nilai lain sebagai absolut.PositionProportional
, menunjukkan bahwax
nilai dany
akan ditafsirkan sebagai proporsional, sementara nilai ukuran ditafsirkan sebagai absolut.SizeProportional
, menunjukkan bahwawidth
nilai danheight
akan ditafsirkan sebagai proporsional, sementara nilai posisi ditafsirkan sebagai absolut.All
, menunjukkan bahwa semua nilai akan ditafsirkan sebagai proporsional.
Tip
Enumerasi AbsoluteLayoutFlags
adalah Flags
enumerasi, yang berarti bahwa anggota enumerasi dapat digabungkan. Ini dicapai di XAML dengan daftar yang dipisahkan koma, dan di C# dengan operator OR bitwise.
Misalnya, jika Anda menggunakan SizeProportional
bendera dan mengatur lebar anak ke 0,25 dan tinggi menjadi 0,1, anak akan menjadi seperempat dari lebar AbsoluteLayout
dan sepersepuluh tingginya. Benderanya PositionProportional
mirip. Posisi (0,0) menempatkan anak di sudut kiri atas, sementara posisi (1,1) menempatkan anak di sudut kanan bawah, dan posisi (0,5,0,5) mempusatkan anak dalam AbsoluteLayout
.
XAML berikut menunjukkan AbsoluteLayout
anak-anaknya diposisikan menggunakan nilai proporsional:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AbsoluteLayoutDemos.Views.ProportionalDemoPage"
Title="Proportional demo">
<AbsoluteLayout>
<BoxView Color="Blue"
AbsoluteLayout.LayoutBounds="0.5,0,100,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Green"
AbsoluteLayout.LayoutBounds="0,0.5,25,100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Red"
AbsoluteLayout.LayoutBounds="1,0.5,25,100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Black"
AbsoluteLayout.LayoutBounds="0.5,1,100,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<Label Text="Centered text"
AbsoluteLayout.LayoutBounds="0.5,0.5,110,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</ContentPage>
Dalam contoh ini, setiap anak diposisikan menggunakan nilai proporsional tetapi berukuran menggunakan nilai absolut. Ini dicapai dengan mengatur AbsoluteLayout.LayoutFlags
properti terlampir dari setiap anak ke PositionProportional
. Dua nilai pertama yang ditentukan dalam AbsoluteLayout.LayoutBounds
properti terlampir, untuk setiap anak, menentukan posisi menggunakan nilai proporsional. Ukuran setiap anak didefinisikan dengan nilai absolut ketiga dan ke depan, menggunakan unit independen perangkat.
Cuplikan layar berikut menunjukkan tata letak yang dihasilkan:
Kode C# yang setara ditunjukkan di bawah ini:
public class ProportionalDemoPageCS : ContentPage
{
public ProportionalDemoPageCS()
{
BoxView blue = new BoxView { Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds(blue, new Rectangle(0.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags(blue, AbsoluteLayoutFlags.PositionProportional);
BoxView green = new BoxView { Color = Color.Green };
AbsoluteLayout.SetLayoutBounds(green, new Rectangle(0, 0.5, 25, 100));
AbsoluteLayout.SetLayoutFlags(green, AbsoluteLayoutFlags.PositionProportional);
BoxView red = new BoxView { Color = Color.Red };
AbsoluteLayout.SetLayoutBounds(red, new Rectangle(1, 0.5, 25, 100));
AbsoluteLayout.SetLayoutFlags(red, AbsoluteLayoutFlags.PositionProportional);
BoxView black = new BoxView { Color = Color.Black };
AbsoluteLayout.SetLayoutBounds(black, new Rectangle(0.5, 1, 100, 25));
AbsoluteLayout.SetLayoutFlags(black, AbsoluteLayoutFlags.PositionProportional);
Label label = new Label { Text = "Centered text" };
AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, 110, 25));
AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);
Title = "Proportional demo";
Content = new AbsoluteLayout
{
Children = { blue, green, red, black, label }
};
}
}
Dalam contoh ini, posisi dan ukuran setiap anak diatur dengan AbsoluteLayout.SetLayoutBounds
metode . Argumen pertama untuk metode ini adalah anak, dan yang kedua adalah Rectangle
objek. Posisi setiap anak diatur dengan nilai proporsional, sementara ukuran setiap anak diatur dengan nilai absolut, menggunakan unit independen perangkat.
Catatan
Yang AbsoluteLayout
menggunakan nilai proporsional dapat memosisikan dan mengukur anak sehingga tidak cocok dalam batas tata letak dengan menggunakan nilai di luar rentang 0-1.