AbsoluteLayout
Telusuri sampel
UI Aplikasi Multi-platform .NET (.NET MAUI) AbsoluteLayout digunakan untuk memposisikan dan mengukur anak menggunakan nilai eksplisit. Posisi ditentukan oleh sudut kiri atas anak relatif terhadap sudut AbsoluteLayoutkiri 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 jenisRect, 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 Properti Terlampir .NET MAUI.
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,xnilai danymenunjukkan posisi sudut kiri atas anak relatif terhadap induknya. Anak tidak dibatasi dan ukurannya sendiri.x, y, width, height. Dengan format ini,xnilai danymenunjukkan posisi sudut kiri atas anak relatif terhadap induknya, sementarawidthnilai danheightmenunjukkan 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 ke dan AbsoluteLayout 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://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AbsoluteLayoutDemos.Views.XAML.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 StylishHeaderDemoPage : ContentPage
{
public StylishHeaderDemoPage()
{
AbsoluteLayout absoluteLayout = new AbsoluteLayout
{
Margin = new Thickness(20)
};
absoluteLayout.Add(new BoxView
{
Color = Colors.Silver
}, new Rect(0, 10, 200, 5));
absoluteLayout.Add(new BoxView
{
Color = Colors.Silver
}, new Rect(0, 20, 200, 5));
absoluteLayout.Add(new BoxView
{
Color = Colors.Silver
}, new Rect(10, 0, 5, 65));
absoluteLayout.Add(new BoxView
{
Color = Colors.Silver
}, new Rect(20, 0, 5, 65));
absoluteLayout.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 Rect objek. Posisi Label didefinisikan menggunakan Point objek. Contoh C# menggunakan metode ekstensi berikut Add untuk menambahkan anak ke AbsoluteLayout:
using Microsoft.Maui.Layouts;
namespace Microsoft.Maui.Controls
{
public static class AbsoluteLayoutExtensions
{
public static void Add(this AbsoluteLayout absoluteLayout, IView view, Rect bounds, AbsoluteLayoutFlags flags = AbsoluteLayoutFlags.None)
{
if (view == null)
throw new ArgumentNullException(nameof(view));
if (bounds.IsEmpty)
throw new ArgumentNullException(nameof(bounds));
absoluteLayout.Add(view);
absoluteLayout.SetLayoutBounds(view, bounds);
absoluteLayout.SetLayoutFlags(view, flags);
}
public static void Add(this AbsoluteLayout absoluteLayout, IView view, Point position)
{
if (view == null)
throw new ArgumentNullException(nameof(view));
if (position.IsEmpty)
throw new ArgumentNullException(nameof(position));
absoluteLayout.Add(view);
absoluteLayout.SetLayoutBounds(view, new Rect(position.X, position.Y, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
}
}
}
Di C#, Dimungkinkan juga untuk mengatur posisi dan ukuran anak AbsoluteLayout setelah ditambahkan ke tata letak, menggunakan AbsoluteLayout.SetLayoutBounds metode . Argumen pertama untuk metode ini adalah anak, dan yang kedua adalah Rect 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 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.LayoutFlagsterlampir.XProportional, menunjukkan bahwaxnilai akan ditafsirkan sebagai proporsional, sambil memperlakukan semua nilai lain sebagai absolut.YProportional, menunjukkan bahwaynilai akan ditafsirkan sebagai proporsional, sambil memperlakukan semua nilai lain sebagai absolut.WidthProportional, menunjukkan bahwawidthnilai akan ditafsirkan sebagai proporsional, sambil memperlakukan semua nilai lain sebagai absolut.HeightProportional, menunjukkan bahwaheightnilai akan ditafsirkan sebagai proporsional, sambil memperlakukan semua nilai lain sebagai absolut.PositionProportional, menunjukkan bahwaxnilai danyakan ditafsirkan sebagai proporsional, sementara nilai ukuran ditafsirkan sebagai absolut.SizeProportional, menunjukkan bahwawidthnilai danheightakan 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://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AbsoluteLayoutDemos.Views.XAML.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 ProportionalDemoPage : ContentPage
{
public ProportionalDemoPage()
{
BoxView blue = new BoxView { Color = Colors.Blue };
AbsoluteLayout.SetLayoutBounds(blue, new Rect(0.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags(blue, AbsoluteLayoutFlags.PositionProportional);
BoxView green = new BoxView { Color = Colors.Green };
AbsoluteLayout.SetLayoutBounds(green, new Rect(0, 0.5, 25, 100));
AbsoluteLayout.SetLayoutFlags(green, AbsoluteLayoutFlags.PositionProportional);
BoxView red = new BoxView { Color = Colors.Red };
AbsoluteLayout.SetLayoutBounds(red, new Rect(1, 0.5, 25, 100));
AbsoluteLayout.SetLayoutFlags(red, AbsoluteLayoutFlags.PositionProportional);
BoxView black = new BoxView { Color = Colors.Black };
AbsoluteLayout.SetLayoutBounds(black, new Rect(0.5, 1, 100, 25));
AbsoluteLayout.SetLayoutFlags(black, AbsoluteLayoutFlags.PositionProportional);
Label label = new Label { Text = "Centered text" };
AbsoluteLayout.SetLayoutBounds(label, new Rect(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 Rect 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.
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk