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.
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.
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 tıklayın ve Kenarlıkları Göster veya Görünüm Etiketini Göster arasında geçiş yapın.
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 tıklayın ve fareyi sürükleyerek düğmeyi döndürün.
4. Şekil. Bir Düzen'in döndürülmüş 3D 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:
- Düzen inceleyiciyi açın.
- Düzen Denetleyici, uygulama işleminize otomatik olarak bağlanır. Gösterilmiyorsa açılır menüden uygulama işlemini seçin.
- Anlık görüntü yakalamak istediğinizde, Layout Inspector araç çubuğundan Anlık görüntüyü dışa aktar'ı
tıklayın.
- 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.
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.
adb shell settings put global debug_view_attributes_application_package <processname>
Bu seçenek, belirtilen sürecin incelenmesi için ek bilgiler oluşturur.
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.
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:
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ı
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:
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:
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:
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:
17. Şekil. Düzen Doğrulama aracında değişken yazı tipi boyutu önizlemeleri