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

Android Studio'daki Düzen Denetçisi, 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ıza olanak tanır. Düzen İnceleyici ile uygulama düzeninizi tasarım maketleriyle 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 düzeninin ayrıntılarını inceleyebilirsiniz. Bu özellik, özellikle düzeniniz tamamen XML'de değil, çalışma zamanında oluşturulduğunda ve düzen beklenmedik şekilde davrandığında kullanışlıdır.

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

Başlayın

Düzen inceleyiciyi başlatmak için uygulamanızı çalıştırın, Çalışan Cihazlar penceresine gidin ve Düzen İnceleyiciyi Aç/KapatYerleştirilmiş düzen denetleyici düğmesini açma/kapatma tıklayın. Birden fazla cihaz veya proje arasında geçiş yaparsanız Layout Inspector, bağlı cihazın ön planında çalışan hata ayıklanabilir işlemlere otomatik olarak bağlanır.

Sık kullanılan bazı görevleri nasıl yapacağınızı aşağıda bulabilirsiniz:

  • 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. Layout Inspector, özelliklere erişmek için etkinliğin yeniden başlatılmasını gerektirebilir. Daha fazla bilgi için Özellik incelemesini görüntüleme başlıklı makaleye bakın.
  • Görünümleri doğrudan tek tıklayarak seçmek veya görünümleri çift tıklayarak koda gitmek için Toggle Deep Inspect'i (Derin İncelemeyi Aç/Kapat) Derin inceleme düğmesini açma/kapatma etkinleştirin.
  • Uygulamayla etkileşimde bulunmak için Toggle Deep Inspect'i (Derin İncelemeyi Aç/Kapat) devre dışı bırakın Derin inceleme düğmesini açma/kapatma.
  • Fiziksel cihazları incelemek için cihaz yansıtmayı 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 modunu kullanmak için Düzen Denetleyicisi'nde anlık görüntü alın Layout Inspector Anlık Görüntüsü ve ardından 3D Modu'nu 3D düğmesi tıklayın.

Görünüm seçme veya yalıtma

Görünüm genellikle kullanıcının görebileceği ve etkileşimde bulunabileceği bir şey çizer. Bileşen Ağacı, uygulamanızın hiyerarşisini her görünüm bileşeniyle birlikte anlık olarak gösterir. Bu sayede, uygulamanızdaki öğeleri ve bunlarla ilişkili değerleri görselleştirebileceğiniz için uygulamanızın düzeninde hata ayıklama yapabilirsiniz.

Görünüm seçmek için Bileşen Ağacı veya Düzen Ekranı'nda görünümü tıklayın. Seçili görünümün tüm düzen özellikleri, Özellikler panelinde gösterilir.

Düzeninizde çakışan görünümler varsa Ayrıntılı İnceleme modunda sağ tıkladığınızda bir bölgedeki tüm görünümleri görebilirsiniz Derin inceleme düğmesini açma/kapatma. Önde olmayan bir görünümü seçmek için Bileşen Ağacı'nda tıklayın veya düzeni döndürün.

Karmaşık düzenlerle çalışmak için tek tek görünümleri izole edebilirsiniz. Böylece Bileşen Ağacı'nda yalnızca düzenin bir alt kümesi gösterilir ve Düzen Ekranı'nda oluşturulur. Bir görünümü yalıtmak için anlık görüntü alın Layout Inspector 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 Üstleri 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. Görünümü yalıtmadan önce anlık görüntü almanız gerekir.

Düzen kenarlıklarını gizleme ve etiketleri görüntüleme

Bir düzen öğesinin sınırlayıcı kutusunu gizlemek veya görünüm etiketlerini göstermek için Düzen Görüntüleme'nin üst kısmındaki Görünüm Seçenekleri'ni tıklayın Görünüm Seçenekleri düğmesi ve Kenarlıkları Göster veya Görünüm Etiketini Göster'i açın ya da kapatın.

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

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

Anlık görüntüler, düzeninizin ayrıntılı bir 3D oluşturma işlemi, View, Compose 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 olmak üzere, Düzen Denetçisi'ni kullanırken normalde gördüğünüz verileri yakalar. Anlık görüntüyü kaydetmek için Anlık Görüntü Dışa/İçe Aktarma Anlık Görüntüyü Dışa/İçe Aktarma ve ardından Anlık Görüntüyü Dışa Aktar'ı tıklayın.

Import Snapshot'u (Anlık Görüntüyü İçe Aktar) tıklayarak önceden kaydedilmiş bir Layout Inspector anlık görüntüsünü yükleyin.

3D modu

Layout Display, uygulamanızın çalışma zamanındaki görünüm hiyerarşisinin gelişmiş bir 3D görselleştirmesini sunar. Bu özelliği kullanmak için anlık görüntü alın Anlık Görüntüyü Dışa/İçe Aktarma, anlık görüntü inceleyici penceresinde 3D Modu düğmesini tıklayın 3D düğmesi ve fareyi sürükleyerek döndürün.

Layout Inspector: 3D görünüm
Şekil 2. Düzenin döndürülmüş 3D görünümü.
Layout Inspector: Katman aralığı görünümü
Şekil 3. Düzenin 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 bir referans resimle (ör. kullanıcı arayüzü maketi) karşılaştırmak için Düzen Denetleyici'ye bir bit eşlem resmi yer paylaşımı yükleyebilirsiniz.

  • Yerleşimi yüklemek için Düzen İnceleyici araç çubuğundan Yerleşimi Yükle seçeneğini belirleyin. Yer paylaşımı, düzene sığacak şekilde ölçeklendirilir.
  • Yerleşimin şeffaflığını ayarlamak için Yerleşimin Alfa Değeri kaydırma çubuğunu kullanın.
  • Yer paylaşımını kaldırmak için Yer Paylaşımını Temizle'yi tıklayın.

Oluşturma penceresini inceleme

Layout Inspector, bir emülatörde veya fiziksel cihazda çalışan bir uygulamanın içindeki Compose düzenini incelemenize olanak tanır. Bir composable'ın ne sıklıkta yeniden oluşturulduğunu veya atlandığını kontrol etmek için Layout Inspector'ı kullanabilirsiniz. Bu, uygulamanızdaki sorunları belirlemenize yardımcı olabilir. Örneğin, bazı kodlama hataları kullanıcı arayüzünüzün aşırı yeniden oluşturulmasına neden olabilir ve bu da performansın düşmesine yol açabilir. 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 edinin.

Özellik incelemeyi görüntüleme

Düzen Denetleyici'nin düzgün çalışması için aşağıdaki genel ayar gerekir:

adb shell settings put global debug_view_attributes 1

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

Layout Inspector, başlatıldığında ayarı otomatik olarak etkinleştirir. Bu işlem, mevcut ön plan etkinliğinin yeniden başlatılmasına neden olur. Cihazda işaret manuel olarak devre dışı bırakılmadığı sürece başka bir Etkinlik yeniden başlatma işlemi görmezsiniz.

İşareti devre dışı bırakmak için aşağıdaki adb komutunu çalıştırın:

adb shell settings delete global debug_view_attributes

Alternatif olarak, cihazınızın geliştirici seçeneklerinden Görünüm özelliği incelemeyi etkinleştir'i kapatın.

Bağımsız Layout Inspector

En iyi performans için Düzen İnceleyici'yi varsayılan yerleştirilmiş modda kullanmanızı öneririz. Düzen Denetçisi'ni yerleştirmeyi kaldırmak istiyorsanız Dosya (macOS'te Android Studio) > Ayarlar > Araçlar > Düzen Denetçisi'ne gidin ve Yerleştirilmiş Düzen Denetçisi'ni etkinleştir onay kutusunun işaretini kaldırın.

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