Android Academy · Ders

Yer Tutucular ve Hata Durumları

Yükleme ve başarısızlıkları zarif biçimde yönetin.

Yer Tutucular ve Hata Durumları, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 2. 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.

Yükleme Anında Gerçekleşmez

Ağ görüntülerinin yüklenmesi zaman alır. Bu aralıkta, siz ilgilenmezseniz arayüzünüz... hiçbir şey göstermez. Bazen görüntü hiç ulaşmaz: URL bozuktur, sunucu çalışmıyordur veya kullanıcı çevrimdışıdır.

Özenli bir uygulama, yükleme sırasında bir yer tutucu, bir şeyler başarısız olduğunda ise boş bir alan veya çökme yerine bir yedek görüntü gösterir. Coil her ikisini de kolaylaştırır.

Bu derste yer tutucular, hata görüntüleri ve her duruma özel arayüzler ekleyeceksiniz.

Basit Bir Yer Tutucu

Yer tutucu eklemenin en hızlı yolu, painterResource kullanarak placeholder parametresi üzerinden AsyncImage'e bir çizilebilir kaynak geçirmektir. Coil, gerçek görüntünün yüklenmesi tamamlanana kadar bunu gösterir.

Gri bir kutu veya logo silüeti gibi nötr ve hafif bir çizilebilir kaynak kullanın.

import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import coil3.compose.AsyncImage

@Composable
fun ImageWithPlaceholder(url: String) {
    AsyncImage(
        model = url,
        contentDescription = null,
        placeholder = painterResource(R.drawable.placeholder_gray)
    )
}

Hata Görüntüsü Ekleme

error parametresi, istek başarısız olduğunda bir yedek çizilebilir kaynak gösterir. Ayrıca özellikle model null olduğunda (yüklenecek hiç veri olmadığında) kullanılan fallback da vardır.

Üçünü de (placeholder, error ve fallback) ayarlamak, neredeyse hiç kod yazmadan her görsel durumu kapsar.

import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import coil3.compose.AsyncImage

@Composable
fun RobustImage(url: String?) {
    AsyncImage(
        model = url,
        contentDescription = null,
        placeholder = painterResource(R.drawable.placeholder_gray),
        error = painterResource(R.drawable.image_broken),
        fallback = painterResource(R.drawable.no_image)
    )
}

ImageRequest ile Yer Tutucu

Bu durumları doğrudan ImageRequest üzerinde de ayarlayabilirsiniz. İsteği bir kez oluşturup yeniden kullandığınızda veya aynı anda başka istek seçeneklerine ihtiyaç duyduğunuzda bu yöntem kullanışlıdır.

İstek düzeyindeki işlevler, çizilebilir kaynak kimliklerini alır.

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

fun buildRequest(context: Context, url: String) =
    ImageRequest.Builder(context)
        .data(url)
        .crossfade(true)
        .placeholder(R.drawable.placeholder_gray)
        .error(R.drawable.image_broken)
        .build()

SubcomposeAsyncImage ile Özel Arayüz

Çizilebilir kaynaklar yeterlidir; ancak bazen her durum için bir döndürücü, parıltı veya metin göstermek istersiniz. SubcomposeAsyncImage, loading, error ve success için gerçek composable'lar sağlamanıza izin verir.

Daha esnektir ancak biraz daha ağırdır; bu nedenle uzun listelerde çizilebilir yer tutucuları tercih edin ve subcompose'u öne çıkan görüntüler için kullanın.

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

@Composable
fun HeroImage(url: String) {
    SubcomposeAsyncImage(
        model = url,
        contentDescription = "Hero",
        loading = { CircularProgressIndicator() },
        error = { Text("Could not load image") }
    )
}

Durumu Doğrudan Okuma

Tam denetim için rememberAsyncImagePainter API'sini kullanın ve state değerini inceleyin. Durum, Loading, Success, Error ve Empty durumlarına sahip mühürlü bir türdür.

Bu sayede kendi yerleşiminizi, animasyonlarınızı veya analizlerinizi gerçekleşen duruma göre yönlendirebilirsiniz.

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import coil3.compose.AsyncImagePainter
import coil3.compose.rememberAsyncImagePainter

@Composable
fun StateAwareImage(url: String) {
    val painter = rememberAsyncImagePainter(model = url)
    val state = painter.state.collectAsState().value

    when (state) {
        is AsyncImagePainter.State.Loading -> { /* show spinner */ }
        is AsyncImagePainter.State.Error -> { /* show error UI */ }
        else -> Image(painter = painter, contentDescription = null)
    }
}

Parıltılı Yer Tutucu Gösterme

Yaygın bir kalıp parıltıdır: içeriğin gelmekte olduğunu hissettiren animasyonlu gri bir gradyan. Yükleme durumu arkasında düz renkli bir kutuyla basit bir sürüm oluşturabilirsiniz.

Burada yükleme sırasında renk tonlanmış bir kutuyla SubcomposeAsyncImage kullanıyoruz. Animasyonlu efekt istiyorsanız kutuyu bir parıltı kitaplığıyla değiştirin.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import coil3.compose.SubcomposeAsyncImage

@Composable
fun ShimmerImage(url: String) {
    SubcomposeAsyncImage(
        model = url,
        contentDescription = null,
        loading = {
            androidx.compose.foundation.layout.Box(
                Modifier.fillMaxSize()
                    .background(MaterialTheme.colorScheme.surfaceVariant)
            )
        }
    )
}

Null veya Boş Modeli İşleme

Henüz bir URL'niz yoksa, örneğin profil resmi olmayan bir kullanıcı söz konusuysa ne olur? null değerini model olarak geçirmek, fallback çizilebilir kaynağını tetikler (fallback ayarlanmamışsa error kullanılır).

Bu, kendi kodunuzda null için özel durum yazma gereğini ortadan kaldırır; varsayılan avatarı Coil'in göstermesine izin verin.

import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import coil3.compose.AsyncImage

@Composable
fun ProfilePicture(photoUrl: String?) {
    // If photoUrl is null, Coil shows the fallback default avatar.
    AsyncImage(
        model = photoUrl,
        contentDescription = "Profile picture",
        fallback = painterResource(R.drawable.default_avatar),
        error = painterResource(R.drawable.default_avatar)
    )
}

Listener ile Hataları Dinleme

Bazen bir yükleme başarısız olduğunda kod içinde tepki vermeniz gerekir; örneğin hatayı kaydetmek veya yeniden denemek isteyebilirsiniz. ImageRequest.Builder, başarı ve hata geri çağırmalarına sahip bir listener kabul eder.

Bu geri çağırmaları hafif tutun; ana iş parçacığında çalışırlar.

import android.content.Context
import android.util.Log
import coil3.request.ImageRequest

fun loggedRequest(context: Context, url: String) =
    ImageRequest.Builder(context)
        .data(url)
        .listener(
            onError = { _, result ->
                Log.e("Coil", "Load failed", result.throwable)
            },
            onSuccess = { _, _ ->
                Log.d("Coil", "Loaded $url")
            }
        )
        .build()

Renk Tonlama ve Renk Filtreleri

Yer tutucu ve hata çizilebilir kaynakları, temanıza uyacak şekilde renk tonlandığında genellikle daha iyi görünür. Bir AsyncImage'e ColorFilter uygulayabilirsiniz; bu, açık ve koyu moda uyum sağlaması gereken tek renkli, simge tarzı yedek görüntüler için idealdir.

Filtreyi yalnızca istediğiniz yer tutucu veya hata görünümüne uygulayın; gerçek fotoğraflarda genellikle filtreyi kapalı bırakırsınız.

import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.painterResource
import coil3.compose.AsyncImage

@Composable
fun TintedFallback(url: String?) {
    AsyncImage(
        model = url,
        contentDescription = null,
        error = painterResource(R.drawable.ic_image_placeholder),
        colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurfaceVariant)
    )
}

Dayanıklı Bir Görüntü Bileşeni

Her durumu düzgünce ele alan yeniden kullanılabilir bir bileşen oluşturalım: yükleme arka planı, hata yedeği, crossfade ve kırpma. Bunu bir listeye eklediğinizde artık boş alanlar konusunda endişelenmeniz gerekmez.

import androidx.compose.foundation.layout.size
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.res.painterResource
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade

@Composable
fun ResilientImage(url: String?, size: Int = 96) {
    val context = LocalContext.current
    AsyncImage(
        model = ImageRequest.Builder(context)
            .data(url)
            .crossfade(true)
            .build(),
        contentDescription = null,
        contentScale = ContentScale.Crop,
        placeholder = painterResource(R.drawable.placeholder_gray),
        error = painterResource(R.drawable.image_broken),
        fallback = painterResource(R.drawable.default_avatar),
        modifier = Modifier.size(size.dp)
    )
}

Hızlı Kontrol

model = null değerini AsyncImage öğesine geçiriyorsunuz. Coil varsayılan olarak hangi çizilebilir öğeyi gösterir?

Özet

Görsellerin yüklenmesini sorunsuz hâle getirdiniz. Önemli noktalar:

placeholder yükleme sırasında, error başarısızlık durumunda, fallback ise model null olduğunda gösterilir.
Bunları AsyncImage üzerinde veya ImageRequest içinde ayarlayabilirsiniz.
SubcomposeAsyncImage, her durum için gerçek birleştirilebilir bileşenler (yükleniyor göstergesi, parlama animasyonu) sağlamanıza olanak tanır.
rememberAsyncImagePainter, tam denetim için ham state değerini sunar.
Yükleme sonuçlarını günlüğe kaydetmek veya bunlara tepki vermek için istek listener'ını kullanın.

Sırada önbelleğe alma ve performans var; böylece görseller ikinci seferde anında yüklenir.

Sıkça Sorulan Sorular

“Yer Tutucular ve Hata Durumları” dersi ücretsiz mi?

Evet — “Yer Tutucular ve Hata Durumları” 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.

“Yer Tutucular ve Hata Durumları” dersinde ne öğreneceğim?

Yükleme ve başarısızlıkları zarif biçimde yönetin. 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 2. dersidir.

“Yer Tutucular ve Hata Durumları” 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