Düzen hiyerarşilerini optimize etme

Oluşturma yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da düzenlerle çalışma hakkında bilgi edinin.

Temel düzen yapılarını kullanmanın en etkili düzenleri sağladığı fikrine ilişkin yaygın bir yanlış kanı vardır. Ancak uygulamanıza eklediğiniz her widget ve düzen için başlatma, düzen ve çizim gerekir. Örneğin, iç içe yerleştirilmiş LinearLayout örneklerini kullanmak, aşırı derin bir görünüm hiyerarşisine yol açabilir. Dahası, her bir alt öğenin iki kez ölçülmesi gerektiğinden, layout_weight parametresini kullanan birkaç LinearLayout örneğini iç içe yerleştirmek özellikle pahalı olabilir. Bu, özellikle düzen RecyclerView içinde kullanıldığında olduğu gibi art arda şişirildiğinde önemlidir.

Bu dokümanda, düzeninizi incelemek ve optimize etmek için Layout Inspector ve lint'i nasıl kullanacağınız gösterilmektedir.

Düzeninizi inceleyin

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

Düzen Denetleyicisi, bağlı bir cihazda veya emülatörde çalışan işlemleri seçmenizi ve ardından düzen ağacını görüntülemenizi sağlar. Her bir bloktaki trafik ışıkları, blokların Ölçüm, Düzen ve Çizim performansını temsil ederek olası sorunları belirlemenize yardımcı olur.

Örneğin, Şekil 1'de RecyclerView içinde öğe olarak kullanılan bir düzen gösterilmektedir. Bu düzenin sol tarafında küçük bir bit eşlem resmi ve sağ tarafında yığılmış iki metin öğesi gösterilmektedir. Performans faydaları kat kat arttığından, birden çok kez şişirilen bu gibi düzenlerin optimize edilmesi özellikle önemlidir.

Listede tek bir öğeyi gösteren resim: bir resim ve dikey olarak hizalanmış iki metin
Şekil 1. RecyclerView içindeki bir öğe için kavramsal düzen.

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

Düzen Denetleyicisi ve Doğrusal Düzen kompozisyonunu gösteren resim
Şekil 2. Şekil 1'deki düzenin iç içe yerleştirilmiş LinearLayout örnekleri kullanılarak oluşturulan düzen hiyerarşisi.

Düzeninizi gözden geçirin

Önceki düzenin performansı iç içe yerleştirilmiş LinearLayout nedeniyle yavaşladığı için düzeni düzleştirerek (yani düzeni dar ve derin değil, yüzeysel ve geniş hale getirerek) performansı artırabilirsiniz. Kök düğüm, bu tür düzenlere izin verdiğinden bir ConstraintLayout. Bu tasarımı ConstraintLayout kullanımına dönüştürdüğünüzde, düzen iki düzeyli bir hiyerarşiye dönüşür:

    <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 şöyle görünür:

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

Bu düzen bir listedeki her öğe için kullanıldığından bunun faydaları katlanır.

Farkın çoğu, LinearLayout tasarımında layout_weight kullanımından kaynaklanır. Bu durum, ölçümü yavaşlatabilir. Bu, her düzenin nasıl uygun kullanımlar sağladığını gösteren bir örnektir. Düzen ağırlığının gerekli olup olmadığını dikkatlice düşünün.

Bazı karmaşık düzenlerde sistem, aynı kullanıcı arayüzü öğesini birden fazla kez ölçmek için emeklerini boşa harcayabilir. Bu olaya çift vergilendirme denir. Çift vergilendirme ve önlenmesi hakkında daha fazla bilgi için Performans ve hiyerarşileri görüntüleme bölümüne bakın.

Hata analizi kullan

Olası görünüm hiyerarşisi optimizasyonlarını aramak için düzen dosyalarınızda lint aracını çalıştırmak iyi bir uygulamadır. Lint, düzen optimizasyonu aracının yerini aldı ve daha fazla işleve sahip. Aşağıda, lint kurallarına örnekler verilmiştir:

  • Birleşik çekilebilir kademeler kullanın. ImageView içeren bir LinearLayout ve TextView içeren bir bileşik çekilebilir dosyasını 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 etkili bir birleştirme etiketiyle değiştirebilirsiniz.
  • İşe yaramayan yaprakları kaldırın. Alt öğesi olmayan veya arka planı olmayan bir düzeni, görünmez olduğundan daha düz ve verimli bir düzen hiyerarşisi için kaldırabilirsiniz.
  • İşe yaramayan üst öğeleri kaldırın. Kardeşi olmayan, ScrollView veya kök düzen olmayan ve arka planı olmayan bir alt öğeye sahip düzeni kaldırabilirsiniz. Ayrıca, daha düz ve daha verimli bir düzen hiyerarşisi için alt görünümü doğrudan üst görünüme taşıyabilirsiniz.
  • Derin düzenlerden kaçının. Çok fazla iç içe yerleştirme olan düzenler performansı olumsuz etkiler. Performansı artırmak için ConstraintLayout gibi daha düz düzenler kullanmayı deneyin. Hata analizi kontrolleri için varsayılan maksimum derinlik 10'dur.

lint aracının bir başka avantajı da Android Studio ile entegre edilmesidir. Lint, programınızı derlediğinizde otomatik olarak çalışır. Android Studio ile belirli bir derleme varyantı veya tüm derleme varyantları için lint denetimleri de çalıştırabilirsiniz.

Ayrıca Android Studio'da Dosya > Ayarlar > Proje Ayarları seçeneğini kullanarak inceleme profillerini yönetebilir ve denetimleri yapılandırabilirsiniz. Denetleme Yapılandırması sayfası, desteklenen denetimlerle birlikte görünür:

Android Studio Denetimler menüsünü gösteren resim
Şekil 4. Denetleme Yapılandırması sayfası.

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

Daha fazla bilgi için bkz. Layouts ve Layout kaynağı.