Coil 图像加载库使用指南

Coil 是一个专为 Android 和 Jetpack Compose 设计的高效图像加载库。它利用 Kotlin 协程和 Okio 提供快速、轻量且易用的图像加载解决方案。支持内存缓存、磁盘缓存、图像下采样以及请求生命周期管理等功能。

快速入门

添加依赖

在项目 build.gradle 中添加以下依赖：

repositories {
    mavenCentral()
}

dependencies {
    implementation("io.coil-kt:coil:2.7.0")
}

基础用法

Jetpack Compose 中使用

在 Compose 应用中，首先导入扩展库：

dependencies {
    implementation("io.coil-kt:coil-compose:2.7.0")
}

然后在 Composable 函数中使用：

import coil.compose.AsyncImage

@Composable
fun DisplayImage() {
    AsyncImage(
        model = "https://example.com/image.jpg",
        contentDescription = "示例图片"
    )
}

ImageView 中使用

在布局文件中定义 ImageView：

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

在代码中加载图像：

import coil.ImageLoader
import coil.request.ImageRequest

val imageView = findViewById<ImageView>(R.id.imageView)
val request = ImageRequest.Builder(this)
    .data("https://example.com/image.jpg")
    .target(imageView)
    .build()
ImageLoader(this).enqueue(request)

实际应用与最佳实践

案例一：用户头像加载

在用户列表中动态加载头像：

data class User(val avatarUrl: String, val name: String)

@Composable
fun UserList(users: List<User>) {
    Column {
        users.forEach { user ->
            AsyncImage(
                model = user.avatarUrl,
                contentDescription = user.name
            )
        }
    }
}

案例二：加载 GIF 和 SVG

添加扩展依赖：

dependencies {
    implementation("io.coil-kt:coil-gif:2.7.0")
    implementation("io.coil-kt:coil-svg:2.7.0")
}

加载 GIF：

@Composable
fun DisplayGif() {
    AsyncImage(
        model = "https://example.com/image.gif",
        contentDescription = "动态图片"
    )
}

加载 SVG：

@Composable
fun DisplaySvg() {
    AsyncImage(
        model = "https://example.com/image.svg",
        contentDescription = "矢量图片"
    )
}

典型生态整合

Jetpack Compose

Coil 提供专门的 Compose 组件 AsyncImage，简化了图像加载流程。

OkHttp

Coil 内部使用 OkHttp 处理网络请求，提供高效的请求和缓存机制。

Kotlin Coroutines

基于 Kotlin 协程实现异步加载，确保主线程不被阻塞。