Dikkatli olmazsanız resimlerle çalışırken hızlı bir şekilde performans sorunları yaşayabilirsiniz. Büyük bit eşlemlerle çalışırken OutOfMemoryError
ile karşılaşmanız oldukça kolaydır. Uygulamanızın en iyi performansı göstermesini sağlamak için aşağıdaki en iyi uygulamalardan yararlanın.
Yalnızca ihtiyacınız olan bitmap boyutunu yükleyin
Çoğu akıllı telefonda, büyük boyutlu resim dosyaları oluşturan yüksek çözünürlüklü kameralar bulunur. Ekranda bir resim gösteriyorsanız resmin çözünürlüğünü düşürmeniz veya resmi yalnızca resim kapsayıcınızın boyutuna kadar yüklemeniz gerekir. Gerekenden büyük resimlerin sürekli yüklenmesi GPU önbelleklerini tüketebilir ve bu da kullanıcı arayüzünün daha az performanslı şekilde oluşturulmasına neden olur.
Resim boyutlarını yönetmek için:
- Görüntü dosyalarınızı mümkün olduğunca küçük olacak şekilde ölçeklendirin (çıktı görüntüsünü etkilemeden).
- Resimlerinizi JPEG veya PNG yerine WEBP biçimine dönüştürmeyi düşünebilirsiniz.
- Farklı ekran çözünürlükleri için daha küçük resimler sağlayın (3. İpucu'na bakın).
- Resminizi ekrandaki görünümünüzün boyutuna sığacak şekilde küçülten bir resim yükleme kitaplığı kullanın. Bu, ekranınızın yükleme performansını artırmaya yardımcı olabilir.
Mümkün olduğunda bit eşlemler yerine vektörler kullanın
Ekranda bir şeyi görsel olarak temsil ederken bunun vektör olarak temsil edilip edilemeyeceğine karar vermeniz gerekir. Farklı boyutlarda ölçeklendirdiğinizde pikselleri bozulmadığı için bit eşlemler yerine vektör resimleri tercih edin. Ancak her şey vektör olarak gösterilemez. Örneğin, kamerayla çekilen resimler vektöre dönüştürülemez.
Farklı ekran boyutları için alternatif kaynaklar sağlama
Uygulamanızla birlikte resimler gönderiyorsanız farklı cihaz çözünürlükleri için farklı boyutlarda öğeler sağlamayı düşünebilirsiniz. Bu sayede, uygulamanızın cihazlardaki indirme boyutu azaltılabilir ve daha düşük çözünürlüklü bir cihazda daha düşük çözünürlüklü bir resim yükleneceğinden performans iyileştirilebilir. Farklı cihaz boyutları için alternatif bit eşlemler sağlama hakkında daha fazla bilgi edinmek istiyorsanız alternatif bit eşlem belgelerine göz atın.
ImageBitmap
kullanırken çizim yapmadan önce prepareToDraw
işlevini çağırma
ImageBitmap
kullanırken dokuyu GPU'ya yükleme sürecini başlatmak için dokuyu gerçekten çizmeden önce ImageBitmap#prepareToDraw()
işlevini çağırın. Bu, GPU'nun dokuyu hazırlamasına ve ekranda görsel gösterme performansını artırmasına yardımcı olur. Çoğu resim yükleme kitaplığı bu optimizasyonu zaten yapar ancak ImageBitmap
sınıfıyla kendiniz çalışıyorsanız bunu aklınızda bulundurmanız gerekir.
Painter
yerine, composable'ınıza parametre olarak Int
DrawableRes
veya URL geçirmeyi tercih edin.
Resimlerle çalışmanın karmaşıklığı (örneğin, Bitmaps
için bir eşittir işlevi yazmak hesaplama açısından maliyetli olur) nedeniyle Painter
API'si açıkça Kararlı sınıfı olarak işaretlenmemiştir. Kararsız sınıflar, derleyici verilerin değişip değişmediğini kolayca çıkaramadığı için gereksiz yeniden oluşturmalara neden olabilir.
Bu nedenle, Painter
öğesini parametre olarak iletmek yerine, URL veya çizilebilir kaynak kimliğini composable'ınıza parametre olarak iletmek tercih edilir.
// Prefer this:
@Composable
fun MyImage(url: String) {
}
// Over this:
@Composable
fun MyImage(painter: Painter) {
}
Bit eşlemleri bellekte gerekenden uzun süre saklamayın.
Belleğe ne kadar çok bit eşlem yüklerseniz cihazda bellek tükenme olasılığı o kadar artar. Örneğin, ekranda büyük bir Image composable listesi yükleniyorsa büyük bir listede kaydırma yaparken belleğin boşaltıldığından emin olmak için LazyColumn
veya LazyRow
kullanın.
Büyük resimleri AAB/APK dosyanızla paketlemeyin.
Uygulama indirme boyutunun büyük olmasının en önemli nedenlerinden biri, AAB veya APK dosyası içinde paketlenmiş grafiklerdir. Gerektiğinden daha büyük resim dosyaları paketlemediğinizden emin olmak için APK analiz aracı'nı kullanın. Boyutları küçültün veya resimleri bir sunucuya yerleştirip yalnızca gerektiğinde indirmeyi deneyin.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir.
- ImageBitmap ve ImageVector {:#bitmap-vs-vector}
- Compose'da kullanıcı arayüzü durumunu kaydetme
- Jetpack Compose Aşamaları