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

Android Studio'daki Düzen Denetleyicisi, 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üzeniyle ilgili ayrıntıları inceleyebilirsiniz. Bu, özellikle düzeniniz tamamen XML yerine çalışma zamanında oluşturulduğunda ve düzen beklenmedik şekilde çalıştığında faydalıdır.

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

Düzen Denetleyicisi'ni açmak için bağlı bir cihazda veya emülatörde uygulamanızı çalıştırın ve Araçlar > Düzen Denetleyici'yi seçin. Birden fazla cihaz veya proje arasında geçiş yaparsanız Düzen İnceleyici, 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ı, Layout Display ve Attributes.

  • Bileşen Ağacı: Düzendeki görünümlerin hiyerarşisi.
  • Düzen Ekranı: Uygulamanın düzeni, cihazınızda veya emülatörünüzde göründüğü gibi oluşturulur ve 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ünü inceleyin.

Görünümler için Düzen Düzenleyici hakkında bilgi edinmek üzere Düzen Düzenleyici'ye Giriş bölümüne bakın.

Yerleşik Düzen Denetleyici (deneysel)

Android Studio Hedgehog'dan başlayarak, Layout Inspector'ı doğrudan Çalıştırma Cihazlar araç penceresinde ç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üzenlemeye yardımcı olur. Yerleşik modu etkinleştirmek için:

  • Windows'da Dosya > Ayarlar > Deneysel > Layout Inspector
  • macOS'te Android Studio > Ayarlar > Deneysel > Düzen Denetleyicisi'ne gidin

Nasıl başlayacağınız ve sık yapılan 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 denetleyiciyi aç/kapat 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 Derinlemesine incelemeyi aç/kapat düğmesi özelliğini etkinleştirin.
  • Uygulamayla etkileşimde bulunmak için Derin İncelemeyi Aç/Kapat Derinlemesine incelemeyi aç/kapat düğmesi ayarını devre dışı bırakın.
  • Fiziksel cihazları incelemek için cihaz yansıtma özelliğini etkinleştirin.
  • 3D modunu kullanmak için bir Düzen Denetleyici Anlık Görüntüsü Düzen Denetleyici Anlık Görüntüsü çekin.

Katıştırılmış Düzen Denetleyici

2. Şekil. Jetchat uygulaması için yerleşik Düzen Denetleyicisi

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üm için düzen sınırları gösterir. İ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 veya emülatöre dağıtılırken uygulamanızın kullanıcı arayüzü hakkında eksiksiz, gerçek zamanlı analizler sağlar.

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

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

Bir 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 şeyi ç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üzenindeki hataları 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üme ilişkin 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ı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üntüsü'nün ü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ü

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ı, uygulamanızın çalışma zamanında 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üğmesi tıklayın ve fareyi sürükleyerek döndürün.

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

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

Düzen denetleyici: 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 resim yer paylaşımı yükleyebilirsiniz.

  • Bir bindirmeyi yüklemek için Düzen İnceleyici araç çubuğundan Yer Paylaşımını 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 anlık görüntüleri başkalarıyla kolayca paylaşabilir veya daha sonra inceleyebilirsiniz.

Anlık görüntüler, 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 bileşeni için ayrıntılı özellikler dahil, 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 denetleyicisini 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. Açılan 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

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

Oluşturmayı İncele

Düzen Denetleyicisi, bir emülatörde veya fiziksel cihazda çalışan bir uygulamanın içindeki Compose düzenini inceleyebilmenizi sağlar. Bir composable'ın ne sıklıkla yeniden derlendiğini veya atlandığını kontrol etmek için Layout Inspector'ı 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ı miktarda yeniden oluşturmaya zorlayarak düşük performansa neden olabilir. Bazı kodlama hataları, kullanıcı arayüzünüzün yeniden oluşturulmasını engelleyerek kullanıcı arayüzü değişikliklerinizin ekranda görünmesini engelleyebilir.

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

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

Düzen Denetleyicisi, düzgün çalışmak için aşağıdaki genel ayarlardan birini gerektirir. 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 işlemin 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ı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ı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 Düzen Denetleyicisi'ne etkinliği yeniden başlatmadan bağlan kutusunu işaretleyin.

Yapılandırmaları çalıştır seçeneğinde 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, cihazınızın geliştirici seçeneklerini, ardından cihazın geliştirici ayarlarından Görünüm özelliği denetimini 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 önizleyen görsel bir araçtır. Bu sayede, düzeninizdeki sorunları sürecin daha erken bir aşamasında yakalayabilirsiniz. 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 yapmanızı önerdiğimiz cihazlar grubudur. Bunlar arasında telefon, katlanabilir, tablet ve masaüstü arayüzleri yer alır. Düzeninizin bu referans cihazları grubunda 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

Önizleme yapmak ü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

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

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

Yazı Tipi Boyutları

Çeşitli yazı tipi boyutlarında düzenlerinizi 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ı içeren farklı yazı tipi boyutlarında uygulama düzenlerinin önizlemeleri

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