Düzen Denetleyici ile düzeninizde hata ayıklama

Android Studio'daki Düzen Denetleyicisi, her görünümün özelliklerini inceleyebileceğiniz bir görünüm hiyerarşisi göstererek uygulamanızın düzeninde hata ayıklamanızı sağlar. 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 çalıştığında yararlı olur.

Şekil 1. Jetchat uygulaması için yerleştirilmiş Layout Inspector.

Başlayın

Düzen Denetleyicisi'ni başlatmak için uygulamanızı çalıştırın, Çalışan Cihazlar penceresine gidin ve Düzen Denetleyicisini Aç/KapatYerleştirilmiş düzen denetleyiciyi aç/kapat düğmesi tıklayın. 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.

Sık yapılan bazı görevleri aşağıda açıklanan şekilde gerçekleştirebilirsiniz:

  • Hiyerarşiyi görüntülemek ve her görünümün özelliklerini incelemek için Bileşen Ağacı ve Özellikler araç pencerelerini kullanın. Düzen İnceleyici, özelliklere erişmek için etkinliğin yeniden başlatılmasını gerektirebilir. Daha fazla bilgi edinmek için Etkinliğin yeniden başlatılmasını önleme başlıklı makaleyi inceleyin.
  • 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.
  • Uygulamanızın kullanıcı arayüzünü güncellerken canlı güncellemeleri etkinleştirmek için Canlı Düzenleme'nin etkinleştirildiğinden emin olun.
  • 3D modu kullanmak için, Layout Inspector'ın Düzen Denetleyici Anlık Görüntüsü anlık görüntüsünü alın ve 3D Modu'nu 3D düğmesi tıklayın.

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 Derin İnceleme modunda Derinlemesine incelemeyi aç/kapat düğmesi sağ tıkladığınızda bir bölgedeki tüm görünümleri görebilirsiniz. Önde olmayan bir görünümü seçmek için Bileşen Ağacı'nda ilgili görünümü tıklayın veya düzeni döndürün.

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. Bir görünümü izole etmek için anlık görüntü alın Düzen Denetleyici Anlık Görüntüsü, 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. Bir görünümü izole etmeden önce anlık görüntü almanız gerekir.

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.

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 paylaşabilir veya daha sonra kullanabilirsiniz.

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üyü kaydetmek için Anlık Görüntüyü Dışa/İçe Aktar Anlık Görüntü İçe/Dışa Aktarma ve ardından Anlık Görüntüyü Dışa Aktar'ı tıklayın.

Anlık Görüntüyü İçe Aktar'ı tıklayarak daha önce kaydedilmiş bir Düzen Denetleyici anlık görüntüsünü yükleyin.

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 anlık görüntü Anlık Görüntü İçe/Dışa Aktarma çekin, enstantane 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
Şekil 2. Bir Layout'un döndürülmüş 3D görünümü.
Düzen denetleyici: katman aralığı görünümü
Şekil 3. 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 Layout Inspector araç çubuğundan Yükleme Yerleşimi 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'yi tıklayın

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

Etkinliklerin 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 4. Çalıştır/Hata Ayıklama Yapılandırmaları iletişim kutusundan 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.

Bağımsız Düzen Denetleyici

En iyi performans için Layout Inspector'ı varsayılan yerleşik modunda kullanmanızı öneririz. Düzen Denetleyicisi'nin yerleştirmesini kaldırmak istiyorsanız Dosya (macOS'te Android Studio) > Ayarlar > Araçlar > Düzen Denetleyicisi'ne gidin ve Yerleştirilmiş Düzen Denetleyiciyi etkinleştir onay kutusunun işaretini kaldırın.

Bağımsız modda, Düzen Denetleyici araç çubuğundan Canlı Güncellemeler seçeneğini tıklayarak canlı güncellemeleri etkinleştirin.