Pemadatan Tata Letak
Pemadatan tata letak menghapus tata letak tertentu dari pohon visual dalam upaya untuk meningkatkan performa penyajian halaman. Artikel ini menjelaskan cara mengaktifkan pemadatan tata letak dan manfaat yang dapat dibawanya.
Gambaran Umum
Xamarin.Forms melakukan tata letak menggunakan dua rangkaian panggilan metode rekursif:
- Tata letak dimulai di bagian atas pohon visual dengan halaman, dan berlanjut melalui semua cabang pohon visual untuk mencakup setiap elemen visual pada halaman. Elemen yang merupakan orang tua untuk elemen lain bertanggung jawab untuk mengukur dan memposisikan anak-anak mereka relatif terhadap diri mereka sendiri.
- Pembatalan adalah proses di mana perubahan elemen pada halaman memicu siklus tata letak baru. Elemen dianggap tidak valid ketika tidak lagi memiliki ukuran atau posisi yang benar. Setiap elemen di pohon visual yang memiliki anak diperingatkan setiap kali salah satu anaknya berubah ukuran. Oleh karena itu, perubahan ukuran elemen di pohon visual dapat menyebabkan perubahan yang merobek pohon.
Untuk informasi selengkapnya tentang cara Xamarin.Forms melakukan tata letak, lihat Membuat Tata Letak Kustom.
Hasil dari proses tata letak adalah hierarki kontrol asli. Namun, hierarki ini mencakup perender kontainer dan pembungkus tambahan untuk perender platform, semakin meningkatkan hierarki tampilan bersarang. Semakin dalam tingkat bersarang, semakin besar jumlah pekerjaan yang Xamarin.Forms harus dilakukan untuk menampilkan halaman. Untuk tata letak kompleks, hierarki tampilan bisa dalam dan luas, dengan beberapa tingkat bersarang.
Misalnya, pertimbangkan tombol berikut dari aplikasi sampel untuk masuk ke Facebook:
Tombol ini ditentukan sebagai kontrol kustom dengan hierarki tampilan XAML berikut:
<ContentView ...>
<StackLayout>
<StackLayout ...>
<AbsoluteLayout ...>
<Button ... />
<Image ... />
<Image ... />
<BoxView ... />
<Label ... />
<Button ... />
</AbsoluteLayout>
</StackLayout>
<Label ... />
</StackLayout>
</ContentView>
Hierarki tampilan berlapis yang dihasilkan dapat diperiksa dengan Live Visual Tree. Di Android, hierarki tampilan berlapis berisi 17 tampilan:
Kompresi tata letak, yang tersedia untuk Xamarin.Forms aplikasi di platform iOS dan Android, bertujuan untuk meratakan tampilan bersarang dengan menghapus tata letak tertentu dari pohon visual, yang dapat meningkatkan performa penyajian halaman. Keuntungan performa yang dikirimkan bervariasi tergantung pada kompleksitas halaman, versi sistem operasi yang digunakan, dan perangkat tempat aplikasi berjalan. Namun, perolehan performa terbesar akan terlihat pada perangkat yang lebih lama.
Catatan
Meskipun artikel ini berfokus pada hasil penerapan kompresi tata letak di Android, artikel ini sama-sama berlaku untuk iOS.
Pemadatan Tata Letak
Di XAML, pemadatan tata letak dapat diaktifkan dengan mengatur CompressedLayout.IsHeadless properti terlampir ke true pada kelas tata letak:
<StackLayout CompressedLayout.IsHeadless="true">
...
</StackLayout>
Atau, ini dapat diaktifkan di C# dengan menentukan instans tata letak sebagai argumen pertama untuk CompressedLayout.SetIsHeadless metode :
CompressedLayout.SetIsHeadless(stackLayout, true);
Penting
Karena pemadatan tata letak menghapus tata letak dari pohon visual, tata letak tidak cocok untuk tata letak yang memiliki tampilan visual, atau yang mendapatkan input sentuhan. Oleh karena itu, tata letak yang mengatur VisualElement properti (seperti BackgroundColor, , IsVisibleRotation, Scale, TranslationX dan TranslationY atau yang menerima gerakan, bukan kandidat untuk pemadatan tata letak. Namun, mengaktifkan pemadatan tata letak pada tata letak yang mengatur properti tampilan visual, atau yang menerima gerakan, tidak akan mengakibatkan kesalahan build atau runtime. Sebaliknya, kompresi tata letak akan diterapkan dan properti tampilan visual, dan pengenalan gerakan, akan gagal secara diam-diam.
Untuk tombol Facebook, kompresi tata letak dapat diaktifkan pada tiga kelas tata letak:
<StackLayout CompressedLayout.IsHeadless="true">
<StackLayout CompressedLayout.IsHeadless="true" ...>
<AbsoluteLayout CompressedLayout.IsHeadless="true" ...>
...
</AbsoluteLayout>
</StackLayout>
...
</StackLayout>
Di Android, ini menghasilkan hierarki tampilan berlapis dari 14 tampilan:
Dibandingkan dengan hierarki tampilan berlapis asli dari 17 tampilan, ini menunjukkan pengurangan jumlah tampilan 17%. Meskipun pengurangan ini mungkin tampak tidak signifikan, pengurangan tampilan di seluruh halaman bisa lebih signifikan.
Perender Cepat
Perender cepat mengurangi inflasi dan biaya Xamarin.Forms rendering kontrol pada Android dengan meratakan hierarki tampilan asli yang dihasilkan. Ini semakin meningkatkan performa dengan membuat lebih sedikit objek, yang pada gilirannya menghasilkan pohon visual yang kurang kompleks dan penggunaan memori yang lebih sedikit. Untuk informasi selengkapnya tentang perender cepat, lihat Perender Cepat.
Untuk tombol Facebook dalam aplikasi sampel, menggabungkan kompresi tata letak dan perender cepat menghasilkan hierarki tampilan berlapis dari 8 tampilan:
Dibandingkan dengan hierarki tampilan berlapis asli dari 17 tampilan, ini mewakili pengurangan 52%.
Aplikasi sampel berisi halaman yang diekstrak dari aplikasi nyata. Tanpa kompresi tata letak dan perender cepat, halaman menghasilkan hierarki tampilan berlapis dari 130 tampilan di Android. Mengaktifkan perender cepat dan pemadatan tata letak pada kelas tata letak yang sesuai mengurangi hierarki tampilan berlapis menjadi 70 tampilan, pengurangan 46%.
Ringkasan
Pemadatan tata letak menghapus tata letak tertentu dari pohon visual dalam upaya untuk meningkatkan performa penyajian halaman. Manfaat performa yang diberikan ini bervariasi tergantung pada kompleksitas halaman, versi sistem operasi yang digunakan, dan perangkat tempat aplikasi berjalan. Namun, perolehan performa terbesar akan terlihat pada perangkat yang lebih lama.