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.
Ş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 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 özelliğini etkinleştirin.
- Uygulamayla etkileşimde bulunmak için Derin İncelemeyi Aç/Kapat 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ü çekin.
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.
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 tıklayın ve Kenarlıkları Göster veya Görünüm Etiketini Göster arasında geçiş yapın.
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 tıklayın ve fareyi sürükleyerek döndürün.
5. Şekil. Bir Layout'un döndürülmüş 3D 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:
- Düzen denetleyicisini 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.
- Açılan sistem iletişim kutusunda anlık görüntünüzü kaydetmek istediğiniz adı ve konumu belirtin. Dosyayı
*.liuzantı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.
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.
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.
adb shell settings put global debug_view_attributes_application_package <processname>
Bu seçenek, belirtilen işlemin 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ı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.
Şekil 12. Çalıştır/Hata Ayıklama Yapılandırmalarından otomatik yenilemeyi etkinleştirin.
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:
Ş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ı
Ş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:
Ş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:
Ş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:
Ş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:
Şekil 18. Düzen Doğrulama aracında değişken yazı tipi boyutu önizlemeleri.