Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Men-debug tata letak dengan Layout Inspector dan Layout Validation

Layout Inspector di Android Studio memungkinkan Anda membandingkan tata letak aplikasi dengan tiruan desain, menampilkan tampilan aplikasi yang diperbesar atau dalam format 3D, dan memeriksa detail tata letaknya saat runtime. Alat ini sangat berguna jika tata letak Anda dibuat saat runtime, tidak sepenuhnya dalam XML dan tata letak berperilaku secara tidak terduga.

Layout Validation memungkinkan Anda melihat pratinjau tata letak di berbagai perangkat dan konfigurasi tampilan secara bersamaan, termasuk ukuran font variabel atau bahasa pengguna, sehingga memudahkan pengujian berbagai masalah tata letak umum.

Membuka Layout Inspector

Untuk membuka Layout Inspector, lakukan langkah berikut:

  1. Jalankan aplikasi Anda pada emulator atau perangkat yang terhubung.
  2. Klik Tool > Layout Inspector.

Seperti dalam gambar 1, Layout Inspector menampilkan hal berikut:

  1. Component Tree: Hierarki tampilan dalam tata letak.
  2. Layout Display: Rendering tata letak aplikasi seperti yang muncul di perangkat atau emulator, dengan batas tata letak ditampilkan untuk setiap tampilan.
  3. Toolbar Layout Inspector: Berbagai pilihan alat untuk Layout Inspector.
  4. Attributes: Atribut tata letak untuk tampilan yang dipilih.

Screenshot Layout Inspector dengan label menunjukkan Component Tree, toolbar Layout Inspector, Layout Display, dan Attributes

Gambar 1. Layout Inspector

Memilih tampilan

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 menyertakan tampilan tumpang tindih, Anda dapat memilih tampilan di urutan belakang dengan mengkliknya di Component Tree, atau dengan memutar tata letak dan mengklik tampilan yang diinginkan.

Memisahkan tampilan

Jika mengerjakan tata letak yang rumit, Anda dapat memisahkan masing-masing tampilan sehingga hanya subset tata letak yang diperlihatkan dalam Component Tree dan dirender dalam Layout Display.

Untuk memisahkan tampilan, klik kanan tampilan di Component Tree dan pilih Show Only Subtree atau Show Only Parents.

Untuk kembali ke tampilan penuh, klik kanan tampilan, lalu pilih Show All.

Menyembunyikan batas tata letak dan label tampilan

Untuk menyembunyikan kotak pembatas atau label tampilan elemen tata letak, klik View Options Ikon opsi tampilan Live Layout Inspector di bagian atas Layout Display, lalu ganti ke Show Borders atau Show View Label.

Membandingkan tata letak aplikasi dengan overlay gambar 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, klik Load Overlay di bagian atas Layout Inspector. Overlay diskalakan agar menyesuaikan tata letak.
  • Untuk menyesuaikan transparansi overlay, gunakan penggeser Overlay Alpha.
  • Untuk menghapus overlay, klik Clear Overlay .

Live Layout Inspector

Live Layout Inspector memberikan insight real-time lengkap ke UI aplikasi saat di-deploy ke perangkat atau emulator yang menjalankan API level 29 atau lebih tinggi.

Untuk mengaktifkan Live Layout Inspector, buka File > Settings > Experimental, and centang kotak di sampingEnable Live Layout Inspector. Lalu klik kotak centang di samping Live update di atas Layout Display.

Live Layout Inspector menyertakan hierarki tata letak dinamis, sehingga Component Tree, dan Layout Display juga akan diperbarui jika perangkat berubah.

Selain itu, Anda dapat mencari sumber nilai properti resource dalam kode sumber melalui tumpukan resolusi nilai properti dan membuka lokasinya dengan mengikuti hyperlink di panel properti.

Tumpukan resolusi nilai properti

Gambar 2. Nilai properti di panel Atribut dengan hyperlink ke definisi properti.

Terakhir, Layout Display menampilkan visualisasi 3D yang canggih dari hierarki tampilan aplikasi Anda saat runtime. Untuk menggunakan alat ini, di jendela Live Layout Inspector cukup klik Layout dan putar dengan menyeret mouse. Untuk meluaskan atau menciutkan lapisan Layout, gunakan penggeser Layer Spacing.

Layout inspector: tampilan 3D

Gambar 3. Tampilan 3D dari Tata Letak yang diputar.

Layout Validation

Layout Validation adalah alat visual untuk melihat pratinjau tata letak secara serentak di berbagai perangkat dan konfigurasi tampilan, sehingga Anda dapat mendeteksi masalah tata letak lebih awal. Untuk mengakses alat ini, klik tab Layout Validation di pojok kanan atas jendela IDE:

Screenshot tab Layout Validation di Android Studio IDE

Untuk mengganti-ganti konfigurasi yang tersedia, pilih salah satu dari menu drop-down di bagian atas jendela Layout Validation:

  • Perangkat Pixel
  • Kustom
  • Buta Warna
  • Ukuran Font


Screenshot menu drop-down pada alat Layout Validation

Perangkat Pixel

Melihat pratinjau tampilan tata letak Anda di perangkat Pixel:

Screenshot pratinjau tata letak untuk berbagai perangkat Pixel

Gambar 4. Pratinjau perangkat Pixel di alat Layout Validation

Kustom

Untuk menyesuaikan konfigurasi tampilan sebelum pratinjau, pilih berbagai setelan yang ada seperti bahasa, perangkat, atau orientasi layar:

Animasi menunjukkan cara menyesuaikan tampilan perangkat pada alat Layout Validation

Gambar 5. Mengonfigurasi tampilan kustom pada alat Layout Validation

Buta Warna

Agar aplikasi Anda mudah diakses pengguna buta warna, validasikan tata letak Anda dengan melakukan simulasi untuk jenis buta warna umum:

Screenshot pratinjau simulasi untuk berbagai jenis buta warna

Gambar 6. Pratinjau simulasi buta warna pada alat Layout Validation

Ukuran Font

Validasi tata letak di berbagai ukuran font dan mudahkan akses pengguna yang menderita gangguan penglihatan dengan mengujinya menggunakan font berukuran besar.

Lihat pratinjau tata letak aplikasi di berbagai ukuran front, dan periksa jika itu mengakibatkan kesalahan tata letak.

Gambar 7. Pratinjau ukuran font variabel pada alat Layout Validation