Mengoptimalkan hierarki tata letak

Coba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tata letak 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 bertingkat LinearLayout dapat menyebabkan hierarki tampilan yang terlalu dalam. Selain itu, menumpuk beberapa instance LinearLayout yang menggunakan parameter layout_weight dapat menjadi sangat mahal, karena setiap turunan harus diukur dua kali. Hal ini sangat penting jika tata letak di-inflate berulang kali, seperti saat digunakan dalam RecyclerView.

Dokumen ini menunjukkan cara menggunakan Layout Inspector dan lint untuk memeriksa dan 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 lalu lintas di setiap blok mewakili performa Pengukuran, Tata Letak, dan Gambar, yang membantu Anda mengidentifikasi potensi masalah.

Misalnya, gambar 1 menunjukkan 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. Tata letak seperti ini, yang di-inflate beberapa kali harus dioptimalkan, karena manfaat performa akan berlipat ganda.

Gambar yang menampilkan satu item dalam daftar: satu gambar dan dua teks yang rata secara vertikal
Gambar 1. Tata letak konseptual untuk item dalam RecyclerView.

Layout Inspector menampilkan daftar perangkat yang tersedia dan komponennya yang 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.

Gambar yang menunjukkan Layout Inspector dan komposisi LinearLayout
Gambar 2. Hierarki tata letak untuk tata letak pada gambar 1, menggunakan instance LinearLayout bertingkat.

Merevisi tata letak

Karena performa tata letak sebelumnya melambat karena LinearLayout bertingkat, Anda 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 tata letak seperti itu. Jika 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 ini:

Gambar yang menunjukkan 3D Layout Inspector
Gambar 3. Mode 3D Layout Inspector.

Manfaatnya akan berlipat ganda, 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 satu contoh bagaimana setiap tata letak memiliki penggunaan yang sesuai. Pertimbangkan dengan cermat apakah perlu menggunakan bobot tata letak.

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

Menggunakan lint

Sebaiknya jalankan 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:

  • Menggunakan drawable compound. Anda dapat menangani LinearLayout yang berisi ImageView dan TextView secara lebih efisien sebagai drawable gabungan.
  • Menggabungkan frame root. Jika root tata letak adalah FrameLayout yang tidak menyediakan latar belakang atau padding, Anda dapat menggantinya dengan tag gabungan, yang sedikit lebih efisien.
  • Hapus daun yang tidak berguna. Anda dapat menghapus tata letak yang tidak memiliki turunan atau tanpa latar belakang—karena tidak terlihat—untuk hierarki tata letak yang lebih datar dan efisien.
  • Hapus orang tua 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.
  • Hindari tata letak yang dalam. Tata letak dengan terlalu banyak tingkatan akan buruk untuk performa. Pertimbangkan untuk menggunakan 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 dalam 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 Konfigurasi Pemeriksaan akan muncul bersama pemeriksaan yang didukung:

Gambar yang menampilkan menu Inspeksi Android Studio
Gambar 4. Halaman Konfigurasi Pemeriksaan.

Lint dapat otomatis memperbaiki beberapa masalah, memberikan saran untuk masalah lainnya, dan langsung menuju kode yang melanggar untuk ditinjau.

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