Android Academy · Ders

Coil ile Görüntü Yükleme

Compose'ta eşzamansız görüntü yükleme.

1. ders / 413 adım

Coil ile Görüntü Yükleme, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Android Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Android Academy kursu toplamda 4 dersten oluşur.

Görüntü Yükleyiciye Neden İhtiyacınız Var

Modern uygulamaların çoğu internetten görüntüler gösterir: profil fotoğrafları, ürün görselleri ve makale küçük resimleri. Bu görüntüleri doğru biçimde indirmek ve çözümlemek göründüğünden daha zordur.

Ağ üzerinden arka plan iş parçacığında baytları almanız, bunları bitmap'e çözümlemeniz, yeniden indirmemek için önbelleğe almanız ve kullanıcı uzaklaştığında isteği iptal etmeniz gerekir. Bunları elle yapmak hataya açıktır.

Coil (Coroutine Image Loader), Compose dostu küçük bir API ile bunların tümünü sizin için yapar. Bu derste ilk uzak görüntünüzü yükleyeceksiniz.

Projenize Coil Ekleme

Coil, Gradle bağımlılığı olarak sunulur. Jetpack Compose için size AsyncImage composable'ını sağlayan coil-compose yapısını kullanmalısınız.

Bunu modülünüzün build.gradle.kts dosyasına ekleyin. Coil 3 güncel ana sürümdür ve farklı platformlarda çalışır; burada kullandığımız, Compose entegrasyonudur.

// build.gradle.kts (module level)
dependencies {
    implementation("io.coil-kt.coil3:coil-compose:3.0.4")
    implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.4")
}

İnternet İzni

Bir URL'den görüntü indirmek için uygulamanızın INTERNET iznine ihtiyacı vardır. Bu normal bir (yükleme sırasında verilen) izindir; bu nedenle izni yalnızca bildirim dosyasında tanımlarsınız. Çalışma zamanında izin istemi gösterilmez.

Bu izin olmadan her ağ isteği bir güvenlik istisnasıyla başarısız olur.

<!-- AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <application ...>
        ...
    </application>
</manifest>

İlk AsyncImage'ınız

Compose'ta uzak bir görüntü göstermenin en basit yolu AsyncImage kullanmaktır. Buna bir model (genellikle bir URL dizesi) ve bir contentDescription verin; geri kalanını Coil halleder: arka planda alma, çözümleme ve görüntüleme.

Coroutineleri composition'a bağlı olarak otomatik kullanır; bu nedenle composable ekrandan ayrılırsa istek iptal edilir.

import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun Avatar() {
    AsyncImage(
        model = "https://example.com/avatar.png",
        contentDescription = "User avatar",
        modifier = Modifier.size(96.dp)
    )
}

contentScale: Görüntünün Sığma Biçimi

Görüntüler, yerleşiminizdeki alanın tam boyutuyla nadiren eşleşir. ContentScale, bitmap'in sınırları içinde nasıl ölçeklendirileceğini denetler.

ContentScale.Crop, kutuyu doldurur ve taşan kısmı kırpar (avatarlar ve küçük resimler için idealdir).
ContentScale.Fit, görüntünün tamamını görünür tutar; bunun sonucunda boş alan kalabilir.
ContentScale.FillBounds, alanı doldurmak için görüntüyü esnetir (görüntüyü bozabilir).

Sabit boyutlu alanlar için en yaygın tercih Crop'tur.

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun CircleAvatar(url: String) {
    AsyncImage(
        model = url,
        contentDescription = "Avatar",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(80.dp)
            .clip(CircleShape)
    )
}

ImageRequest ile İstek Oluşturma

Bir URL dizesi geçirmek hızlı yoldur. Daha fazla denetim için bir ImageRequest oluşturun. Böylece crossfade, üstbilgiler, dönüşümler ve önbellek anahtarları gibi seçenekleri ayarlayabilirsiniz.

Compose'un LocalContext.current aracılığıyla sağladığı bir Context'e ihtiyacınız vardır.

import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade

@Composable
fun ProductImage(url: String) {
    val context = LocalContext.current
    val request = ImageRequest.Builder(context)
        .data(url)
        .crossfade(true)
        .build()

    AsyncImage(
        model = request,
        contentDescription = "Product photo"
    )
}

Akıcı Yüklemeler için Crossfade

Varsayılan olarak görüntü yüklenmesi tamamlandığında bir anda görünür; bu da ani hissedilebilir. crossfade(true), görüntüyü kısa bir animasyonla yavaşça görünür hâle getirir.

Daha yavaş veya hızlı bir geçiş için milisaniye cinsinden süre de verebilirsiniz. Bu küçük dokunuş, listelerin çok daha özenli görünmesini sağlar.

import coil3.request.ImageRequest
import coil3.request.crossfade
import android.content.Context

fun smoothRequest(context: Context, url: String) =
    ImageRequest.Builder(context)
        .data(url)
        .crossfade(durationMillis = 300)
        .build()

Farklı Kaynaklardan Yükleme

AsyncImage içindeki model esnektir. Coil yalnızca uzak URL'lerden değil, birçok kaynak türünden yükleme yapabilir:

Ağ veya yerel dosyalar için bir String ya da Uri.
Bir çizilebilir kaynak kimliği (R.drawable.logo).
Cihazdaki bir File.
Fotoğraf seçiciden alınan bir içerik Uri'si.

Bu, aynı composable'ın uzak ve yerel görüntüleri sorunsuz biçimde işlemesini sağlar.

import android.net.Uri
import androidx.compose.runtime.Composable
import coil3.compose.AsyncImage

@Composable
fun FlexibleImage(source: Any) {
    // source can be a URL String, a Uri, a File, or a resource id
    AsyncImage(
        model = source,
        contentDescription = null
    )
}

// Examples:
// FlexibleImage("https://example.com/pic.jpg")
// FlexibleImage(Uri.parse("content://media/external/images/1"))

Yükleme Durumuna Tepki Verme

Farklı bir arayüz gösterebilmek için bazen görüntünün yüklenip yüklenmediğini, başarılı olup olmadığını veya başarısız olduğunu bilmek istersiniz. AsyncImagePainter bu durumu sunar; ancak en basit yaklaşım, her durum için içerik sağlamanıza izin veren SubcomposeAsyncImage kullanmaktır.

Yer tutucuları bir sonraki derste daha ayrıntılı inceleyeceğiz; burada durum farkındalıklı yüklemenin temel biçimini göreceksiniz.

import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import coil3.compose.SubcomposeAsyncImage

@Composable
fun StatefulImage(url: String) {
    SubcomposeAsyncImage(
        model = url,
        contentDescription = "Photo",
        loading = { CircularProgressIndicator() }
    )
}

İptal Etme Ücretsizdir

Coil'in en büyük avantajlarından biri otomatik iptaldir. AsyncImage isteğini composition içinde başlattığı için composable ekrandan ayrıldığında (örneğin bir satır LazyColumn içinde kaydırılarak görünümden çıktığında) devam eden istek iptal edilir.

Bu, bant genişliğinden ve CPU'dan tasarruf sağlar ve boşa yapılan işleri önler. İptal kodunu kendiniz yazmazsınız; Coil'in uzun listelerde bu kadar iyi ölçeklenmesinin nedeni budur.

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun PhotoFeed(urls: List<String>) {
    LazyColumn {
        items(urls) { url ->
            AsyncImage(
                model = url,
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
            )
        }
    }
}

Eksiksiz Bir Görüntü Kartı

Öğrendiklerimizi birleştirelim: üst kısmı dolduran, crossfade kullanan ve sabit bir yüksekliğe kırpan uzak görüntü içeren bir kart. Bu, tekrar tekrar kullanacağınız temel kalıptır.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade

@Composable
fun ImageCard(title: String, imageUrl: String) {
    val context = LocalContext.current
    Card(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
        Column {
            AsyncImage(
                model = ImageRequest.Builder(context)
                    .data(imageUrl)
                    .crossfade(true)
                    .build(),
                contentDescription = title,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxWidth().height(180.dp)
            )
            Text(text = title, modifier = Modifier.padding(16.dp))
        }
    }
}

Hızlı Kontrol

Jetpack Compose'ta bir URL'den uzak görüntü göstermenin en basit yolu olan coil-compose composable'ı hangisidir?

İnteraktif derste cevapla

Özet

İlk uzak görüntülerinizi Coil ile yüklediniz. Önemli noktalar:

coil-compose ve bir OkHttp ağ bağımlılığının yanı sıra INTERNET iznini ekleyin.
AsyncImage(model = url, contentDescription = ...) hızlı yoldur.
Avatarlar ve küçük resimler için sabit boyutla birlikte ContentScale.Crop kullanın.
Crossfade ve daha fazla denetim için bir ImageRequest oluşturun.
Coil, composable'lar ekrandan ayrıldığında devam eden istekleri otomatik olarak iptal eder.

Sırada: yer tutucular ve hata durumlarıyla yüklemeyi daha zarif hâle getirmek var.

Başlamak ücretsiz

Yapay zeka eğitmeniyle Kotlin öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 36
Dersler: 152

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Coil ile Görüntü Yükleme” dersi ücretsiz mi?

Evet — “Coil ile Görüntü Yükleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Android Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Android Academy kursu toplamda 4 dersten oluşur.

“Coil ile Görüntü Yükleme” dersinde ne öğreneceğim?

Compose'ta eşzamansız görüntü yükleme. Android Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Android Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Android Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Coil ile Görüntü Yükleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Android Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Android Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Android Academy Sayfasına Dön