Android Academy · Pelajaran

Memuatkan Imej dengan Coil

Pemuatan imej tak segerak dalam Compose.

Pelajaran 1 daripada 413 langkah

Memuatkan Imej dengan Coil ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Android Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Mengapa Anda Memerlukan Pemuat Imej

Kebanyakan aplikasi moden memaparkan imej dari internet: foto profil, gambar produk dan imej kecil artikel. Memuat turun dan menyahkod imej tersebut dengan betul lebih sukar daripada yang kelihatan.

Anda perlu mendapatkan bait melalui rangkaian dalam jalur latar belakang, menyahkodnya menjadi bitmap, menyimpannya dalam cache supaya tidak perlu mendapatkannya semula, serta membatalkan permintaan jika pengguna menatal menjauhinya. Melakukan semua ini secara manual mudah menyebabkan ralat.

Coil (Coroutine Image Loader) mengendalikan semua ini untuk anda dengan API kecil yang mesra Compose. Dalam pelajaran ini, anda akan memuatkan imej jauh yang pertama.

Menambahkan Coil pada Projek Anda

Coil disediakan sebagai kebergantungan Gradle. Untuk Jetpack Compose, anda memerlukan artifak coil-compose, yang menyediakan komponen boleh gubah AsyncImage.

Tambahkannya pada build.gradle.kts modul anda. Coil 3 ialah versi utama semasa dan berfungsi merentas platform; penyepaduan Compose ialah perkara yang digunakan di sini.

// 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")
}

Kebenaran Internet

Untuk memuat turun imej daripada URL, aplikasi anda memerlukan kebenaran INTERNET. Ini ialah kebenaran biasa (semasa pemasangan), jadi anda hanya perlu mengisytiharkannya dalam manifes. Tiada gesaan semasa masa jalan.

Tanpanya, setiap permintaan rangkaian akan gagal dengan pengecualian keselamatan.

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

AsyncImage Pertama Anda

Cara paling mudah untuk memaparkan imej jauh dalam Compose ialah AsyncImage. Berikan nilai model (biasanya rentetan URL) dan contentDescription, kemudian Coil akan mengendalikan selebihnya: mendapatkan data di latar belakang, menyahkod dan memaparkan imej.

Ia menggunakan rutin korutin yang terikat pada gubahan secara automatik, jadi permintaan dibatalkan jika komponen boleh gubah meninggalkan skrin.

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: Cara Imej Disesuaikan

Imej jarang sepadan dengan saiz tepat ruang reka letak anda. ContentScale mengawal cara bitmap diskalakan dalam sempadannya.

ContentScale.Crop memenuhi kotak dan memangkas lebihan (sesuai untuk avatar dan imej kecil).
ContentScale.Fit memastikan keseluruhan imej kelihatan, tetapi mungkin meninggalkan ruang kosong.
ContentScale.FillBounds meregangkan imej untuk memenuhi ruang (boleh menyebabkan herotan).

Crop ialah pilihan yang paling lazim untuk ruang bersaiz tetap.

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)
    )
}

Membina Permintaan dengan ImageRequest

Memberikan rentetan URL ialah cara pantas. Untuk kawalan yang lebih menyeluruh, bina ImageRequest. Dengan ini, anda boleh menetapkan pilihan seperti crossfade, pengepala, transformasi dan kunci cache.

Anda memerlukan Context, yang disediakan oleh Compose melalui LocalContext.current.

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"
    )
}

Crossfade untuk Pemuatan Lancar

Secara lalai, imej muncul serta-merta apabila selesai dimuatkan, yang mungkin terasa mengejutkan. crossfade(true) memudarkan imej masuk melalui animasi singkat.

Anda juga boleh memberikan tempoh dalam milisaat untuk pemudaran yang lebih perlahan atau lebih pantas. Sentuhan kecil ini menjadikan senarai kelihatan lebih kemas.

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()

Memuatkan daripada Sumber Berbeza

model dalam AsyncImage adalah fleksibel. Coil boleh memuatkan pelbagai jenis sumber, bukan URL jauh sahaja:

String atau Uri untuk fail rangkaian atau fail setempat.
ID sumber boleh lukis (R.drawable.logo).
File daripada peranti.
Uri kandungan daripada pemilih foto.

Ini bermakna komponen boleh gubah yang sama boleh mengendalikan imej jauh dan setempat dengan lancar.

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"))

Memberi Respons kepada Keadaan Pemuatan

Kadang-kadang anda perlu mengetahui sama ada imej sedang dimuatkan, berjaya atau gagal supaya anda boleh memaparkan UI yang berbeza. AsyncImagePainter mendedahkan keadaan tersebut, tetapi pendekatan paling mudah ialah SubcomposeAsyncImage, yang membolehkan anda menyediakan kandungan bagi setiap keadaan.

Kita akan mendalami ruang letak sementara dalam pelajaran seterusnya; buat masa ini, inilah bentuk pemuatan yang peka terhadap keadaan.

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() }
    )
}

Pembatalan Disediakan Secara Automatik

Salah satu kelebihan terbesar Coil ialah pembatalan automatik. Oleh sebab AsyncImage melancarkan permintaannya dalam gubahan, apabila komponen boleh gubah meninggalkan skrin, contohnya satu baris menatal keluar daripada LazyColumn, permintaan yang sedang berjalan akan dibatalkan.

Ini menjimatkan lebar jalur dan CPU serta mengelakkan kerja yang sia-sia. Anda tidak perlu menulis kod pembatalan sendiri, sebab itulah Coil boleh diskalakan dengan baik dalam senarai panjang.

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)
            )
        }
    }
}

Kad Imej Lengkap

Mari gabungkan perkara yang telah dipelajari: kad dengan imej jauh yang memenuhi bahagian atas, menggunakan crossfade dan memangkas imej kepada ketinggian tetap. Inilah pola asas yang akan anda gunakan semula berulang kali.

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))
        }
    }
}

Semakan Pantas

Komponen boleh gubah manakah daripada coil-compose yang merupakan cara paling mudah untuk memaparkan imej jauh melalui URL dalam Jetpack Compose?

Jawab dalam pelajaran interaktif

Ulang Kaji

Anda telah memuatkan imej jauh pertama dengan Coil. Perkara utama:

Tambah coil-compose dan kebergantungan rangkaian OkHttp, serta kebenaran INTERNET.
AsyncImage(model = url, contentDescription = ...) ialah cara pantas.
Gunakan ContentScale.Crop dengan saiz tetap untuk avatar dan imej kecil.
Bina ImageRequest untuk crossfade dan kawalan yang lebih menyeluruh.
Coil membatalkan permintaan yang sedang berjalan secara automatik apabila komponen boleh gubah meninggalkan skrin.

Seterusnya: menjadikan pemuatan lebih lancar dengan ruang letak sementara dan keadaan ralat.

Percuma untuk bermula

Pelajari Kotlin dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 36
Pelajaran: 152

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Memuatkan Imej dengan Coil” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “Memuatkan Imej dengan Coil”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Memuatkan Imej dengan Coil”?

Pemuatan imej tak segerak dalam Compose. Anda berlatih Android Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Android Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Android Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Memuatkan Imej dengan Coil” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy