Düzen hiyerarşilerini optimize etme

Compose yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da düzenlerle nasıl çalışacağınızı öğrenin.

Temel düzen yapılarını kullanmanın en verimli düzenleri oluşturduğu yaygın bir yanılgıdır. Ancak uygulamanıza eklediğiniz her widget ve düzenin başlatılması, düzenlenmesi ve çizilmesi gerekir. Örneğin, iç içe yerleştirilmiş LinearLayout örneklerinin kullanılması aşırı derin bir görünüm hiyerarşisine yol açabilir. Ayrıca, layout_weight parametresini kullanan birkaç LinearLayout örneğini iç içe yerleştirmek özellikle maliyetli olabilir. Bunun nedeni, her alt öğenin iki kez ölçülmesi gerekmesidir. Bu durum, özellikle düzenin tekrar tekrar şişirildiği durumlarda (ör. RecyclerView içinde kullanıldığında) önemlidir.

Bu belgede, düzeninizi incelemek ve optimize etmek için Layout Inspector ve lint'in nasıl kullanılacağı gösterilmektedir.

Düzeninizi inceleme

Android SDK araçları, uygulamanız çalışırken düzeninizi analiz etmenizi sağlayan Layout Inspector aracını içerir. Bu aracı kullanarak düzen performansındaki verimsizlikleri keşfedebilirsiniz.

Düzen inceleyici, bağlı bir cihazda veya emülatörde çalışan işlemleri seçmenize ve ardından düzen ağacını görüntülemenize olanak tanır. Her bloktaki trafik ışıkları, bu blokun Ölçü, Düzen ve Çizim performansını gösterir. Bu sayede olası sorunları belirleyebilirsiniz.

Örneğin, Şekil 1'de RecyclerView içinde öğe olarak kullanılan bir düzen gösterilmektedir. Bu düzende sol tarafta küçük bir bit eşlem resmi, sağ tarafta ise üst üste yerleştirilmiş iki metin öğesi gösterilir. Özellikle bu gibi birden çok kez şişirilmiş düzenlerin optimize edilmesi önemlidir. Çünkü performans avantajları katlanır.

Bir listede tek bir öğeyi gösteren resim: bir resim ve dikey olarak hizalanmış iki metin
Şekil 1. RecyclerView içindeki bir öğenin kavramsal düzeni.

Layout Inspector, kullanılabilir cihazların ve çalışan bileşenlerinin listesini gösterir. Windows sekmesinden bileşeninizi seçin ve seçili bileşenin düzen hiyerarşisini görüntülemek için Layout Inspector'ı tıklayın. Örneğin, Şekil 2, Şekil 1'de gösterilen liste öğesinin düzenini gösterir.

Layout Inspector ve LinearLayout kompozisyonunu gösteren resim
Şekil 2. Şekil 1'deki düzen için LinearLayout'nın iç içe yerleştirilmiş örneklerini kullanarak düzen hiyerarşisi.

Düzeninizi gözden geçirme

Önceki düzen performansı, iç içe yerleştirilmiş bir LinearLayout nedeniyle yavaşladığından, düzeni düzleştirerek (yani düzeni dar ve derin yerine sığ ve geniş hale getirerek) performansı artırabilirsiniz. Kök düğüm olarak A ConstraintLayout bu tür düzenlere izin verir. Bu tasarımı ConstraintLayout kullanacak şekilde dönüştürdüğünüzde düzen iki seviyeli bir hiyerarşi haline gelir:

    <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>
    

Yeni düzenin incelenmesi şu şekilde görünür:

3D Layout Inspector&#39;ı gösteren resim
Şekil 3. Layout Inspector 3D modu.

Bu düzen, listedeki her öğe için kullanıldığından avantajları katlanır.

Farkın çoğu, LinearLayout tasarımında layout_weight kullanılmasından kaynaklanır. Bu durum, ölçümü yavaşlatabilir. Bu, her düzenin uygun kullanım alanlarına bir örnektir. Düzen ağırlığı kullanmanın gerekli olup olmadığını dikkatlice değerlendirin.

Bazı karmaşık düzenlerde sistem, aynı kullanıcı arayüzü öğesini birden fazla kez ölçerek gereksiz çaba harcayabilir. Bu olguya çifte vergilendirme denir. Çifte vergilendirme ve bunun nasıl önleneceği hakkında daha fazla bilgi için Performans ve görüntüleme hiyerarşileri başlıklı makaleyi inceleyin.

Lint'i kullanma

Olası görünüm hiyerarşisi optimizasyonlarını aramak için düzen dosyalarınızda lint aracını çalıştırmanız önerilir. Lint, layoutopt aracının yerini alır ve daha fazla işlevselliğe sahiptir. Aşağıda lint kurallarına örnekler verilmiştir:

  • Bileşik çizilebilir öğeler kullanın. LinearLayout, ImageView ve TextView içeren bir LinearLayout öğesini bileşik çizilebilir öğe olarak daha verimli bir şekilde işleyebilirsiniz.
  • Kök çerçeveyi birleştirin. Bir düzenin kökü, arka plan veya dolgu sağlamayan bir FrameLayout ise bunu biraz daha verimli olan bir birleştirme etiketiyle değiştirebilirsiniz.
  • Gereksiz yaprakları kaldırın. Daha düz ve daha verimli bir düzen hiyerarşisi için, alt öğesi veya arka planı olmayan (görünmez olduğu için) bir düzeni kaldırabilirsiniz.
  • Gereksiz üst öğeleri kaldırın. Kardeşi olmayan, ScrollView veya kök düzen olmayan ve arka planı olmayan bir çocuğu içeren düzeni kaldırabilirsiniz. Daha düz ve verimli bir düzen hiyerarşisi için alt görünümü doğrudan üst öğeye de taşıyabilirsiniz.
  • Derin düzenlerden kaçının. Çok fazla iç içe yerleştirme içeren düzenler performans açısından kötüdür. Performansı artırmak için ConstraintLayout gibi daha düz düzenler kullanabilirsiniz. Lint kontrolleri için varsayılan maksimum derinlik 10'dur.

Lint aracının bir diğer avantajı da Android Studio'ya entegre edilmiş olmasıdır. Lint, programınızı her derlediğinizde otomatik olarak çalışır. Android Studio ile belirli bir derleme değişkeni veya tüm derleme değişkenleri için hata analizi incelemeleri de çalıştırabilirsiniz.

İnceleme profillerini yönetebilir ve incelemeleri Dosya > Ayarlar > Proje Ayarları seçeneğiyle Android Studio'da da yapılandırabilirsiniz. Denetleme Yapılandırması sayfası, desteklenen denetlemelerle birlikte gösterilir:

Android Studio Inspections menüsünü gösteren resim
Şekil 4. İnceleme Yapılandırması sayfası.

Lint, bazı sorunları otomatik olarak düzeltebilir, diğerleri için önerilerde bulunabilir ve doğrudan inceleme için sorunlu koda gidebilir.

Daha fazla bilgi için Düzenler ve Düzen kaynağı başlıklı makaleleri inceleyin.