Accompanist组件库中文指南 - Glide 篇

Posted 2021-06-28 清风Coolbreeze

概述

该库提供了简单易用的 Painter，它可以使用 Glide 图像加载库获取并显示外部图像（例如网络图像等）。

⚠️ 小提示：若非必要，建议使用 Coil。 Coil 是基于 Kotlin协程实现的，这就意味着它可以更好地与 Jetpack Compose 集成，因为后者也大量地使用了协程。

rememberGlidePainter()

主要 API rememberGlidePainter() 的最简单用法如下：

import androidx.compose.foundation.Image
import com.google.accompanist.glide.rememberGlidePainter

Image(
    painter = rememberGlidePainter(
        request = "https://picsum.photos/300/300",
        previewPlaceholder = R.drawable.placeholder
    ),
    contentDescription = stringResource(R.string.image_content_desc)
)

painter使用 Glide 加载传入的数据，然后绘制结果图像。

开发者也可以通过 requestBuilder 参数来自定义 Glide 的RequestBuilder。

淡入动画

该库内置支持图像加载过程中的淡入动画。

rememberGlidePainter 的函数参数 fadeIn:Boolean 默认为 false，当 fadeIn = true 时，一个默认的淡入动画将出现在图片成功加载过程中。

import androidx.compose.foundation.Image
import com.google.accompanist.glide.rememberGlidePainter

Image(
    painter = rememberGlidePainter(
        "https://picsum.photos/300/300",
        fadeIn = true
    ),
    contentDescription = stringResource(R.string.image_content_desc),
)

自定义内容

有时开发者可能希望在图片加载时显示占位图片或者在图片加载失败时显示失败提示图片，rememberGlidePainter() 返回的 painter 是一个 LoadPainter 实例，ImageLoadState 有四种状态：Empty、Loading、Success 和 Error，分别对应着初始状态、加载状态、加载成功和加载失败。开发者可以根据需要显示不同的内容：

val painter = rememberGlidePainter("https://picsum.photos/300/300")
Box {
    Image(
        painter = painter,
        contentDescription = stringResource(R.string.image_content_desc),
    )

    when (painter.loadState) {
        is ImageLoadState.Loading -> {
            // Display a circular progress indicator whilst loading
            CircularProgressIndicator(Modifier.align(Alignment.Center))
        }
        is ImageLoadState.Error -> {
            // If you wish to display some content if the request fails
        }
    }
}

预览

为了支持 Android Studio 的 Composable Previews 功能，开发者可以通过 previewPlaceholder 参数传入一个图片资源 ID ，以便 Android Studio 预览布局时有图片展示：

Image(
    painter = rememberGlidePainter(
        request = "https://picsum.photos/300/300",
        previewPlaceholder = R.drawable.placeholder,
    ),
    contentDescription = stringResource(R.string.image_content_desc),
)

如果引用的 drawable 仅用于 previewPlaceholder，则可以将其放置在 debug 构建变体的资源中，例如：app/debug/res/drawable/，通过这种操作将 drawable 捆绑在调试版本中，同时也将其排除至发布版本外。

GIF

Accompanist Glide 通过 Glide 内置 GIF 支持实现 GIF 图片加载。默认支持，无需额外配置。

观察加载状态变化

开发者可以使用 snapshotFlow() 来观察 painter.loadState的变化情况，以此实现对图片加载状态的监听，然后根据需要调整代码逻辑：

val painter = rememberGlidePainter("https://image.url")

LaunchedEffect(painter) {
    snapshotFlow { painter.loadState }
        .filter { it.isFinalState() }
        .collect { result ->
            // TODO do something with result
        }
}

Image(painter = painter)

自定义 RequestManager

如果开发者希望在所有rememberGlidePainter() 调用中使用同一个默认的 RequestManager ，就请使用 LocalRequestManager。

示例如下：

val requestManager = Glide.with(...)
    // customize the RequestManager as needed
    .build()

CompositionLocalProvider(LocalRequestManager provides requestManager) {
    // This will automatically use the value of LocalRequestManager
    Image(
        painter = rememberGlidePainter(...)
    )
}

更多有关 CompositionLocal 的信息，请参见此处。

Download

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-glide:<version>"
}

Sonatype's snapshots repository 中提供了开发版本的快照。每一次提交，快照都会更新。