Jetpack Compose Basics Network Image Loading

Kerim Bora
Appcent
Published in
3 min readMar 28, 2024

--

Android geliştirme dünyasında Jetpack Compose, modern ve reaktif kullanıcı arayüzleri oluşturmak için devrim niteliğinde bir araç olarak öne çıkıyor. Geliştiriciler bu yeni döneme adapte olurken, network üzerinden görsel yüklemeyi etkin bir şekilde yönetmek büyük önem taşıyor. Bu ihtiyaca yanıt olarak Landscapist kütüphanesi, Jetpack Compose için özel olarak tasarlanmış ve network resimlerini sorunsuz bir şekilde entegre etmeyi mümkün kılan bir çözüm sunuyor. Glide, Coil ve Fresco gibi popüler resim yükleme kütüphanelerini kullanarak, geliştiricilerin uygulamalarına ileri düzey resim yükleme yetenekleri, animasyonlar ve efektler eklemelerine olanak tanıyor.

Landscapist Kütüphanesinin Farkı Nedir

Landscapist, Glide, Coil ve Fresco gibi popüler resim yükleme kütüphanelerinden farklı olarak, Jetpack Compose ile doğrudan entegre edilmiş, çok yönlü bir resim yükleme çözümü sunar. Bu kütüphaneleri tek bir çatı altında birleştirerek, geliştiricilere sorunsuz bir resim yükleme deneyimi sağlar. Landscapist, Jetpack Compose’da görüntü yükleme performansını optimize etmek için titizlikle hazırlanmıştır. İçerdiği Composable’ ların çoğu Restartable ve Skippable olarak işaretlenmiştir. Ayrıca, Baseline Profiller uygulanmasıyla kütüphanenin performansı daha da artırılmıştır.

Landscapist, Jetpack Compose’daki görüntü yüklemelerinin performansını artırmak için çok fazla dikkate alınarak oluşturulmuştur. Ayrıca, kütüphane performansı Baseline Profiller ile geliştirildi ve ImageOptions, listener image changer, custom composable, Android Studio’da previews, ImageComponent ve ImagePlugin, placeholders, animasyonlar (circular reveal, crossfade,) transformation (blur) ve palette gibi birçok özelliği destekliyor.

Landscapist — Glide

Landscapist’in Glide entegrasyonu, Jetpack Compose ile Glide kütüphanesini kullanarak resim yüklemeyi kolaylaştırır.

implementation

Aşağıdaki kodu build.gradle(module) dosyasına ekleyin

allprojects {
repositories {
mavenCentral()
}
}

build.gradle(app)

dependencies {
implementation "com.github.skydoves:landscapist-glide:2.3.1"
}

Unutmayalım :)

<uses-permission android:name="android.permission.INTERNET" />

Not: Projenize ayrıca Glide kütüphanesini eklemenize gerek yoktur!

GlideImage

Aşağıdaki örnekte olduğu gibi GlideImage composable işlevini kullanarak görüntüleri kolayca yükleyebilirsiniz:

Preview of ShowImageWithGlideImage Composable

Custom Options

Landscapist kütüphanesi GlideImage composable’ nı değiştirmemize olanak sağlıyor(Modifier, ImageOptions, RequestOptions vb.);

Custom RequestListener

Görüntüler yüklenirken bir isteğin durumunu izlemenize olanak tanıyan kendi RequestListener’ınızı kaydedebilirsiniz.

LocalGlideRequestOptions

RequestOptions’ınızın aynı instance’i, aşağıdaki örnekte olduğu gibi, oluşturulabilir CompositionLocalProvider aracılığıyla diğer composable’lara aktarabilirsiniz.

Landscapist — Coil

Landscapist’in Coil entegrasyonu, Kotlin tabanlı Coil kütüphanesinin güçlü özelliklerini Jetpack Compose ile birleştirir. Bu entegrasyon, modern Kotlin dilinin avantajlarını kullanarak, geliştiricilere Jetpack Compose içerisinde verimli ve esnek bir şekilde resim yüklemek için zengin bir araç seti sunar. Coil ile Landscapist kullanımı, ağ üzerinden resim yüklemenin yanı sıra, önbelleğe alma ve yüksek performanslı görüntü işleme işlemlerini kolaylaştırır. Daha detaylı bilgi için Landscapist Coil dokümantasyon sayfasını inceleyebilirsiniz.

implementation

build.gradle(app)

dependencies {
implementation "com.github.skydoves:landscapist-coil:2.3.1"
}

CoilImage

Aşağıdaki örnekte olduğu gibi CoilImage composable işlevini kullanarak görüntüleri kolayca yükleyebilirsiniz:

Custom ImageRequest and ImageLoader

Landscapist, Coil kullanırken ImageRequest ve ImageLoader özelleştirmesine olanak tanır. Bu esneklik, geliştiricilere özel önbellekleme stratejileri ve ağ yapılandırmaları gibi resim yükleme süreçlerini uygulamanın özel gereksinimlerine göre düzenleme imkanı verir, bu da performansı ve kullanıcı deneyimini artırır.

LocalCoilImageLoader

Landscapist, Coil kullanırken LocalCoilImageLoader sağlayarak, Jetpack Compose hiyerarşisi içinde özelleştirilmiş bir ImageLoader kullanmanıza olanak tanır.

Jetpack Compose, CompositonLocal ile ilgili daha fazla bilgi için aşağıdaki bağlantıyı ziyaret edebilirsiniz.

Coil — Animated Image Supports (GIF, Webp)

ImageLoader’ınız ile animasyonlu GIF’leri ve WebP Görüntülerini yükleyebilirsiniz.

Daha fazla bilgi ve detaylar için Landscapist dokümantasyon sayfasını inceleyebilirsiniz.

Bana Ulaşın

Aşağıdaki bağlantılardan bana ulaşabilirsiniz.

Kerim Bora
Mobile Application Developer at
Appcent

Web https://kerimbr.com
Mail dev.kerimbora@gmail.com
LinkedIn https://www.linkedin.com/in/devkerimbr
Github https://github.com/kerimbr
Medium https://dev-kerimbora.medium.com

--

--