AbsoluteLayout
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,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 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.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://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
https://aka.ms/ContentUserFeedback.
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:Kirim dan lihat umpan balik untuk