Mengoptimalkan hierarki tata letak

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara bekerja dengan tata letak di Compose.

Layout Inspector di Compose →

Menggunakan struktur tata letak dasar untuk mendapatkan tata letak yang paling efisien adalah suatu kesalahpahaman umum. Namun, setiap widget dan tata letak yang Anda tambahkan ke aplikasi memerlukan inisialisasi, tata letak, dan gambar. Misalnya, menggunakan instance LinearLayout bertingkat dapat menghasilkan hierarki tampilan yang terlalu dalam. Selain itu, menumpuk beberapa instance LinearLayout yang menggunakan parameter layout_weight dapat menjadi operasi yang berat karena setiap turunan harus diukur dua kali. Hal ini terutama penting jika tata letak diperluas berulang kali, seperti saat digunakan dalam RecyclerView.

Dokumen ini menunjukkan cara menggunakan Layout Inspector dan lint untuk memeriksa serta mengoptimalkan tata letak.

Memeriksa tata letak

Android SDK Tools menyertakan alat Layout Inspector, yang memungkinkan Anda menganalisis tata letak saat aplikasi berjalan. Menggunakan alat ini akan membantu Anda menemukan inefisiensi dalam performa tata letak.

Layout Inspector memungkinkan Anda memilih proses yang sedang berjalan pada perangkat atau emulator yang terhubung, lalu menampilkan hierarki tata letak. Lampu traffic di setiap blok merepresentasikan performa Pengukuran, Tata Letak, dan Gambar, yang membantu Anda mengidentifikasi potensi masalah.

Misalnya, gambar 1 menampilkan tata letak yang digunakan sebagai item dalam RecyclerView. Tata letak ini menampilkan gambar bitmap kecil di sebelah kiri dan dua item teks yang ditumpuk di sebelah kanan. Penting sekali bagi tata letak seperti ini yang diperluas beberapa kali untuk dioptimalkan karena manfaat performanya akan dilipatgandakan.

Layout Inspector menampilkan daftar perangkat yang tersedia dan komponennya yang sedang berjalan. Pilih komponen dari tab Windows, lalu klik Layout Inspector untuk melihat hierarki tata letak komponen yang dipilih. Misalnya, gambar 2 menunjukkan tata letak untuk item daftar yang diilustrasikan oleh gambar 1.

Merevisi tata letak

Karena performa tata letak sebelumnya melambat yang dikarenakan LinearLayout bertingkat, Anda mungkin dapat meningkatkan performa dengan meratakan tata letak—dengan kata lain, membuat tata letak menjadi dangkal dan lebar, bukan sempit dan dalam. ConstraintLayout sebagai node root memungkinkan untuk tata letak seperti itu. Saat Anda mengonversi desain ini untuk menggunakan ConstraintLayout, tata letak akan menjadi hierarki dua tingkat:

    <androidx.constraintlayout.widget.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/root"
      android:layout_width="match_parent"
      android:layout_height="52dp"
      android:background="#e4e6e4"
      android:padding="4dp">

      <ImageView
          android:id="@+id/image"
          android:layout_width="48dp"
          android:layout_height="48dp"
          android:background="#5c5c74"
          android:contentDescription="An example box"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/title"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_marginStart="4dp"
          android:background="#745c74"
          app:layout_constraintBottom_toTopOf="@+id/subtitle"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@id/image"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/subtitle"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="#7e8d6e"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="@id/title"
          app:layout_constraintTop_toBottomOf="@+id/title" />
  </androidx.constraintlayout.widget.ConstraintLayout>
    

Pemeriksaan tata letak baru terlihat seperti berikut:

Manfaatnya akan dilipatgandakan karena tata letak ini digunakan untuk setiap item dalam daftar.

Sebagian besar perbedaannya adalah karena penggunaan layout_weight dalam desain LinearLayout, yang dapat memperlambat pengukuran. Ini adalah salah satu contoh bagaimana setiap tata letak memiliki penggunaan yang sesuai. Pertimbangkan dengan cermat apakah perlu menggunakan bobot tata letak.

Dalam beberapa tata letak yang rumit, sistem mungkin menyia-nyiakan upaya untuk mengukur elemen UI yang sama lebih dari sekali. Fenomena ini disebut taksasi ganda. Untuk mengetahui informasi selengkapnya tentang taksasi ganda dan cara mencegahnya, lihat Performa dan hierarki tampilan.

Menggunakan lint

Sebaiknya Anda menjalankan alat lint pada file tata letak untuk menelusuri kemungkinan pengoptimalan hierarki tampilan. Lint menggantikan alat layoutopt dan memiliki fungsionalitas yang lebih baik. Berikut adalah contoh aturan lint rules:

• Menggunakan drawable gabungan. Anda dapat menangani LinearLayout yang berisi ImageView dan TextView dengan lebih efisien sebagai drawable gabungan.
• Menggabungkan frame root. Jika root tata letak adalah FrameLayout yang tidak memberikan latar belakang atau padding, Anda dapat menggantinya dengan tag penggabungan, yang sedikit lebih efisien.
• Menghapus leaf yang tidak berguna. Anda dapat menghapus tata letak yang tidak memiliki turunan atau latar belakang—karena tidak terlihat—untuk hierarki tata letak yang lebih datar dan efisien.
• Menghapus induk yang tidak berguna. Anda dapat menghapus tata letak dengan turunan yang tidak memiliki elemen seinduk, bukan ScrollView atau tata letak root, dan tidak memiliki latar belakang. Anda juga dapat memindahkan tampilan turunan langsung ke induk untuk hierarki tata letak yang lebih datar dan efisien hierarki tata letak.
• Menghindari tata letak dalam. Tata letak dengan tingkat yang terlalu banyak akan berakibat buruk bagi performa. Sebaiknya gunakan tata letak yang lebih datar, seperti ConstraintLayout, untuk meningkatkan performa. Kedalaman maksimum default untuk pemeriksaan lint adalah 10.

Manfaat lain dari alat lint adalah integrasinya ke Android Studio. Lint otomatis berjalan setiap kali Anda mengompilasi program. Dengan Android Studio, Anda juga dapat menjalankan pemeriksaan lint untuk varian build tertentu atau untuk semua varian build.

Anda juga dapat mengelola profil pemeriksaan dan mengonfigurasi pemeriksaan dalam Android Studio dengan opsi File > Settings > Project Settings. Halaman Inspection Configuration akan muncul bersama pemeriksaan yang didukung:

Lint memiliki kemampuan untuk otomatis memperbaiki beberapa masalah, memberikan saran untuk yang lain, dan langsung menuju ke kode yang melanggar untuk ditinjau.

Untuk mengetahui informasi selengkapnya, lihat Tata Letak dan Resource tata letak.