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 ş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, sık 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 Araçlar > Düzen Denetleyicisi'ni 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ü

Şekil 1. Sunflower örnek uygulaması için Layout Inspector anlık görüntüsü. Layout İnceleyici, soldan sağa şunları 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ü: Uygulamanın düzeni, cihazınızda veya emülatörünüzde göründüğü gibi oluşturulur. Her görünümde düzen sınırları gösterilir.
  • Özellikler: Seçili görünümün düzen özellikleri. Düzen İnceleyici, ö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 bakın.

Düzen Düzenleyici hakkında bilgi edinmek için Düzen Düzenleyiciye Giriş bölümünü inceleyin.

Yerleşik Layout Inspector (deneysel)

Android Studio Hedgehog'dan başlayarak Layout Inspector'ı doğrudan Çalıştıran Cihazlar araç penceresinden çalıştırabilirsiniz. Bu deneysel özellik, Layout Inspector'ın performansını önemli ölçüde iyileştirir, ekran alanını korur ve kullanıcı arayüzü hata ayıklama iş akışınızı tek bir araç penceresinde düzenlemenize yardımcı olur. Yerleşik modu etkinleştirmek için:

  • Windows'da Dosya > Ayarlar > Deneysel > Layout Inspector'a gidin
  • macOS'te Android Studio > Ayarlar > Deneysel > Layout Inspector'a gidin

Nasıl başlayacağınız ve sık gerçekleştirilen bazı görevleri nasıl gerçekleştireceğiniz aşağıda açıklanmıştır:

  • Düzen Denetleyici'yi başlatmak için Çalışan Cihazlar penceresine gidin ve Düzen Denetleyicisini Aç/Kapat Yerleştirilmiş düzen inceleyiciyi açma/kapatma düğmesi simgesini tıklayın.
  • Hiyerarşiyi görüntülemek ve her görünümün özelliklerini incelemek için Bileşen Ağacı ve Özellik Paneli araç penceresini kullanın.
  • Doğrudan görünümleri bir kez tıklayarak görünümleri seçmek veya görünümleri çift tıklayarak koda gitmek için Derin İncelemeyi Aç/Kapat Derin incelemeyi aç/kapat düğmesi özelliğini etkinleştirin.
  • Uygulamayla etkileşimde bulunmak için Derin İncelemeyi Aç/Kapat Derin incelemeyi aç/kapat düğmesi ayarını devre dışı bırakın.
  • Fiziksel cihazları incelemek için cihaz yansıtma'yı etkinleştirin.
  • 3D modunu kullanmak için Düzen Denetleyici Anlık Görüntüsü Düzen Denetleyici Anlık Görüntüsü çekin.

Yerleştirilmiş Düzen Denetleyici

2. Şekil. Jetchat uygulaması için yerleşik Layout Inspector

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 ve her görünümde düzen sınırları gösterilir. İncelemek için her bir 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.

Live Layout Inspector'ı etkinleştirmek için Layout Inspector araç çubuğundan Live Updates seçeneğini belirleyin.

Canlı Düzen Denetleyicisi, dinamik bir 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üntüsü'nü günceller.

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

Görüntülemeler genellikle kullanıcının görebileceği ve etkileşime girebileceği bir şey çizer. Bileşen Ağacı, uygulamanızın hiyerarşisini her görünüm bileşeniyle 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ünümü'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 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ü izole et

3. Şekil. Bir görünümü ayırmak için Bileşen Ağacı'nda görünümü sağ tıklayıp 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ı gizleme ve etiketleri görüntüleme

Sınırlayıcı kutuyu gizlemek veya bir düzen öğesinin etiketlerini görüntülemek için Düzen Görünümü'nün üst kısmında 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 seçeneğini değiştirin.

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

4. Şekil. Düzen kenarlıklarını gizlemek ve etiketleri görüntülemek için, Düzen Denetleyici 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 İnceleyici penceresinde 3D Mod düğmesini 3D düğmesi tıklayın ve fareyi sürükleyerek döndürün.

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

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

Düzen inceleyici: katman aralığı görünümü

6.Şekil Düzen'in katmanlarını genişletmek veya daraltmak için Katman Aralığı 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'da bit eşlem görüntü bindirmesi yükleyebilirsiniz.

  • Bir bindirmeyi yüklemek için Layout Inspector araç çubuğundan Yer Paylaşımı Yükle 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

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

Anlık görüntüler, Düzen İnceleyici'yi kullanırken karşılaşacağınız verileri yakalar. Bunlara örnek olarak düzeninizin ayrıntılı 3D oluşturulması, Görünüm, Oluşturma veya karma düzeninizin bileşen ağacı ve kullanıcı arayüzünüzün her bir bileşenine ilişkin ayrıntılı özellikler yer alır. 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örünmüyorsa 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 aktar Dışa aktarma
simgesi seçeneğini 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 bir Layout Inspector anlık görüntüsü yükleyebilirsiniz.

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

7. Şekil. Düzen Denetleyici'de anlık görüntü alma.

Oluşturmayı denetle

Düzen Denetleyicisi, çalışan bir uygulamanın içindeki Compose düzenini bir emülatörde veya fiziksel cihazda incelemenize olanak tanır. Bir oluşturma öğesinin ne sıklıkla yeniden oluşturulduğunu veya atlandığını kontrol etmek için Düzen İnceleyici'yi kullanabilirsiniz. Bu, uygulamanızla ilgili sorunların tanımlanmasına 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 da kullanıcı arayüzü değişikliklerinizin ekranda gösterilmesini engelleyebilir.

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

Etkinliğin yeniden başlatılmasını önleme

Düzen İnceleyici'nin düzgün çalışması için aşağıdaki genel ayarlardan biri gerekir. Bir genel ayar belirtmezseniz Layout Inspector otomatik olarak bir ayar belirler.

  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ı veya cihazınızın ayarlarında 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ır/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.

Yapılandırmaları çalıştır bölümünde etkinliği yeniden başlatma seçeneği

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

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

Düzen Doğrulama

Düzen Doğrulama, farklı cihazlar ve ekran yapılandırmaları için düzenleri eşzamanlı olarak önizlemeye yarayan görsel bir araçtır. Bu araç, düzeninizdeki sorunları sürecin başlarında tespit etmenize yardımcı olur. 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ü

Şekil 13. 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ü

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

Referans Cihazlar

Referans cihazlar, test etmenizi önerdiğimiz cihazlar grubudur. Bunlar arasında telefon, katlanabilir cihaz, 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ü

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

Özel

Ekran yapılandırmasını önizleyecek şekilde ö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

Şekil 16. Düzen Doğrulama aracında özel bir görünüm 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ü

Şekil 17. 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 görme engelli kullanıcılar için düzenlerinizi daha büyük yazı tipleriyle test ederek uygulamanızın erişilebilirliğini iyileştirin:

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

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