Mendebug tata letak dengan Layout Inspector

Layout Inspector di Android Studio memungkinkan Anda memeriksa dan men-debug tata letak di dalam aplikasi yang berjalan di emulator atau perangkat fisik. Anda dapat memeriksa atribut setiap komponen, membandingkan tata letak aplikasi dengan tiruan desain, dan menampilkan tampilan aplikasi yang diperbesar.

Anda juga dapat menggunakan Layout Inspector untuk memeriksa seberapa sering composable direkomposisi atau dilewati, yang dapat membantu mengidentifikasi masalah pada aplikasi Anda. Misalnya, beberapa error coding dapat memaksa UI Anda merekomposisi secara berlebihan, yang dapat menyebabkan performa yang buruk. Beberapa error coding dapat mencegah rekomposisi UI Anda dan, oleh karena itu, dapat mencegah perubahan UI Anda muncul di layar.

Untuk mengetahui informasi selengkapnya, lihat Mendebug UI Compose Anda.

Gambar 1. Embedded Layout Inspector untuk aplikasi Jetchat.

Mulai

Untuk memulai Layout Inspector, jalankan aplikasi Anda, buka jendela Running Devices, lalu klik Toggle Layout Inspector Tombol embedded layout inspector. Jika Anda beralih di antara beberapa perangkat atau project, Layout Inspector akan otomatis terhubung ke proses yang dapat di-debug dan berjalan di latar depan perangkat yang terhubung.

Berikut cara melakukan beberapa tugas umum:

  • Untuk melihat hierarki tampilan dan memeriksa atribut setiap komponen, gunakan jendela alat Component Tree dan Attributes. Layout Inspector mungkin memerlukan mulai ulang aktivitas untuk mengakses atribut.
  • Untuk memilih komponen, aktifkan terlebih dahulu Toggle Deep Inspect Tombol alihkan pemeriksaan mendalam, lalu klik komponen. Atau, buka kode Anda dengan mengklik dua kali komponen.
  • Untuk berinteraksi dengan aplikasi, nonaktifkan Aktifkan Pemeriksaan Mendalam Tombol alihkan pemeriksaan mendalam.
  • Untuk memeriksa perangkat fisik, aktifkan pencerminan perangkat.
  • Untuk mengaktifkan update langsung saat Anda memperbarui UI aplikasi, pastikan Edit Live diaktifkan.

Memilih atau memisahkan komponen

Komponen biasanya menggambar sesuatu yang terlihat, dan pengguna dapat berinteraksi dengannya. Component Tree menampilkan hierarki aplikasi secara real time dengan setiap komponen composable, yang membantu Anda men-debug tata letak aplikasi karena dapat memvisualisasikan elemen dalam aplikasi dan nilai yang terkait dengannya.

Untuk memilih komponen, klik komponen di Component Tree atau Layout Display. Semua atribut tata letak untuk komponen yang dipilih akan muncul di panel Attributes.

Jika tata letak menyertakan komponen yang tumpang-tindih, Anda dapat melihat semua komponen di suatu area saat Anda mengklik kanan dalam mode Deep Inspect Tombol aktifkan/nonaktifkan pemeriksaan mendalam. Untuk memilih komponen yang tidak berada di depan, klik komponen tersebut di Component Tree.

Jika mengerjakan tata letak yang rumit, Anda dapat memisahkan masing-masing komponen sehingga hanya bagian tertentu dari tata letak yang diperlihatkan dalam Component Tree dan dirender dalam Layout Display. Untuk memisahkan komponen, klik kanan komponen di Component Tree, lalu pilih Show Only Subtree atau Show Only Parents. Untuk kembali ke tampilan lengkap, klik kanan komponen, lalu pilih Show All.

Menyembunyikan batas tata letak dan label tampilan

Untuk menyembunyikan kotak pembatas atau label komponen elemen tata letak, klik View Options Tombol Lihat Opsi di bagian atas Layout Display, lalu ganti ke Show Borders atau Show View Label.

Mengambil snapshot hierarki tata letak

Layout Inspector memungkinkan Anda menyimpan snapshot hierarki tata letak aplikasi yang sedang berjalan, sehingga Anda dapat membagikannya kepada orang lain atau menunjukkannya nanti.

Snapshot merekam data yang biasanya akan Anda lihat saat menggunakan Layout Inspector, termasuk rendering mendetail dari tata letak, hierarki komponen tata letak Compose, View, atau hybrid, serta atribut mendetail untuk setiap komponen UI Anda. Untuk menyimpan snapshot, klik Snapshot Export/Import Snapshot Ekspor/Impor, lalu Export Snapshot.

Untuk memuat snapshot Layout Inspector yang disimpan sebelumnya, klik Import Snapshot.

Membandingkan tata letak aplikasi dengan gambar overlay referensi

Untuk membandingkan tata letak aplikasi Anda dengan gambar referensi, seperti tiruan UI, Anda dapat memuat gambar overlay bitmap di Layout Inspector.

  • Untuk memuat overlay, pilih opsi Load Overlay dari toolbar Layout Inspector. Overlay diskalakan agar sesuai dengan tata letak.
  • Untuk menyesuaikan transparansi overlay, gunakan penggeser Overlay Alpha.
  • Untuk menghapus overlay, klik Clear Overlay.

Layout Inspector Mandiri

Untuk performa yang optimal, sebaiknya gunakan Layout Inspector dalam mode sematan defaultnya. Jika Anda ingin membatalkan penyematan Layout Inspector, buka File (Android Studio di macOS) > Settings > Tools > Layout Inspector lalu hapus centang pada kotak Enable embedded Layout Inspector.

Dalam mode mandiri, aktifkan update langsung dengan mengklik opsi Live Updates dari toolbar Layout Inspector.

Referensi lainnya

Melihat konten