Compose kullanıcı arayüzünüzde hata ayıklama araçları Android Studio'da mevcuttur.
Layout Inspector
Layout Inspector, emülatörde veya fiziksel cihazda çalışan bir uygulamadaki 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 sayede uygulamanızla ilgili sorunları tespit edebilirsiniz. Örneğin, bazı kodlama hataları kullanıcı arayüzünüzü aşırı şekilde yeniden oluşturmaya zorlayabilir ve bu da 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. Layout Inspector'ı kullanmaya yeni başladıysanız nasıl çalıştırılacağıyla ilgili kılavuzu inceleyin.
Yeniden oluşturma sayılarını alma
Oluşturma düzenlerinizde hata ayıklarken, kullanıcı arayüzünüzün doğru şekilde uygulanıp uygulanmadığını anlamak için composable'ların ne zaman yeniden oluşturulduğunu bilmek önemlidir. Örneğin, çok fazla kez yeniden oluşturuluyorsa uygulamanız gereğinden fazla işlem yapıyor olabilir. Öte yandan, beklediğiniz zaman 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 ne zaman yeniden oluşturulduğunu veya atlandığını gösterir. Android Studio'da, composable'larınızın kullanıcı arayüzünün neresinde 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ım, Layout Inspector'ın resim bölümünde composable'ın gradyan yer paylaşımını gösterir ve en yüksek yeniden oluşturma sayısına sahip composable'ın kullanıcı arayüzünde nerede bulunabileceği hakkında fikir edinmeniz için kademeli olarak kaybolur. Bir composable, başka bir composable'dan daha yüksek bir oranda yeniden oluşturuluyorsa ilk composable daha güçlü bir gradyan yer paylaşımı rengi alır. Layout Inspector'da 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ütun her bir düğüm için oluşturma sayısını, ikinci sütun ise her bir düğüm için atlama sayısını gösterir. Bir composable düğüm seçildiğinde, satır içi işlev olmadığı sürece composable'ın boyutları ve parametreleri gösterilir. Satır içi işlev olduğunda parametreler gösterilemez. Bileşen Ağacı veya Düzen Görüntüleme'den bir composable seçtiğinizde Özellikler bölmesinde de benzer bilgileri görebilirsiniz.
Sayıyı sıfırlamak, uygulamanızla belirli bir etkileşim sırasında yeniden oluşturma veya atlama işlemlerini anlamanıza yardımcı olabilir. Sayıyı 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 oluşturma ve atlama sayacını etkinleştirin.
Compose semantiği
Compose'da Semantics, kullanıcı arayüzünüzü Erişilebilirlik hizmetleri ve Test çerçevesi tarafından anlaşılabilir alternatif bir şekilde açıklar. Oluşturma düzenlerinizdeki semantik bilgileri incelemek için Layout Inspector'ı kullanabilirsiniz.
Bir Compose düğümü seçerken doğrudan semantik bilgi beyan edip etmediğini, alt öğelerinden semantik bilgileri birleştirip birleştirmediğini veya her ikisini birden yapıp yapmadığını kontrol etmek için Özellikler panelini kullanın. Bildirilen veya birleştirilen semantiklerin hangi düğümlerde bulunduğunu hızlıca belirlemek için Bileşen Ağacı bölmesindeki Görüntüleme seçenekleri açılır listesini ve ardından Semantik Katmanları Vurgula'yı seçin. Bu işlem, ağaçta yalnızca semantik içeren düğümleri vurgular. Klavyenizi kullanarak bu düğümler arasında hızlıca gezinebilirsiniz.
Compose Kullanıcı Arayüzü Kontrolü
Android Studio, Jetpack Compose'da daha uyarlanabilir ve erişilebilir kullanıcı arayüzleri oluşturmanıza yardımcı olmak için Oluşturma Önizlemesi'nde bir kullanıcı arayüzü kontrol modu sunar. Bu özellik, görünümler için Erişilebilirlik Tarayıcısı'na benzer.
Oluşturma önizlemesinde Oluşturma kullanıcı arayüzü kontrol modunu etkinleştirdiğinizde Android Studio, Oluşturma 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ışıp çalışmadığını kontrol eder. Araç, Sorunlar panelinde algıladığı sorunları (ör. büyük ekranlarda uzatılmış metin veya düşük renk kontrastı) gösterir.
Bu özelliğe erişmek için Oluşturma Önizlemesi'ndeki Kullanıcı Arayüzü Kontrolü simgesini tıklayın:
Kullanıcı arayüzü kontrolü, kullanıcı arayüzünüzü farklı yapılandırmalarda otomatik olarak önizler 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 görüntüleri görebilirsiniz.
Yapay zeka ile düzelt
Kullanıcı arayüzü kontrolü modunda tespit edilen sorunlar için yapay zeka temsilcisini kullanarak kod düzeltmeleri önerebilir ve uygulayabilirsiniz. Sorunlar panelindeki bir sorunda Yapay zeka ile düzelt düğmesini tıklayın. Temsilci, sorunu ve kodunuzu analiz ederek erişilebilirlik veya uyarlanabilirlik sorununu çözecek değişiklikler önerir.
