Düzen Denetleyici ve Düzen Doğrulama ile düzeninizde hata ayıklama

Android Studio'daki Layout Inspector, bir görünüm hiyerarşisi göstererek ve her görünümün özelliklerini incelemenize olanak tanıyarak uygulamanızın düzeninde hata ayıklamanıza olanak tanır. Layout Inspector ile, uygulama düzeninizi tasarım modelleriyle karşılaştırabilir, uygulamanızın büyütülmüş veya 3D görünümünü görüntüleyebilir ve çalışma zamanında uygulama düzeninin ayrıntılarını inceleyebilirsiniz. Bu, özellikle düzeniniz tamamen XML yerine çalışma zamanında oluşturulduğunda ve düzen beklenmedik bir şekilde davrandığında faydalıdır.

Düzen Doğrulama, farklı cihazlarda ve görüntü yapılandırmalarında düzenleri aynı anda önizlemenize olanak tanır. Bu sayede, değişken yazı tipi boyutları veya kullanıcı dilleri de dahil olmak üzere, yaygın olarak karşılaşılan çeşitli düzen sorunlarını test edebilirsiniz.

Düzen Denetleyici'yi açmak için bağlı bir cihazda veya emülatörde uygulamanızı çalıştırın ve ardından Araçlar > Düzen Denetleyici'yi seçin. Birden fazla cihaz veya proje arasında geçiş yaparsanız Layout Inspector, bağlı cihazın ön planında çalışan hata ayıklaması yapılabilir işlemlere otomatik olarak bağlanır.

Sunflower örnek uygulaması için düzen inceleyici anlık görüntüsü

1. Şekil. Sunflower örnek uygulamasının Layout Inspector anlık görüntüsü. Düzen İnceleyici, soldan sağa şu öğeleri görüntüler: Bileşen Ağacı, Düzen Görünümü ve Özellikler.

  • Bileşen Ağacı: Düzendeki görünümlerin hiyerarşisi.
  • Düzen Görünümü: Uygulama düzeninin, her görünümde gösterilen düzen sınırlarıyla cihazınızda veya emülatörünüzde göründüğü şekilde oluşturulması.
  • Özellikler: Seçili görünümün düzen özellikleri. Düzen Denetleyicisi, özelliklere erişmek için etkinliğin yeniden başlatılmasını gerektirir. Daha fazla bilgi için Etkinliği yeniden başlatma bölümüne göz atın.

Düzen Düzenleyici hakkında bilgi edinmek için Düzen Düzenleyiciye Giriş konusuna bakın.

Canlı Güncellemeler

Düzen Ekranı, uygulamanızın düzenini cihazınızda veya emülatörünüzde göründüğü gibi oluşturur. Her görünümde düzen sınırları gösterilir. İncelemek için her bileşeni tıklayabilirsiniz.

Canlı Düzen Denetleyicisi, uygulamanız API düzeyi 29 veya üstünü çalıştıran bir cihaza ya da emülatöre dağıtılırken uygulamanızın kullanıcı arayüzüyle ilgili eksiksiz, gerçek zamanlı analizler sağlar.

Canlı Düzen Denetleyicisi'ni etkinleştirmek için Düzen Denetleyici araç çubuğundan Canlı Güncellemeler seçeneğini belirleyin.

Canlı Düzen Denetleyicisi, bir dinamik düzen hiyerarşisi içerir. Bu hiyerarşi, cihazdaki görünümler değiştikçe Bileşen Ağacı ve Düzen Görünümü'nü günceller.

Görünüm seçme veya ayırma

Görünüm genellikle kullanıcının görebileceği ve etkileşimde bulunabileceği bir şey çizer. Bileşen Ağacı, her görünüm bileşeniyle uygulamanızın hiyerarşisini gerçek zamanlı olarak gösterir. Bu, uygulamanızdaki öğeleri ve bunlarla ilişkili değerleri görselleştirebileceğiniz için uygulamanızın düzeninde hata ayıklamanıza yardımcı olur.

Bir görünümü seçmek için Bileşen Ağacı'nda veya Düzen Görüntüsü'nde söz konusu görünümü tıklayın. Seçilen görünüm için tüm düzen özellikleri Özellikler panelinde görünür.

Düzeniniz çakışan görünümler içeriyorsa Bileşen Ağacı'nda o görünümü tıklayarak veya düzeni döndürerek önde olmayan bir görünümü seçebilirsiniz.

Karmaşık düzenlerle çalışmak için her bir görünümü ayrı ayrı izole edebilirsiniz. Böylece, Bileşen Ağacı'nda düzenin yalnızca bir alt kümesi gösterilir ve Düzen Görünümü'nde oluşturulur.

Görünüm menüsünü yalıt

2. Şekil. Bir görünümü ayırmak için Bileşen Ağacı'nda görünümü sağ tıklayın ve Yalnızca Alt Ağacı Göster veya Yalnızca Üst Öğeleri Göster'i seçin.

Tam görünüme dönmek için görünümü sağ tıklayın ve Tümünü Göster'i seçin.

Düzen kenarlıklarını gizle ve etiketleri görüntüle

Sınırlayıcı kutuyu gizlemek veya bir düzen öğesinin etiketlerini görüntülemek için Düzen Görünümü üst kısmındaki Görünüm Seçenekleri'ni Seçenekleri Göster düğmesi tıklayın ve Kenarlıkları Göster veya Görünüm Etiketini Göster arasında geçiş yapın.

Görünüm seçenekleri açılır menüsü

3. Şekil. Düzen kenarlıklarını gizlemek ve etiketleri görüntülemek için Layout Inspector araç çubuğundaki ikinci Görünüm Seçenekleri'ni tıklayın.

3D modu

Düzen Ekranı, çalışma zamanında uygulamanızın görünüm hiyerarşisinin gelişmiş bir 3D görselleştirmesini içerir. Bu özelliği kullanmak için Canlı Düzen Denetleyici penceresinde 3D Mod düğmesini 3D düğme tıklayın ve fareyi sürükleyerek düğmeyi döndürün.

Düzen Denetleyici: 3D görünüm

4. Şekil. Bir Düzen'in döndürülmüş 3D görünümü.

Düzen denetleyici: katman boşluk görünümü

5. Şekil. Düzen'in katmanlarını genişletmek veya daraltmak için Katman Boşluğu kaydırma çubuğunu kullanın.

Uygulama düzenini referans resim yer paylaşımıyla karşılaştırma

Uygulama düzeninizi kullanıcı arayüzü modeli gibi bir referans resimle karşılaştırmak için Layout Inspector'a bit eşlem görüntü bindirmesi yükleyebilirsiniz.

  • Bir bindirme yüklemek için, Layout Inspector araç çubuğundan Load Yer Paylaşımı seçeneğini belirleyin. Yer paylaşımı, düzene uyacak şekilde ölçeklendirilir.
  • Yer paylaşımının şeffaflığını ayarlamak için Yer Paylaşımı Alfa kaydırma çubuğunu kullanın.
  • Yer paylaşımını kaldırmak için Yer Paylaşımını Temizle simgesini tıklayın.

Düzen hiyerarşisi anlık görüntülerini yakalayın

Layout Inspector, çalışan uygulamanızın düzen hiyerarşisinin anlık görüntülerini kaydetmenize olanak tanır. Böylece, bu anlık görüntüleri başkalarıyla kolayca paylaşabilir veya daha sonra kullanabilirsiniz.

Anlık görüntüler, düzeninizin ayrıntılı 3D görünümü, Görünüm, Oluşturma veya karma düzeninizin bileşen ağacı ve kullanıcı arayüzünüzün her bileşenine ilişkin ayrıntılı özellikler dahil olmak üzere, Düzen İnceleyici'yi kullanırken genellikle göreceğiniz verileri yakalar. Anlık görüntü kaydetmek için aşağıdakileri yapın:

  1. Düzen inceleyiciyi açın.
  2. Düzen Denetleyici, uygulama işleminize otomatik olarak bağlanır. Gösterilmiyorsa açılır menüden uygulama işlemini seçin.
  3. Anlık görüntü yakalamak istediğinizde, Layout Inspector araç çubuğundan Anlık görüntüyü dışa aktarDışa aktar simgesi tıklayın.
  4. Görüntülenen sistem iletişim kutusunda, anlık görüntünüzü kaydetmek istediğiniz adı ve konumu belirtin. Dosyayı *.li uzantısıyla kaydettiğinizden emin olun.

Daha sonra ana menü çubuğundan Dosya > Aç'ı seçip bir *.li dosyası açarak Layout Inspector anlık görüntüsü yükleyebilirsiniz.

Layout Inspector anlık görüntüsü GIF'i

6. Şekil. Düzen İnceleyici'de anlık görüntü alma.

Oluşturmayı İncele

Layout Inspector, çalışan bir uygulamanın içindeki Compose düzenini bir emülatörde veya fiziksel cihazda incelemenize olanak tanır. Layout Inspector'ı, bir bestenin ne sıklıkla yeniden derlendiğini veya atlandığını kontrol etmek için kullanabilirsiniz. Bu, uygulamanızla ilgili sorunların belirlenmesine yardımcı olabilir. Örneğin, bazı kodlama hataları kullanıcı arayüzünüzü aşırı şekilde yeniden oluşturmaya zorlayarak düşük performansa neden olabilir. Bazı kodlama hataları, kullanıcı arayüzünüzün yeniden oluşturulmasını ve dolayısıyla kullanıcı arayüzü değişikliklerinizin ekranda gösterilmesini engelleyebilir.

Compose için Layout Inspector hakkında daha fazla bilgi

Etkinliklerin yeniden başlatılmasını önleme

Layout Inspector'ın düzgün çalışması için aşağıdaki genel ayarlardan biri gerekir. Bir genel ayar belirtmezseniz Layout Inspector otomatik olarak bir tane ayarlar.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    Bu seçenek, belirtilen sürecin incelenmesi için ek bilgiler oluşturur.

  2. adb shell settings put global debug_view_attributes 1

    Bu seçenek, cihazdaki tüm işlemlerde inceleme için ek bilgiler oluşturur.

Genel bir ayarın değiştirilmesi etkinliğin yeniden başlatılmasına neden olabilir. Bir etkinliğin yeniden başlatılmasını önlemek için Android Studio'daki ayarları değiştirebilir veya cihazınızın ayarlarındaki Geliştirici Seçenekleri'ni değiştirebilirsiniz.

Android Studio'da otomatik yenilemeyi etkinleştirmek için menüden Çalıştır > Yapılandırmaları Düzenle'yi seçerek Çalıştırma/Hata Ayıklama Yapılandırmaları'nı açın. Ardından Çeşitli sekmesine gidin ve Düzen Denetleyici Seçenekleri'nin altındaki Etkinliği yeniden başlatmadan Düzen İnceleyici'ye bağlan kutusunu işaretleyin.

&quot;Çalıştırma&quot; yapılandırmalarında etkinlik yeniden başlatma seçeneği

11. Şekil. Çalıştırma/Hata Ayıklama Yapılandırmalarından otomatik yenilemeyi etkinleştirin.

Alternatif olarak, cihazınızın geliştirici seçeneklerini, ardından cihazın geliştirici ayarlarından Görünüm özelliği denetlemeyi etkinleştir'i açabilirsiniz.

Düzen Doğrulama

Düzen Doğrulama, farklı cihazlar ve ekran yapılandırmaları için düzenleri aynı anda önizleyebilmenizi sağlayan ve düzeninizdeki sorunları sürecin başlarında tespit etmenize yardımcı olan görsel bir araçtır. Bu özelliğe erişmek için IDE penceresinin sağ üst köşesindeki Düzen Doğrulama sekmesini tıklayın:

Düzen Doğrulama sekmesinin ekran görüntüsü

12. Şekil. Düzen Doğrulama sekmesi.

Kullanılabilir yapılandırma grupları arasında geçiş yapmak için Düzen Doğrulama penceresinin üst kısmındaki Referans Cihazlar açılır listesinden aşağıdakilerden birini seçin:

  • Referans Cihazlar
  • Özel
  • Renk Körlüğü
  • Yazı Tipi Boyutları

Düzen Doğrulama aracındaki açılır menünün ekran görüntüsü

13. Şekil. Referans Cihazlar açılır menü seçeneği.

Referans Cihazlar

Referans cihazlar, test etmenizi önerdiğimiz cihazlar grubudur. Bunlar arasında telefon, katlanabilir, tablet ve masaüstü arayüzleri yer alır. Düzeninizin aşağıdaki referans cihazlarında nasıl göründüğünü önizlemeniz gerekir:

Farklı referans cihazlar için düzen önizlemelerinin ekran görüntüsü

14. Şekil. Düzen Doğrulama aracında cihaz önizlemelerine referans verme.

Özel

Önizlemek üzere bir ekran yapılandırmasını özelleştirmek için dil, cihaz veya ekran yönü gibi çeşitli ayarlar arasından seçim yapın:

Düzen Doğrulama aracında bir cihaz ekranını özelleştirme

15. Şekil. Düzen Doğrulama aracında özel bir görüntü yapılandırın.

Renk Körlüğü

Renk körlüğü olan kullanıcılar için uygulamanızın daha erişilebilir olmasını sağlamak üzere düzeninizi yaygın renk körlüğü türlerinin simülasyonlarıyla doğrulayın:

Farklı renk körlüğü türleri için simülasyon önizlemelerinin ekran görüntüsü

16. Şekil. Düzen Doğrulama aracındaki renk körlüğü simülasyonu önizlemeleri.

Yazı Tipi Boyutları

Düzenlerinizi çeşitli yazı tipi boyutlarında doğrulayın ve düzenlerinizi büyük yazı tipleriyle test ederek görme engelli kullanıcılar için uygulamanızın erişilebilirliğini iyileştirin:

Büyük yazı tipleri için görünür düzen hataları içeren, farklı yazı tipi boyutlarında uygulama düzenlerinin önizlemeleri

17. Şekil. Düzen Doğrulama aracında değişken yazı tipi boyutu önizlemeleri