Compose kullanıcı arayüzünüzde hata ayıklamak için kullanabileceğiniz araçlar Android Studio'da mevcuttur.
Layout Inspector
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ı derecede yeniden oluşturulmasına neden olabilir ve bu da düşük performansa 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. Düzen denetçisini kullanmaya yeni başladıysanız nasıl çalıştırılacağıyla ilgili kılavuza göz atın.
Yeniden oluşturma sayılarını alma
Compose düzenlerinizde hata ayıklama yaparken, kullanıcı arayüzünüzün düzgün şekilde uygulanıp uygulanmadığını anlamak için composable'ların ne zaman yeniden oluşturulduğunu bilmeniz önemlidir. Örneğin, çok fazla kez yeniden oluşturuluyorsa uygulamanız gerekenden daha fazla iş yapıyor olabilir. Öte yandan, yeniden oluşturulması beklenen ancak yeniden oluşturulmayan bileşenler beklenmedik davranışlara yol açabilir.
Layout Inspector, uygulamanızla etkileşim kurarken düzen hiyerarşinizdeki ayrı composable'ların yeniden oluşturulup oluşturulmadığını veya atlanıp atlanmadığını gösterir. Android Studio'da, composable'larınızın kullanıcı arayüzünde nerede yeniden oluşturulduğunu belirlemenize yardımcı olmak için yeniden oluşturma işlemleriniz vurgulanır.
Şekil 1. Yeniden oluşturmalar, Layout Inspector'da vurgulanır.
Vurgulanan kısımda, Layout Inspector'ın resim bölümündeki composable'ın gradyan yerleşimi gösterilir. Bu kısım, en fazla yeniden oluşturma işlemine sahip composable'ın kullanıcı arayüzünde nerede bulunabileceği hakkında fikir edinmeniz için yavaş yavaş kaybolur. Bir composable, başka bir composable'dan daha yüksek bir hızda yeniden oluşturuluyorsa ilk composable daha güçlü bir gradyan yer paylaşımı rengi alır. Düzen denetleyicisinde bir composable'ı çift tıklarsanız analiz için ilgili koda yönlendirilirsiniz.
Layout Inspector penceresini açın ve uygulama işleminize bağlanın. Bileşen Ağacı'nda, düzen hiyerarşisinin yanında iki sütun görünür. İlk sütunda her düğüm için beste sayısı, ikinci sütunda ise her düğüm için atlama sayısı gösterilir. Birleştirilebilir bir düğüm seçildiğinde, satır içi işlev olmadığı sürece birleştirilebilir öğenin boyutları ve parametreleri gösterilir. Satır içi işlevlerde parametreler gösterilemez. Bileşen Ağacı veya Düzen Ekranı'ndan bir composable seçtiğinizde Özellikler bölmesinde de benzer bilgileri görebilirsiniz.
Sayacı sıfırlamak, uygulamanızla belirli bir etkileşim sırasında yeniden oluşturma veya atlama işlemlerini anlamanıza yardımcı olabilir. Sayacı sıfırlamak istiyorsanız Bileşen Ağacı bölmesinin üst kısmındaki Sıfırla'yı tıklayın.
Şekil 3. Layout Inspector'da birleştirme ve atlama sayacını etkinleştirin.
Oluşturma anlamsal yapısı
Oluşturma'da anlamsal yapı, kullanıcı arayüzünüzü erişilebilirlik hizmetleri ve test çerçevesi tarafından anlaşılabilir bir şekilde açıklar. Compose düzenlerinizdeki anlamsal bilgileri incelemek için Layout Inspector'ı kullanabilirsiniz.
Bir Oluşturma düğümü seçtiğinizde, Özellikler bölmesini kullanarak düğümün doğrudan anlamsal yapı bildirip bildirmediğini, alt öğelerinden gelen anlamsal yapıyı birleştirip birleştirmediğini veya her ikisini de yapıp yapmadığını kontrol edin. Bildirilmiş veya birleştirilmiş anlamsal yapıların hangi düğümlerde bulunduğunu hızlıca belirlemek için Bileşen Ağacı bölmesinde Görünüm seçenekleri açılır listesini seçin ve Anlamsal Yapı Katmanlarını Vurgula'yı belirleyin. Bu özellik yalnızca ağaçtaki semantik içeren düğümleri vurgular ve klavyenizi kullanarak bunlar arasında hızlıca gezinebilirsiniz.
Compose kullanıcı arayüzü denetimi
Android Studio, Jetpack Compose'da daha uyarlanabilir ve erişilebilir kullanıcı arayüzleri oluşturmanıza yardımcı olmak için Compose Önizleme'de kullanıcı arayüzü kontrolü modu sunar. Bu özellik, görünümler için Erişilebilirlik Tarayıcısı'na benzer.
Android Studio, bir Compose önizlemesinde Compose kullanıcı arayüzü kontrol modunu etkinleştirdiğinizde Compose kullanıcı arayüzünüzü otomatik olarak denetler ve kullanıcı arayüzünüzü daha erişilebilir ve uyarlanabilir hale getirmek için iyileştirmeler önerir. Android Studio, kullanıcı arayüzünüzün farklı ekran boyutlarında çalıştığını kontrol eder. Araç, Sorunlar panelinde algıladığı sorunları (ör. büyük ekranlarda metnin uzaması veya düşük renk kontrastı) gösterir.
Bu özelliğe erişmek için Oluşturma Önizlemesi'nde kullanıcı arayüzü kontrolü simgesini tıklayın:
Kullanıcı arayüzü kontrolü, kullanıcı arayüzünüzün farklı yapılandırmalardaki önizlemesini otomatik olarak gösterir ve farklı yapılandırmalarda bulunan sorunları vurgular. Sorunlar panelinde bir sorunu tıkladığınızda sorunun ayrıntılarını, önerilen düzeltmeleri ve sorunun bulunduğu alanı vurgulayan oluşturma işlemlerini görebilirsiniz.
Yapay zeka ile düzeltme
Kullanıcı arayüzü kontrolü modunda tespit edilen sorunlar için yapay zeka aracısını kullanarak kod düzeltmeleri önerebilir ve uygulayabilirsiniz. Sorunlar panelindeki bir sorunda Yapay zeka ile düzelt düğmesini tıklayın. Ajan, erişilebilirlik veya uyarlanabilirlik sorununu çözmek için değişiklik önerisinde bulunmak üzere sorunu ve kodunuzu analiz eder.
