Mendebug tata letak dengan Layout Inspector

Layout Inspector di Android Studio memungkinkan Anda men-debug tata letak aplikasi dengan menampilkan hierarki tampilan tempat Anda dapat memeriksa properti setiap tampilan. Dengan Layout Inspector, Anda dapat membandingkan tata letak aplikasi dengan mockup desain, menampilkan tampilan aplikasi yang diperbesar atau 3D, dan memeriksa detail tata letaknya saat runtime. Hal ini sangat berguna jika tata letak Anda di-build saat runtime, bukan sepenuhnya dalam XML dan tata letak berperilaku secara tidak terduga.

Untuk mempelajari Layout Editor untuk View, lihat Pengantar Layout Editor.

Gambar 1. Layout Inspector tersemat untuk aplikasi Jetchat.

Memulai

Untuk memulai Layout Inspector, jalankan aplikasi Anda, buka jendela Running Devices, lalu klik Toggle Layout Inspector Tombol Layout Inspector tersemat. 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 dan memeriksa properti setiap tampilan, gunakan jendela alat Component Tree dan Attributes. Layout Inspector mungkin memerlukan mulai ulang aktivitas untuk mengakses atribut. Untuk informasi selengkapnya, lihat Menghindari mulai ulang aktivitas.
  • Untuk memilih tampilan dengan mengklik sekali langsung pada tampilan atau membuka kode dengan mengklik dua kali pada tampilan, aktifkan Toggle Deep Inspect Tombol aktifkan/nonaktifkan pemeriksaan mendalam.
  • Untuk berinteraksi dengan aplikasi, nonaktifkan Toggle Deep Inspect Tombol aktifkan/nonaktifkan pemeriksaan mendalam.
  • Untuk memeriksa perangkat fisik, aktifkan pencerminan perangkat.
  • Untuk mengaktifkan update langsung saat mengupdate UI aplikasi, pastikan Edit Live diaktifkan.
  • Untuk menggunakan mode 3D, ambil snapshot Layout Inspector Snapshot Layout Inspector, lalu klik 3D Mode Tombol 3D.

Memilih atau memisahkan tampilan

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

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

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

Jika mengerjakan tata letak yang rumit, Anda dapat memisahkan masing-masing tampilan sehingga hanya bagian tertentu dari tata letak yang diperlihatkan dalam Component Tree dan dirender dalam Layout Display. Untuk mengisolasi tampilan, ambil snapshot Snapshot Layout Inspector, klik kanan tampilan di Component Tree, lalu pilih Show Only Subtree atau Show Only Students. Untuk kembali ke tampilan penuh, klik kanan tampilan tersebut, lalu pilih Show All. Anda harus mengambil snapshot sebelum mengisolasi tampilan.

Menyembunyikan batas tata letak dan label tampilan

Untuk menyembunyikan kotak pembatas atau label tampilan elemen tata letak, klik View Options Tombol Opsi Tampilan 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 merujuknya nanti.

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

Muat snapshot Layout Inspector yang disimpan sebelumnya dengan mengklik Import Snapshot.

Mode 3D

Layout Display menampilkan visualisasi 3D yang canggih dari hierarki tampilan aplikasi Anda saat runtime. Untuk menggunakan fitur ini, ambil snapshot Ekspor/Impor Snapshot, klik tombol 3D Mode Tombol 3D di jendela Pemeriksa snapshot, dan putar dengan menarik mouse.

Layout Inspector: tampilan 3D
Gambar 2. Tampilan 3D dari Tata Letak.
Layout inspector: layer spacing view (tampilan jarak layar)
Gambar 3. Untuk memperluas atau menciutkan lapisan Layout, gunakan penggeser Layer Spacing.

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

Memeriksa Compose

Layout Inspector memungkinkan Anda memeriksa tata letak Compose di dalam aplikasi yang berjalan di emulator atau perangkat fisik. Anda dapat menggunakan Layout Inspector untuk memeriksa seberapa sering composable direkomposisi atau dilewati, yang dapat membantu mengidentifikasi masalah pada aplikasi. 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, mencegah perubahan UI Anda muncul di layar.

Pelajari Layout Inspector for Compose lebih lanjut

Menghindari mulai ulang aktivitas

Layout Inspector memerlukan salah satu setelan global berikut agar berfungsi dengan benar. Jika Anda tidak menentukan setelan global, Layout Inspector akan otomatis menyetelnya.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    Opsi ini menghasilkan informasi tambahan untuk pemeriksaan proses yang ditentukan.

  2. adb shell settings put global debug_view_attributes 1

    Opsi ini menghasilkan informasi tambahan untuk pemeriksaan pada semua proses di perangkat.

Mengubah setelan global dapat menyebabkan mulai ulang aktivitas. Untuk menghindari mulai ulang aktivitas, Anda dapat mengubah setelan di Android Studio atau mengubah Opsi Developer di setelan perangkat.

Untuk mengaktifkan refresh otomatis di Android Studio, buka Run/Debug Configurations dengan memilih Run > Edit Configurations dari menu. Kemudian, buka tab Miscellaneous dan centang kotak Connect to Layout Inspector without restarting activity di bagian Layout Inspector Options.

Opsi mulai ulang aktivitas dalam konfigurasi Run
Gambar 4. Aktifkan refresh otomatis dari dialog Run/Debug Configurations.

Atau, aktifkan opsi developer perangkat Anda, lalu aktifkan Enable view attribute inspection dari setelan developer perangkat.

Layout Inspector Mandiri

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

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