Android Jetpack Compose – Coil Compose Kullanımı

Bu makalemizin konusu Jetpack Compose üzerinde resimleri internet üzerinden çekip, Image nesnesi üzerinde nasıl gösterebileceğimiz ile alakalıdır.

Accompanist Glide ve Accompanist Coil kütüphanelerinin deprecated olması ile birlikte Accompanist yeni kullanıcıları https://coil-kt.github.io/coil/compose/ adresindeki kütüphaneye yönlendiriyor.

Peki nedir bu Coil library ?

Android için Kotlin Coroutines tarafından desteklenen bir görüntü yükleme kütüphanesi. Coil:

• Hızlıdır: Coil bellek ve disk önbellekleme, bellekteki görüntüyü alt-örnekleme, biteşlemlerin tekrar kullanımı, isteklerin otomatik olarak durdurulması/iptali ve daha fazlasını içeren pek çok sayıda optimizasyon gerçekleştirir.
• Hafiftir: Coil, APK’nıza Picasso ile benzer ve Glide ve Fresco’dan önemli ölçüde daha az sayıda, 2000 civarında metod ekler.(Halihazırda OkHttp ve Coroutines kullanan uygulamalar için)
• Kullanımı kolaydır: Coil’in API’si basitlik ve mininum basmakalıp için Kotlin’in dil özelliklerini sonuna kadar kullanır.
• Moderndir: Coil Kotlin-önceliklidir ve Coroutines, OkHttp, Okio ve AndroidX Lifecycles gibi modern kütüphaneleri kullanır.

Coil şunların baş harflerinden oluşur: Coroutine Image Loader.

Coil‘i mavenCentral() repository’sinden indirebilirsiniz;

implementation("io.coil-kt:coil:2.1.0")

Coil’i klasik yöntem ile ImageView nesnesinde de kullanabilirsiniz.

// URL
imageView.load("https://www.example.com/image.jpg")

// Resource
imageView.load(R.drawable.image)

// File
imageView.load(File("/path/to/image.jpg"))

// Ve daha fazlası...

Jetpack Compose projemizde Coil‘i kullanabilmek için, ilgili kütüphaneyi projemize dahil edelim;

implementation("io.coil-kt:coil-compose:2.1.0")

Örnek kodumuz;

Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                    ) {
                    AsyncImage(
                        model = ImageRequest.Builder(LocalContext.current)
                            .data("https://play-lh.googleusercontent.com/rRCR6DrB78lHc996FSHzjdh9Xt3cMaZEWc-sAKwE0_9bkF3kCrCCupEoKDmlr1W0nAch")
                            .crossfade(true)
                            .build(),
                        placeholder = painterResource(R.drawable.ic_launcher_background),
                        contentDescription = "",
                        contentScale = ContentScale.Crop,
                        modifier = Modifier
                            .clip(CircleShape)
                            .width(250.dp)
                            .height(250.dp)
                    )
}

AsyncImage haricinde SubcomposeAsyncImage sınıfı da bulunmaktadır. Bu sınıf sayesinde resim yüklenirken loading animasyonu döndürebilirsiniz.

Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                    ) {
                    SubcomposeAsyncImage(
                        model = ImageRequest.Builder(LocalContext.current)
                            .data("https://github.com/google/accompanist/raw/main/docs/header.png")
                            .crossfade(true)
                            .build(),
                        loading = {
                            CircularProgressIndicator()
                        },
                        contentDescription = "",
                        contentScale = ContentScale.Crop,
                        modifier = Modifier
                            .clip(CircleShape)
                            .width(250.dp)
                            .height(250.dp)
                    )
}

SubcomposeAsyncImage, daha önce cache edilmiş image url’in contentini göstereceğinden dolayı loading animasyonunu göstermeyecektir.

İyi çalışmalar dilerim.