Membuat Profil Tata Letak dengan Hierarchy Viewer

Hierarchy Viewer tidak digunakan lagi. Jika menggunakan Android Studio 3.1 atau yang lebih baru, Anda harus menggunakan Layout Inspector untuk memeriksa hierarki tampilan aplikasi saat runtime. Untuk memprofilkan kecepatan rendering tata letak aplikasi Anda, gunakan Window.OnFrameMetricsAvailableListener seperti yang dijelaskan dalam postingan blog ini.

Hierarchy Viewer adalah alat yang terdapat pada Android Device Monitor yang memungkinkan Anda mengukur kecepatan tata letak untuk setiap tampilan dalam hierarki tata letak. Alat ini dapat membantu Anda menemukan bottleneck performa yang disebabkan oleh struktur hierarki tampilan.

Catatan: Hierarchy Viewer tidak lagi dikembangkan. Untuk memeriksa properti pada hierarki tampilan Anda saat runtime, sebaiknya gunakan Layout Inspector di Android Studio. Namun, saat ini Layout Inspector tidak memberikan detail pembuatan profil terkait performa tata letak.

Halaman ini menyediakan pengantar Hierarchy Viewer dan panduan pembuatan profil tata letak.

Memulai persiapan

Jika menggunakan Android Emulator, Anda dapat melewati bagian ini. Jika tidak, Anda perlu menyiapkan perangkat seperti berikut.

Catatan: Perangkat Anda harus menjalankan Android 4.1 atau yang lebih baru.

1. Aktifkan Opsi Developer di perangkat.
2. Setel ANDROID_HVPROTO=ddm variabel lingkungan di mesin pengembangan Anda.

   Variabel ini memberi tahu Hierarchy Viewer untuk terhubung ke perangkat menggunakan protokol ddm, yang sama dengan protokol DDMS. Satu hal yang perlu diwaspadai adalah hanya ada satu proses pada host yang dapat terhubung ke perangkat, jadi Anda harus menghentikan sesi DDMS lainnya untuk menjalankan Hierarchy Viewer.

Memulai Hierarchy Viewer

1. Hubungkan perangkat Anda ke komputer. Jika muncul dialog pertanyaan berikut di perangkat, Allow USB debugging?, ketuk OK.
2. Buka project Anda di Android Studio, lalu buat dan jalankan project tersebut di perangkat.
3. Mulai Android Device Monitor. Android Studio mungkin menampilkan dialog Disable adb integration karena hanya satu proses yang dapat terhubung ke perangkat melalui adb pada satu waktu, dan Android Device Monitor akan meminta koneksi. Jadi, klik Yes.

   Gambar 1 mengilustrasikan hal yang pertama muncul di Android Device Monitor.

4. Pada panel menu, pilih Window > Open Perspective, lalu klik Hierarchy View.

   Anda akan melihat pengaturan mirip dengan yang ditunjukkan pada gambar 2. Jika tidak, pilih Window > Reset Perspective untuk menampilkan tata letak default.

5. Klik dua kali nama paket aplikasi Anda pada tab Windows di sebelah kiri. Tindakan ini akan mengisi panel dengan hierarki tampilan aplikasi Anda.

Mengenal berbagai alat lebih jauh

Hierarchy Viewer menyediakan panel berikut (seperti yang ditunjukkan pada gambar 2):

• Tree View (tengah): Menampilkan tampilan hierarki dari hierarki tampilan Anda. Anda dapat menarik dan memperbesar/memperkecil hierarki menggunakan mouse dan kontrol zoom di bagian bawah. Setiap node menunjukkan nama ID dan nama class View.
• Tree Overview (kanan atas): Memberi Anda pandangan menyeluruh tentang hierarki tampilan lengkap aplikasi Anda. Pindahkan kotak abu-abu untuk mengubah area tampilan yang terlihat di Tree View.
• Layout View (kanan bawah): Menampilkan tampilan wireframe dari tata letak Anda. Garis batas tampilan yang dipilih saat ini berwarna merah, dan tampilan induknya berwarna merah terang.

  Mengklik tampilan di sini juga akan memilihnya pada Tree View, dan sebaliknya.

Hierarki tampilan adalah snapshot tata letak, sehingga tidak otomatis diperbarui. Untuk mengupdate tampilan hierarki, klik Reload the view hierarchy .

Untuk membatalkan tampilan (meminta sistem memanggil onDraw() selama update tata letak berikutnya), pilih salah satu tampilan dalam hierarki, lalu klik Invalidate the layout (cara ini sama dengan memanggil invalidate() pada tampilan). Untuk meminta tampilan (dan turunan mana pun) yang benar-benar menata tampilan, klik Request lay out .

Jika membuka aplikasi berbeda, Anda harus memilih aplikasi tersebut dari tab Windows di panel kiri untuk melihat hierarki tampilannya.

Untuk melihat detail tampilan, termasuk ukuran, tata letak, dan waktu menggambarnya (seperti yang ditunjukkan di gambar 3), klik tampilan pada Tree View. Klik dua kali pada tampilan tersebut untuk melihat gambar yang diperbesar.

Gambar 3. Bagian display node tampilan.

Untuk melihat properti tampilan, klik tab View Properties pada panel kiri, seperti yang ditunjukkan pada gambar 4.

Gambar 4. Lokasi tab View Properties.

Untuk menyimpan screenshot berlapis dari tata letak Anda ke file Adobe Photoshop (PSD), klik Capture the window layers di toolbar. Setiap tampilan disimpan sebagai lapisannya sendiri sehingga Anda dapat dengan mudah membuat tiruan baru dengan menyembunyikan dan menyesuaikan setiap tampilan.

Membuat profil tata letak

Setelah memahami alat tersebut, Anda dapat menggunakannya untuk membuat profil pada hierarki tampilan dan menafsirkan hasilnya.

1. Pada Tree View atau Layout View, klik node tampilan yang turunannya ingin Anda buatkan profil.
2. Untuk memulai pembuatan profil, klik Getting layout times di bagian atas Tree View.

   Untuk hierarki tampilan besar, pembuatan profil mungkin perlu waktu beberapa detik.

Setiap tampilan turunan dari node yang Anda pilih akan memiliki tiga titik, yang bisa berupa warna hijau, kuning, atau merah.

• Titik kiri merepresentasikan proses menggambar dari pipeline rendering.
• Titik tengah merepresentasikan fase menata tampilan.
• Titik kanan merepresentasikan fase menjalankan.

Titik-titik tersebut kurang lebih berkaitan dengan fase mengukur, menata tampilan, dan menggambar dalam pipeline pemrosesan. Warna titik menunjukkan performa relatif node ini sehubungan dengan semua node lain yang dibuatkan profil pada grup lokal.

• Hijau berarti tampilan merender lebih cepat dari setidaknya setengah tampilan lain.
• Kuning berarti tampilan merender lebih cepat dari setengah bagian bawah tampilan lain.
• Merah berarti tampilan berada di separuh tampilan paling lambat.

Menafsirkan hasil

Hierarchy Viewer mengukur performa setiap node relatif terhadap tampilan yang setara, sehingga selalu ada node merah pada profil—kecuali semua tampilan berperforma identik—dan tidak selalu berarti bahwa yang merah berperforma buruk (hanya saja node tersebut yang paling lambat dalam kelompok tampilan lokal).

Hierarchy Viewer me-raster tata letak Anda untuk memperoleh informasi pengaturan waktu. Proses raster adalah proses pengambilan dasar tingkat tinggi, seperti lingkaran atau font vektor, dan mengubahnya menjadi piksel pada layar. Biasanya, proses raster dilakukan oleh GPU pada perangkat, tetapi dalam kasus proses raster software, rendering dilakukan pada CPU dengan software biasa. Ini berarti bahwa pengaturan waktu mutlak yang dilaporkan relatif benar satu sama lain, tetapi membengkak dan bervariasi bergantung pada beban kerja CPU keseluruhan dan yang berubah pada perangkat, serta mesin pengembangan Anda. Jadi, laporan tersebut tidak mencerminkan kecepatan performa real-time pada perangkat dan Anda harus membuat profil beberapa kali untuk mengetahui pengukuran rata-ratanya.

Node merah adalah potensi masalah segala situasi ketika performa aplikasi Anda menjadi lambat secara tidak terduga. Pada setelan relatif, selalu ada node paling lambat; cukup pastikan node tersebut adalah yang Anda harapkan. Contoh berikut mengilustrasikan cara menafsirkan titik merah.

• Cari titik-titik merah di node daun atau kelompok tampilan yang hanya memiliki beberapa turunan. Hal ini mungkin dapat menyebabkan masalah. Aplikasi mungkin tidak menjadi lambat, atau mungkin tidak lambat di perangkat, tetapi Anda harus mengetahui penyebab titik tersebut berwarna merah. Systrace atau Traceview dapat memberikan informasi tambahan.
• Jika Anda memiliki kelompok tampilan dengan banyak turunan dan fase mengukur berwarna merah, perhatikan turunan tersebut untuk melihat performanya.
• Tampilan dengan titik-titik kuning atau bahkan merah mungkin tidak berperforma lambat di perangkat. Di situlah angka aktual sangat membantu. Systrace atau Traceview dapat memberikan informasi tambahan.
• Jika tampilan root hierarki memiliki fase mengukur berwarna merah, fase menata tampilan berwarna merah, dan fase menggambar berwarna kuning, hal ini wajar karena tampilan tersebut merupakan induk dari semua tampilan lain dan tata letaknya belum selesai hingga semua turunan selesai.
• Jika node daun pada hierarki dengan 20 lebih tampilan memiliki fase menggambar berwarna merah, maka itu memang sebuah masalah. Periksa metode onDraw() Anda untuk kode yang seharusnya tidak boleh ada.

Untuk tips tata letak selengkapnya, lihat Meningkatkan Performa Tata Letak.