Ringkasan Bab 14. Tata letak absolut
Catatan
Buku ini diterbitkan pada musim semi 2016, dan belum diperbarui sejak saat itu. Ada banyak dalam buku yang tetap berharga, tetapi beberapa materi sudah kedaluarsa, dan beberapa topik tidak lagi sepenuhnya benar atau lengkap.
Seperti StackLayout, AbsoluteLayout berasal dari Layout<View> dan mewarisi properti Children . AbsoluteLayout menerapkan sistem tata letak yang mengharuskan programmer untuk menentukan posisi anak-anaknya dan, secara opsional, ukurannya. 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.
AbsoluteLayout harus dianggap sebagai sistem tata letak tujuan khusus yang akan digunakan hanya ketika programmer dapat memaksakan ukuran pada anak-anak (misalnya, BoxView elemen) atau ketika ukuran elemen tidak memengaruhi posisi anak lain. Properti HorizontalOptions dan VerticalOptions tidak berpengaruh pada anak-anak dari AbsoluteLayout.
Bab ini juga memperkenalkan fitur penting dari properti yang dapat diikat terlampir yang memungkinkan properti yang ditentukan dalam satu kelas (dalam hal AbsoluteLayoutini ) untuk dilampirkan ke kelas lain (anak dari AbsoluteLayout).
AbsoluteLayout dalam kode
Anda dapat menambahkan anak ke koleksi menggunakan AbsoluteLayout metode standarAdd, tetapi AbsoluteLayout juga menyediakan metode yang diperluas Add yang memungkinkan Anda menentukan Rectangle.Children Metode lain Add hanya Pointmemerlukan , dalam hal ini anak tidak dibatasi dan ukuran itu sendiri.
Anda dapat membuat Rectangle nilai dengan konstruktor yang memerlukan empat nilai — dua nilai pertama yang menunjukkan posisi sudut kiri atas anak relatif terhadap induknya, dan dua nilai kedua menunjukkan ukuran anak. Atau Anda dapat menggunakan konstruktor yang memerlukan Point nilai dan Size .
Metode ini Add ditunjukkan dalam AbsoluteDemo, yang memosisikan BoxView elemen menggunakan Rectangle nilai, dan Label elemen hanya Point menggunakan nilai.
Sampel ChessboardFixed menggunakan 32 BoxView elemen untuk membuat pola papan catur. Program ini memberikan BoxView elemen ukuran hard-code 35 unit persegi. AbsoluteLayout memiliki HorizontalOptions dan VerticalOptions diatur ke LayoutOptions.Center, yang menyebabkan AbsoluteLayout memiliki ukuran total 280 unit persegi.
Properti yang dapat diikat terlampir
Dimungkinkan juga untuk mengatur posisi dan, secara opsional, ukuran anak AbsoluteLayout setelah ditambahkan ke Children koleksi menggunakan metode AbsoluteLayout.SetLayoutBoundsstatis . Argumen pertama adalah anak; yang kedua adalah Rectangle objek. Anda dapat menentukan bahwa ukuran anak itu sendiri secara horizontal dan/atau vertikal dengan mengatur nilai lebar dan tinggi ke AbsoluteLayout.AutoSize konstanta.
Sampel ChessboardDynamic menempatkan AbsoluteLayout dalam ContentView dengan SizeChanged handler untuk memanggil AbsoluteLayout.SetLayoutBounds semua anak untuk membuatnya sebesar mungkin.
Properti yang dapat diikat terlampir yang AbsoluteLayout mendefinisikan adalah bidang tipe BindableProperty baca-saja statis bernama AbsoluteLayout.LayoutBoundsProperty. Metode statis AbsoluteLayout.SetLayoutBounds diimplementasikan dengan memanggil SetValue anak dengan AbsoluteLayout.LayoutBoundsProperty. Anak berisi kamus tempat properti yang dapat diikat terpasang dan nilainya disimpan. Selama tata letak, dapat memperoleh nilai tersebut AbsoluteLayout dengan memanggil AbsoluteLayout.GetLayoutBounds, yang diimplementasikan dengan GetValue panggilan.
Ukuran dan posisi proporsional
AbsoluteLayout mengimplementasikan fitur ukuran dan posisi yang proporsional. Kelas mendefinisikan properti yang dapat diikat terpasang kedua, LayoutFlagsProperty, dengan metode AbsoluteLayout.SetLayoutFlags statis terkait dan AbsoluteLayout.GetLayoutFlags.
Argumen ke AbsoluteLayout.SetLayoutFlags dan nilai AbsoluteLayout.GetLayoutFlags pengembalian adalah nilai jenis AbsoluteLayoutFlags, enumerasi dengan anggota berikut:
None(sama dengan 0)XProportional(1)YProportional(2)PositionProportional(3)WidthProportional(4)HeightProportional(8)SizeProportional(12)All(\xFFFFFFFF)
Anda dapat menggabungkan ini dengan operator C# bitwise OR.
Dengan set bendera ini, properti tertentu dari Rectangle struktur batas tata letak yang digunakan untuk memosisikan dan mengukur anak ditafsirkan secara proporsional.
WidthProportional Ketika bendera diatur, Width nilai 1 berarti bahwa anak memiliki lebar yang sama dengan AbsoluteLayout. Pendekatan serupa digunakan untuk tinggi.
Posisi proporsional memperhitungkan ukurannya. XProportional Saat bendera diatur, X properti batas Rectangle tata letak proporsional. Nilai 0 berarti bahwa tepi kiri anak diposisikan di tepi AbsoluteLayoutkiri , tetapi posisi 1 berarti bahwa tepi kanan anak diposisikan di tepi AbsoluteLayoutkanan , tidak di luar tepi kanan seperti AbsoluteLayout yang Mungkin Anda harapkan. Properti X 0,5 berpusat pada anak secara horizontal di AbsoluteLayout.
Sampel ChessboardProportional menunjukkan penggunaan ukuran dan posisi proporsional.
Bekerja dengan koordinat proporsional
Terkadang, lebih mudah untuk memikirkan penempatan proporsional secara berbeda dari cara penerapannya di .AbsoluteLayout Anda mungkin lebih suka bekerja dengan koordinat proporsional di mana X properti 1 memposisikan tepi kiri anak (bukan tepi kanan) di tepi AbsoluteLayoutkanan .
Skema penempatan alternatif ini dapat disebut "koordinat anak pecahan." Anda dapat mengonversi dari koordinat anak pecahan ke batas tata letak yang diperlukan untuk AbsoluteLayout menggunakan rumus berikut:
layoutBounds.X = (fractionalChildCoordinate.X / (1 - layoutBounds.Width))
layoutBounds.Y = (fractionalChildCoordinate.Y / (1 - layoutBounds.Height))
Sampel ProportionalCoordinateCalc menunjukkan ini.
AbsoluteLayout dan XAML
Anda dapat menggunakan AbsoluteLayout di XAML dan mengatur properti yang dapat diikat terlampir pada turunan dari AbsoluteLayout menggunakan nilai AbsoluteLayout.LayoutBounds atribut dan AbsoluteLayout.LayoutFlags. Ini ditunjukkan dalam AbsoluteXamlDemo dan sampel ChessboardXaml. Program terakhir berisi 32 BoxView elemen tetapi menggunakan implisit Style yang mencakup AbsoluteLayout.LayoutFlags properti untuk menjaga markup tetap minimum.
Atribut di XAML yang terdiri dari nama kelas, titik, dan nama properti selalu merupakan properti yang dapat diikat terlampir.
Overlay
Anda dapat menggunakan AbsoluteLayout untuk membuat overlay, yang mencakup halaman dengan kontrol lain, mungkin untuk melindungi pengguna agar tidak berinteraksi dengan kontrol normal di halaman.
Sampel SimpleOverlay menunjukkan teknik ini, dan juga menunjukkan ProgressBar, yang menampilkan sejauh mana program telah menyelesaikan tugas.
Beberapa menyenangkan
Sampel DotMatrixClock menampilkan waktu saat ini dengan tampilan matriks titik 5x7 yang disimulasikan. Setiap titik berukuran BoxView (ada 228) dan diposisikan pada AbsoluteLayout.
Program BouncingText menganimasikan dua Label objek untuk memantul secara horizontal dan vertikal di seluruh layar.