繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

如何为Compose Image提供网络图片加载支持_compose 加载网络图片

作者：繁依Fanyi0 | 2024-03-27 02:18:01

踩

compose 加载网络图片

本文是源码分析类文章

如何为Compose Image提供网络图片加载支持？目前（Compose 1.0.5）最好的选择是使用图片框架Coil，Coil对Jetpack Compose相关的支持文档在这。

Compose内的Image组件类似于ImageView，仅支持从本地加载图片资源，要想从网络中获取图片并加载，我们首先就得要使用能够处理网络请求的框架，将远程图片资源载入到本地才行。目前主流的图片加载框架Picasso、Glide、Coil等，它们更多面对的仍是传统的View系统下，将图片加载到ImageView中并显示这样的应用场景，而不是为Compose量身打造的，基于此，Accompanist库曾提供了一些图片加载框架的扩展库，为Compose的Image显示网络图片进行简便支持。时过境迁，后来Coil为Image加载图片提供了相关支持，故Accompanist以前关于图片加载框架扩展的依赖都被废弃并不推荐使用了。

接下来我们将分析Accompanist曾经是如何对图片框架做扩展适配，使之能够与Compose配合工作的。

Picasso(in version 0.6.2)

Accompanist在0.3.0版本就提供了Picasso的支持，不过，在版本0.7.0该集成被移除（相关的pull参见https://github.com/google/accompanist/pull/253）

在0.6.2版本中，想要加载网络图片，你可能会使用如下代码：

PicassoImage(
    data = "http://..."
    modifier = Modifier.size(50.dp),
) { imageLoadState ->
    when(imageLoadState) {
        ...
    }
}
CoilImage(
    data = "https://i.imgur.com/StXm8nf.jpg",
    contentDescription = null,
    onRequestCompleted = {
        println("LoadingCoilImage onRequestCompleted $it")
    },
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxWidth(),
) {
    ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在version 0.6.2中，加载远程图片的方法是使用专用的Image组件，使用Picasso框架的调用PicassoImage，使用Coil的则调用CoilImage，等等。它们都依赖于一个imageloader-core的核心库来进行图片加载，我们不难想象这个加载图片的方法，为了糅合各类框架，肯定要用不少泛型，事实上它长下面这样：

@Composable
fun <R : Any, TR : Any> ImageLoad(
    request: R,
    executeRequest: suspend (TR) -> ImageLoadState,
    modifier: Modifier = Modifier,
    requestKey: Any = request,
    transformRequestForSize: (R, IntSize) -> TR?,
    shouldRefetchOnSizeChange: (currentResult: ImageLoadState, size: IntSize) -> Boolean = DefaultRefetchOnSizeChangeLambda,
    onRequestCompleted: (ImageLoadState) -> Unit = EmptyRequestCompleteLambda,
    content: @Composable BoxScope.(imageLoadState: ImageLoadState) -> Unit
) {
    ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13

泛型R代表请求的值，这个值之所以是泛型，是因为实际上各种框架都支持多类型的图片加载请求，这个请求可能是基于一个URL的String，也可能单纯是一个resource的id，或者就是一个Bitmap，等等。泛型TR代表了不同图片框架内收集本次图片请求信息的实体类（或者是Builder），在Picasso中这个类叫RequestCreator，在Glide中这个类叫RequestBuilder。

我们继续观察它的实现：

@Composable
fun <R : Any, TR : Any> ImageLoad(
    request: R,
    executeRequest: suspend (TR) -> ImageLoadState,
    modifier: Modifier = Modifier,
    requestKey: Any = request,
    transformRequestForSize: (R, IntSize) -> TR?,
    shouldRefetchOnSizeChange: (currentResult: ImageLoadState, size: IntSize) -> Boolean = DefaultRefetchOnSizeChangeLambda,
    onRequestCompleted: (ImageLoadState) -> Unit = EmptyRequestCompleteLambda,
    content: @Composable BoxScope.(imageLoadState: ImageLoadState) -> Unit
) {
    // 三个rememberUpdatedState，目的是为了避免更改后重组
    val updatedOnRequestCompleted by rememberUpdatedState(onRequestCompleted)
    val updatedTransformRequestForSize by rememberUpdatedState(transformRequestForSize)
    val updatedExecuteRequest by rememberUpdatedState(executeRequest)

    // 这个state拿来缓存控件大小，因为控件大小要等到Compose内容传入constraints才能确定
    var requestSize by remember(requestKey) { mutableStateOf<IntSize?>(null) }

    // 重点，这里使用produceState将executeRequest返回的非Compose状态转换为一个State
    // 之所以连加载图片的过程都抽象成一个叫executeRequest的lambda，还是因为要糅合多个框架
    val loadState by produceState<ImageLoadState>(
        initialValue = ImageLoadState.Loading,
        key1 = requestKey,
        key2 = requestSize,
    ) {
        // value一开始肯定被赋值为ImageLoadState.Loading，因为requestSize为空。
        // 当requestSize被赋值后，首先将开始执行transformRequestForSize这个lambda
        // 传入原来的request和新获得的size，要求返回一个类似RequestBuilder的结果
        value = requestSize?.let { updatedTransformRequestForSize(request, it) }
            ?.let { transformedRequest ->
                   // 这里传入刚才的RequestBuilder
                try {
                    // 发起图片加载请求，这里可能会挂起
                    updatedExecuteRequest(transformedRequest)
                } catch (e: CancellationException) {
                    // We specifically don't do anything for the request coroutine being
                    // cancelled: https://github.com/google/accompanist/issues/217
                    // 如果我们响应了协程的CancellationException，让ImageLoadState变成了Error
                    // 有可能会出问题，因为如果取消的协程在新协程完成后执行，
                    // 会导致新的图片状态（Success）被上次取消的结果（Error）覆盖
                    throw e
                } catch (e: Error) {
                    // Re-throw all Errors
                    throw e
                } catch (e: IllegalStateException) {
                    // Re-throw all IllegalStateExceptions
                    throw e
                } catch (t: Throwable) {
                    // Anything else, we wrap in a Error state instance
                    // 除了CancellationException、Error、IllegalStateException之外，
                    // 其余的错误将会令状态转变为Error
                    ImageLoadState.Error(painter = null, throwable = t)
                    // also内，加载完成，回调onRequestCompleted
                }.also(updatedOnRequestCompleted)
            } ?: ImageLoadState.Loading
    }

    BoxWithConstraints(
        modifier = modifier,
        propagateMinConstraints = true,
    ) {
        val size = IntSize(
            width = if (constraints.hasBoundedWidth) constraints.maxWidth else -1,
            height = if (constraints.hasBoundedHeight) constraints.maxHeight else -1
        )
        if (requestSize == null ||
            (requestSize != size && shouldRefetchOnSizeChange(loadState, size))
        ) {
            requestSize = size
        }

        content(loadState)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

ImageLoad的思路清晰明了：调用方告诉它如何build一个请求，并在使用图片框架的过程中产生ImageLoadState状态，它会把ImageLoadState转换为可以观察的State<ImageLoadState>。

直接使用通用实现的缺点在于会产生很多模板代码，可以基于通用实现进行更简洁的封装，我们以特定的PicassoImage的实现为例进行分析：

// 这个API封装更彻底，不需要写when(state)，直接在函数中传入error、loading的内容即可
@Composable
fun PicassoImage(
    data: Any,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    colorFilter: ColorFilter? = null,
    fadeIn: Boolean = false,
    picasso: Picasso = LocalPicasso.current,
    requestBuilder: (RequestCreator.(size: IntSize) -> RequestCreator)? = null,
    shouldRefetchOnSizeChange: (currentResult: ImageLoadState, size: IntSize) -> Boolean = DefaultRefetchOnSizeChangeLambda,
    onRequestCompleted: (ImageLoadState) -> Unit = EmptyRequestCompleteLambda,
    error: @Composable (BoxScope.(ImageLoadState.Error) -> Unit)? = null,
    loading: @Composable (BoxScope.() -> Unit)? = null,
) {
    PicassoImage(
        data = data,
        modifier = modifier,
        requestBuilder = requestBuilder,
        picasso = picasso,
        shouldRefetchOnSizeChange = shouldRefetchOnSizeChange,
        onRequestCompleted = onRequestCompleted,
    ) { imageState ->
        when (imageState) {
            is ImageLoadState.Success -> {
                // MaterialLoadingImage是0.6.2版本中存在的一个实现fadeIn效果的控件
                // 原理是使用Compose动画中的Transition托管三个动画
                // alpha(透明度),brightness(亮度),saturation(饱和度), 
                // 同时修改传入Image内的colorFliter的这三个值，从而实现渐入效果
                MaterialLoadingImage(
                    result = imageState,
                    contentDescription = contentDescription,
                    fadeInEnabled = fadeIn,
                    alignment = alignment,
                    contentScale = contentScale,
                    colorFilter = colorFilter
                )
            }
            is ImageLoadState.Error -> if (error != null) error(imageState)
            ImageLoadState.Loading -> if (loading != null) loading()
            ImageLoadState.Empty -> Unit
        }
    }
}


@Composable
fun PicassoImage(
    data: Any,
    modifier: Modifier = Modifier,
    picasso: Picasso = LocalPicasso.current,
    requestBuilder: (RequestCreator.(size: IntSize) -> RequestCreator)? = null,
    shouldRefetchOnSizeChange: (currentResult: ImageLoadState, size: IntSize) -> Boolean = DefaultRefetchOnSizeChangeLambda,
    onRequestCompleted: (ImageLoadState) -> Unit = EmptyRequestCompleteLambda,
    content: @Composable BoxScope.(imageLoadState: ImageLoadState) -> Unit
) {
    ImageLoad(
        request = data.toRequestCreator(picasso),
        requestKey = data, // Picasso RequestCreator doesn't support equality so we use the data
        executeRequest = { r ->
            @OptIn(ExperimentalCoroutinesApi::class)
            suspendCancellableCoroutine { cont ->
                // 初始化了一个Target，这个Target用来获取图片加载结果
                val target = object : com.squareup.picasso.Target {
                    override fun onBitmapLoaded(bitmap: Bitmap, from: Picasso.LoadedFrom) {
                        val state = ImageLoadState.Success(
                            painter = BitmapPainter(bitmap.asImageBitmap()),
                            source = from.toDataSource()
                        )
                        // 协程恢复
                        cont.resume(state) {
                            // Not much we can do here. Ignore this
                        }
                    }

                    override fun onBitmapFailed(exception: Exception, errorDrawable: Drawable?) {
                        val state = ImageLoadState.Error(
                            throwable = exception,
                            painter = errorDrawable?.toPainter(),
                        )
                        // 协程恢复
                        cont.resume(state) {
                            // Not much we can do here. Ignore this
                        }
                    }

                    override fun onPrepareLoad(placeholder: Drawable?) = Unit
                }

                cont.invokeOnCancellation {
                    // 取消图片加载
                    picasso.cancelRequest(target)
                }

                // Now kick off the image load into our target
                r.into(target)
            }
        },
        transformRequestForSize = { r, size ->
            val sizedRequest = when {
                // 如果尺寸包含未指定尺寸的尺寸，我们不会在Coil请求中指定尺寸
                size.width < 0 || size.height < 0 -> r
               
                size != IntSize.Zero -> {
                    r.resize(size.width, size.height)
                        .centerInside()
                        .onlyScaleDown()
                }
                // Otherwise we have a zero size, so no point executing a request
                // 未获得size，因此暂时无法生成请求
                else -> null
            }

            // 根据参数来build请求
            if (sizedRequest != null && requestBuilder != null) {
                // If we have a transformed request and builder, let it run
                requestBuilder(sizedRequest, size)
            } else {
                // Otherwise we just return the sizedRequest
                sizedRequest
            }
        },
        shouldRefetchOnSizeChange = shouldRefetchOnSizeChange,
        onRequestCompleted = onRequestCompleted,
        modifier = modifier,
        content = content
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

现在让我们来总结一下，在0.6.2版本，实现网络图片加载的集成库思路如下：

图片加载：使用Target回调获取加载的结果（各个框架都有类似的抽象的Target而不是限制目标必须是ImageView）。结果返回的过程是阻塞式，协程将在produceState内执行到updatedExecuteRequest(transformedRequest)后挂起，直到这个lambda返回结果，State的值将会在结果返回后产生变化。当然，如果协程被取消，Picasso也会取消加载到Target那个图片请求。
图片大小约束：依赖于BoxWithConstraints获得的约束大小。
渐入动画实现：使用动画API Transition对ColorFliter的alpha,brightness,saturation进行动态修改，从而实现渐入动画。
loading占位图、error显示等：依赖于用户传入的@Composable内容.根据produceState生成的状态，PicassoImage内显示的@Composable内容会动态变化。

Glide(in version 0.13.0)

0.3.0版本诞生于2020年10月份，而当时间来到了2021年4月，Accompanist发布0.8.0版本，Coil 和 Glide 集成库进行了大规模的重构。上面提到的类似于CoilImage()和GlideImage()API都已经被弃用了。

以下对Glide集成库的分析基于版本0.13.0的代码。

如果在0.13.0版本想要加载远程图片，或许你会写出以下的代码：

Image(
    painter = rememberGlidePainter(request = "http://..."),
    contentDescription = null
)
1
2
3
4

新的API不再需要专门的Image组件，而是使用Painter这种概念来表现加载的结果。新的API对性能的提升似乎有所提升：Compose内容重组后，需要重绘的不再是不同的Loading组件或Success组件，现在核心组件一定是一个Image，随加载状态变化的只不过是Image内绘制的内容而已，重绘范围有所缩小。这很符合我们对ImageView的想象：在加载的时候显示一张placeholder占位图，成功显示最终结果，否则显示error图片，而placeholder和error都可以发起图片加载请求的时候设置。

Painter是一个什么样的概念？我们可以先看一下类注释是怎么介绍它的：

/**
* 对可以画出来的东西的抽象。除了能够绘制到指定的有界区域外，Painter还提供了一些高级机制，消费者可以使用
* 这些机制来配置内容的绘制方式。其中包括alpha、ColorFilter和RTL
* 实现应该提供一个有意义的equals方法来比较不同Painter子类的值，而不仅仅依赖于引用相等
*/
abstract class Painter {
    ...
    protected abstract fun DrawScope.onDraw()
}
1
2
3
4
5
6
7
8
9

描述看起来有点像Drawable，但实际上Drawable比Painter更加复杂一些，除了上述的alpha、ColorFilter、LayoutDirection之外，Drawable还具有动画Callback、Level、Hotspot等属性。DrawScope.onDraw()方法类似于Drawable的draw(Canvas canvas)。

继续观察rememberGlidePainter的具体实现：

@Composable
fun rememberGlidePainter(
    request: Any?,
    requestManager: RequestManager = GlidePainterDefaults.defaultRequestManager(),
    shouldRefetchOnSizeChange: ShouldRefetchOnSizeChange = ShouldRefetchOnSizeChange { _, _ -> false },
    // 注意这里的requestBuilder，加载的结果类型已经被固定为drawable
    requestBuilder: (RequestBuilder<Drawable>.(size: IntSize) -> RequestBuilder<Drawable>)? = null,
    // 新的API也能开启fadeIn效果
    fadeIn: Boolean = false,
    fadeInDurationMs: Int = LoadPainterDefaults.FadeInTransitionDuration,
    // 是不是很疑惑为什么这里有个占位图id的参数？Glide本身就支持占位图设置，
    // 在Build Request的时候设置不就行了吗？其实这个参数是给Compose预览模式用的
    @DrawableRes previewPlaceholder: Int = 0,
): LoadPainter<Any> {
    // GlideLoader是加载逻辑实现类，稍后展示
    val glideLoader = remember {
        GlideLoader(requestManager, requestBuilder)
    }.apply {
        // 这里的逻辑并不是多余的，要知道如果key没有变化，remember函数会直接返回上次计算的结果，
        // 这里想表达的是，对上次的结果调用apply，更新requestManager和requestBuilder
        this.requestManager = requestManager
        this.requestBuilder = requestBuilder
    }
    // rememberLoadPainter位于之前所说的imageloading-core的核心库
    // 在0.13.0版本Coil和Glide都用到这个库来获取LoadPainter
    return rememberLoadPainter(
        loader = glideLoader,
        request = checkData(request),
        shouldRefetchOnSizeChange = shouldRefetchOnSizeChange,
        fadeIn = fadeIn,
        fadeInDurationMs = fadeInDurationMs,
        previewPlaceholder = previewPlaceholder
    )
}
// checkData检查了request的类型
private fun checkData(data: Any?): Any? {
    when (data) {
        is Drawable -> {
            throw IllegalArgumentException(....)
        }
        is ImageBitmap -> {
            throw IllegalArgumentException(....)
        }
        is ImageVector -> {
            throw IllegalArgumentException(....)
        }
        is Painter -> {
            throw IllegalArgumentException(....)
        }
    }
    return data
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

imageloading-core这次如何抽象图片加载行为？我们先观察一下rememberLoadPainter的参数列表：

@Composable
fun <R> rememberLoadPainter(
    loader: Loader<R>,
    request: R?,
    shouldRefetchOnSizeChange: ShouldRefetchOnSizeChange,
    fadeIn: Boolean = false,
    fadeInDurationMs: Int = LoadPainterDefaults.FadeInTransitionDuration,
    @DrawableRes previewPlaceholder: Int = 0,
): LoadPainter<R> {...}

@Stable
fun interface Loader<R> {
    fun load(request: R, size: IntSize): Flow<ImageLoadState>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

与0.6.2版本不同，加载逻辑实现类需要返回一个状态流Flow<ImageLoadState>，而不再是单一的ImageLoadState，虽然请求类型仍然是泛型的，但是已经不需要表达类似于RequestBuilder这样的泛型类型，如何构建、发起请求由Loader自己决定。

ImageLoadState的实现如下

sealed class ImageLoadState {
    object Empty : ImageLoadState()
    data class Loading(
        val placeholder: Painter?,
        val request: Any,
    ) : ImageLoadState()
    data class Success(
        val result: Painter,
        val source: DataSource,
        val request: Any,
    ) : ImageLoadState()
    data class Error(
        val request: Any,
        val result: Painter? = null,
        val throwable: Throwable? = null
    ) : ImageLoadState()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

不难发现所有的图片加载结果都要求封装成Painter进行返回，但尴尬的是，Drawable与Painter并不是天生互通的类型（Compose 1.0.5只有三种Painter，BitmapPainter、VectorPainter、ColorPainter），好在Accompanist提供了一个DrawablePainter。不过话又说回来，为什么非得要求生产者Loader返回Painter不可呢？那是因为加载请求是多类型的，消费者LoadPainter其实无法确定生产者返回的结果的类型，自然也不确定如何绘制它，因此LoadPainter采用了类似于装饰者模式的设计，图片结果绘制交由State内的Painter完成。

GlideLoader的实现如下：

internal class GlideLoader(
    requestManager: RequestManager,
    requestBuilder: (RequestBuilder<Drawable>.(size: IntSize) -> RequestBuilder<Drawable>)?,
) : Loader<Any> {
    var requestManager by mutableStateOf(requestManager)
    var requestBuilder by mutableStateOf(requestBuilder)

    /**
     * 不要删除callbackFlow上的显式类型<ImageLoadState>。IR编译器不喜欢隐式类型。
     */
    @Suppress("RemoveExplicitTypeArguments")
    @OptIn(ExperimentalCoroutinesApi::class)
    override fun load(
        request: Any,
        size: IntSize
    ): Flow<ImageLoadState> = callbackFlow<ImageLoadState> {
        var failException: Throwable? = null
        // 这里同时使用Target与Listener两种机制来监听加载状态，并向flow发送对应状态
        // Target并不会去处理Success的状态，Listener已经抢先处理并拦截了Target的Success调用
        val target = object : EmptyCustomTarget(
            if (size.width > 0) size.width else Target.SIZE_ORIGINAL,
            if (size.height > 0) size.height else Target.SIZE_ORIGINAL
        ) {
            override fun onLoadStarted(placeholder: Drawable?) {
                trySendBlocking(
                    ImageLoadState.Loading(
                        placeholder = placeholder?.let(::DrawablePainter),
                        request = request
                    )
                )
            }

            override fun onLoadFailed(errorDrawable: Drawable?) {
                trySendBlocking(
                    ImageLoadState.Error(
                        result = errorDrawable?.let(::DrawablePainter),
                        request = request,
                        throwable = failException
                            ?: IllegalArgumentException("Error while loading $request")
                    )
                )
                // Close the channel[Flow]
                channel.close()
            }

            override fun onLoadCleared(resource: Drawable?) {
                // Glide想要释放资源，所以我们需要清除结果，否则我们可能会绘制已经被回收的视图
                trySendBlocking(ImageLoadState.Empty)
                // Close the channel[Flow]
                channel.close()
            }
        }

        val listener = object : RequestListener<Drawable> {
            override fun onResourceReady(
                drawable: Drawable,
                model: Any,
                target: Target<Drawable>,
                dataSource: com.bumptech.glide.load.DataSource,
                isFirstResource: Boolean
            ): Boolean {
                // 这里发送的Painter类型
                trySendBlocking(
                    ImageLoadState.Success(
                        result = DrawablePainter(drawable),
                        source = dataSource.toDataSource(),
                        request = request
                    )
                )
                // Close the channel[Flow]
                channel.close()
                // Return true so that the target doesn't receive the drawable
                // 这里返回true，Target就收不到结果了
                return true
            }

            override fun onLoadFailed(
                e: GlideException?,
                model: Any,
                target: Target<Drawable>,
                isFirstResource: Boolean
            ): Boolean {
                // Glide只为Listener派发错误的Exception，因此这里需要缓存一下
                failException = e
                // 返回false，允许Target被回调onLoadFailed
                return false
            }
        }

        // Start the image request into the target
        requestManager.load(request)
            .apply { requestBuilder?.invoke(this, size) }
            .addListener(listener)
            .into(target)

        // Await the channel being closed and request finishing...
        awaitClose {
            // 这里没有调用Glide.clear()，因为clear之后Painter进行绘制的位图可能会被回收，这会报错
            // See https://github.com/google/accompanist/issues/419
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

总体来说状态转换逻辑和以前类似，只不过使用callbackFlow生成数据流后，状态发送显得更加优雅了。

接下来关注rememberLoadPainter的具体实现：

/**
一个通用的 image loading painter，它为要实现的图像加载库提供Loader接口。应用程序通常不应该使用此功能，而更推荐使用在此基础上构建的扩展库，例如Coil和Glide库。
*/
@Composable
fun <R> rememberLoadPainter(
    loader: Loader<R>,
    request: R?,
    shouldRefetchOnSizeChange: ShouldRefetchOnSizeChange,
    fadeIn: Boolean = false,
    fadeInDurationMs: Int = LoadPainterDefaults.FadeInTransitionDuration,
    @DrawableRes previewPlaceholder: Int = 0,
): LoadPainter<R> {
    val coroutineScope = rememberCoroutineScope()

    // Our LoadPainter. This invokes the loader as appropriate to display the result.
    val painter = remember(loader, coroutineScope) {
        LoadPainter(loader, coroutineScope)
    }
    painter.request = request
    painter.shouldRefetchOnSizeChange = shouldRefetchOnSizeChange
    // 缓存父布局的大小，在计算图片请求的大小时会参考此值
    painter.rootViewSize = LocalView.current.let { IntSize(it.width, it.height) }

    // fadeIn动画的ColorFilter
    // 实现原理和0.6.2版本类似，也是修改了ColorFliter的alpha(透明度),
    // brightness(亮度),saturation(饱和度)，不过这次的ColorFliter由LoadPainter直接进行处理
    animateFadeInColorFilter(
        painter = painter,
        enabled = { result ->
            // 从 disk/network 才去展示fadeIn动画
            // 这使我们可以近似地只在“首次加载”时运行动画
            fadeIn && result is ImageLoadState.Success && result.source != DataSource.MEMORY
        },
        durationMs = fadeInDurationMs,
    )

    // Our result painter, created from the ImageState with some composition lifecycle
    // callbacks
    // 我们的result painter，通过一些composition生命周期的回调从ImageState创建
    updatePainter(painter, previewPlaceholder)

    return painter
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

LoaderPainter的实现如下。这里要特别注意RememberObserver这个接口，RememberObserver是一个能够实现对remember行为的观察的接口，如果composition记住或者遗忘的是一个RememberObserver对象，RememberObserver能够收到这个事件，这些事件对LoaderPainter很有用。因为LoaderPainter毕竟并不是一个Compose组件，但是它必须了解它所在的父组件在什么时候离开了屏幕被销毁了（例如高速滑动列表时），这样它能够及时取消对状态流Flow<ImageLoadState>的收集，这是避免发生图片闪烁、错位等问题的关键。

class LoadPainter<R> internal constructor(
    private val loader: Loader<R>,
    private val coroutineScope: CoroutineScope,
) : Painter(), RememberObserver {
    private val paint by lazy(LazyThreadSafetyMode.NONE) { Paint() }

    internal var painter by mutableStateOf<Painter>(EmptyPainter)
    // 这个ColorFilter和渐入动画有关
    internal var transitionColorFilter by mutableStateOf<ColorFilter?>(null)
    // CoroutineScope for the current request
    private var requestCoroutineScope: CoroutineScope? = null
    /**
     * The current request object.
     */
    var request by mutableStateOf<R?>(null)
    /**
     * The root view size.
     */
    internal var rootViewSize by mutableStateOf(IntSize(0, 0))
    /**
     * Lambda which will be invoked when the size changes, allowing
     * optional re-fetching of the image.
     */
    var shouldRefetchOnSizeChange by mutableStateOf(ShouldRefetchOnSizeChange { _, _ -> false })

    /**
     * The current [ImageLoadState].
     * 被观察的ImageLoadState
     */
    var loadState: ImageLoadState by mutableStateOf(ImageLoadState.Empty)
        private set

    private var alpha: Float by mutableStateOf(1f)
    private var colorFilter: ColorFilter? by mutableStateOf(null)

    /**
     * 执行图像加载请求时要使用的大小
     */
    private var requestSize by mutableStateOf<IntSize?>(null)

    // Painter内的属性，指定边界大小
    override val intrinsicSize: Size
        get() = painter.intrinsicSize

    override fun applyAlpha(alpha: Float): Boolean {
        this.alpha = alpha
        return true
    }

    override fun applyColorFilter(colorFilter: ColorFilter?): Boolean {
        this.colorFilter = colorFilter
        return true
    }

    override fun DrawScope.onDraw() {
        // 根据Canvas的大小确定requestSize，是不是注意到requestSize的确定其实是存在延时的？
        updateRequestSize(canvasSize = size)
        
        // 下面是一些绘制逻辑
        val transitionColorFilter = transitionColorFilter
        if (colorFilter != null && transitionColorFilter != null) {
            // If we have a transition color filter, 
            // and a specified color filter we need to
            // draw the content in a layer for both to apply.
            // See https://github.com/google/accompanist/issues/262
           drawIntoCanvas { canvas ->
                paint.colorFilter = transitionColorFilter
                canvas.saveLayer(bounds = size.toRect(), paint = paint)
                with(painter) {
                    draw(size, alpha, colorFilter)
                }
                canvas.restore()
        } else {
            // Otherwise we just draw the content directly, using the filter
            with(painter) {
                draw(size, alpha, colorFilter ?: transitionColorFilter)
            }
        }
    }
    // RememberObserver的方法
    // remember运行了计算的lambda但是composition没记住这个对象时回调
    override fun onAbandoned() {
        // We've been abandoned from composition, so cancel our request scope
        requestCoroutineScope?.cancel()
        requestCoroutineScope = null
    }
    // RememberObserver的方法
    // composition忘记了这个对象时回调
    override fun onForgotten() {
        // We've been forgotten from composition, so cancel our request scope
        // onAbandoned和onForgotten时都会cancel运行中的协程
        requestCoroutineScope?.cancel()
        requestCoroutineScope = null
    }
    // RememberObserver的方法
    // 当composition成功记住此对象时调用。
    override fun onRemembered() {
        // Cancel any on-going scope (this shouldn't really happen anyway)
        // 先取消以前正running的协程
        requestCoroutineScope?.cancel()

        // 为当前请求创建新的scope，这允许我们取消作用域，而不影响父作用域的作业。
        val scope = coroutineScope.coroutineContext.let { context ->
            CoroutineScope(context + Job(context[Job]))
        }.also { requestCoroutineScope = it }

        // 我们已经被记住了，所以可以启动一个协程来观察当前的请求对象和请求大小。
        // 每当这些值中的任何一个发生变化时，collectLatest块将运行并执行图像加载（任何正在进行的请求都将被取消）。
        scope.launch {
            // combine方法如其名，能把两个流合并成一个流
            // 不过为什么这里要使用snapshotFlow把State转化成流呢？
            // 因为使用流来监听State变化的最大好处就是collectLatest能够
            // 取消掉上一次的execute调用并启动新一轮的加载
            combine(
                snapshotFlow { request },
                snapshotFlow { requestSize },
                transform = { request, size -> request to size }
            ).collectLatest { (request, size) ->
                execute(request, size)
            }
        }

        // 自动保险。如果没有从onDraw()获得合适的大小，
        // 我们会将请求大小更新为-1，-1，这将加载原始大小的图像。
        scope.launch {
            if (requestSize == null) {
                // 32ms should be enough time for measure/layout/draw to happen.
                // 微妙的32毫秒
                delay(32) 

                if (requestSize == null) {
                   // If we still don't have a request size, resolve the size without
                   // the canvas size
                    // 没获取到Canvas大小，使用原始尺寸
                    updateRequestSize(canvasSize = Size.Zero)
                }
            }
        }
    }

    /**
     * 执行图片加载请求并根据结果更新loadState的方法
     下面描述的是一些状态转换逻辑，比如如果请求为null，状态就转变为Empty
     */
    private suspend fun execute(request: R?, size: IntSize?) {
        if (request == null || size == null) {
            // If we don't have a request, set our state to Empty and return
            loadState = ImageLoadState.Empty
            return
        }
        // ...

        loader.load(request, size)
            .catch { throwable ->
                when (throwable) {
                    is Error -> throw throwable
                    is IllegalStateException -> throw throwable
                    is IllegalArgumentException -> throw throwable
                    else -> {
                        emit(
                            ImageLoadState.Error(
                                result = null,
                                throwable = throwable,
                                request = request
                            )
                        )
                    }
                }
            }
            .collect { loadState = it }
        // 上面collect收集了加载的状态，注意，代表图片结果的Painter没被设置到LoadPainter的字段内
    }

    private fun updateRequestSize(canvasSize: Size) {
        requestSize = IntSize(
            width = when {
                // If we have a canvas width, use it...
                canvasSize.width >= 0.5f -> canvasSize.width.roundToInt()
                // 还记得这个rootViewSize吗？它在rememberLoadPainter函数内被设置
                rootViewSize.width > 0 -> rootViewSize.width
                else -> -1
            },
            height = when {
                // If we have a canvas height, use it...
                canvasSize.height >= 0.5f -> canvasSize.height.roundToInt()
                // Otherwise we fall-back to the root view size as an upper bound
                rootViewSize.height > 0 -> rootViewSize.height
                else -> -1
            },
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192

虽然说LoadPainter确实是实现了RememberObserver，但是，这个回调是怎么被注册的呢？答案藏在习以为常的remember函数中，传入remember的key，或者是calculation得出的值，它们如果是个RememberObserver，则会被插入到RememberManager的队列中，每当“记忆”和“遗忘”事件发生时都会得到通知。

@Composable
inline fun <T> remember(
    key1: Any?,
    calculation: @DisallowComposableCalls () -> T
): T {
    return currentComposer.cache(currentComposer.changed(key1), calculation)
}
// 注意检查key是否有变化的changed函数
@ComposeCompilerApi
override fun changed(value: Any?): Boolean {
    return if (nextSlot() != value) {
        updateValue(value)
        true
    } else {
        false
    }
}

@PublishedApi
@OptIn(InternalComposeApi::class)
internal fun updateValue(value: Any?) {
    // 两个if分支我们都可以看到 rememberManager.remembering()
    // rememberManager.forgetting()这些调用
    if (inserting) {
        writer.update(value)
        if (value is RememberObserver) {
            // 注意，判断value是不是RememberObserver
            record { _, _, rememberManager -> rememberManager.remembering(value) }
        }
    } else {
        val groupSlotIndex = reader.groupSlotIndex - 1
        recordSlotTableOperation(forParent = true) { _, slots, rememberManager ->
            if (value is RememberObserver) {
                abandonSet.add(value)
                rememberManager.remembering(value)
            }
            when (val previous = slots.set(groupSlotIndex, value)) {
                is RememberObserver ->
                    rememberManager.forgetting(previous)
                is RecomposeScopeImpl -> {
                    val composition = previous.composition
                    if (composition != null) {
                        previous.composition = null
                        composition.pendingInvalidScopes = true
                    }
                }
            }
        }
    }
}
// RememberManager是个接口
internal interface RememberManager {
    /**
     * The [RememberObserver] is being remembered by a slot in the slot table.
     */
    fun remembering(instance: RememberObserver)

    /**
     * The [RememberObserver] is being forgotten by a slot in the slot table.
     */
    fun forgetting(instance: RememberObserver)
    
    ...
}
// RememberManager的实现类
private class RememberEventDispatcher(
    private val abandoning: MutableSet<RememberObserver>
) : RememberManager {
    private val remembering = mutableListOf<RememberObserver>()
    private val forgetting = mutableListOf<RememberObserver>()
    private val sideEffects = mutableListOf<() -> Unit>()

    override fun remembering(instance: RememberObserver) {
        forgetting.lastIndexOf(instance).let { index ->
            if (index >= 0) {
                forgetting.removeAt(index)
                abandoning.remove(instance)
            } else {
                remembering.add(instance)
            }
        }
    }

    override fun forgetting(instance: RememberObserver) {
        remembering.lastIndexOf(instance).let { index ->
            if (index >= 0) {
                remembering.removeAt(index)
                abandoning.remove(instance)
            } else {
                forgetting.add(instance)
            }
        }
    }
    fun dispatchRememberObservers() {
        // 派发forgetting和remembering事件的逻辑
        if (forgetting.isNotEmpty()) {
            for (i in forgetting.size - 1 downTo 0) {
                val instance = forgetting[i]
                if (instance !in abandoning) {
                    instance.onForgotten()
                }
            }
        }
        if (remembering.isNotEmpty()) {
            remembering.fastForEach { instance ->
                abandoning.remove(instance)
                instance.onRemembered()
            }
        }
    }
    // ....
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

我们已经明白LoadPainter到底是怎么管理Loader返回的流结果了，最后一个需要注意的地方在函数updatePainter里，这个调用位于rememberLoadPainter最后，函数实现会根据图片加载State的变化来为LoadPainter设置Painter。不过这不是兜了个圈子吗？似乎也可以在collect更新State的同时把Painter更新一下？

/**
* 允许我们以状态观察当前结果。这个函数允许我们最小化重组范围，这样当loadState改变时，只有这个函数需要重新
* 启动。
*/
@Composable
private fun <R> updatePainter(
    loadPainter: LoadPainter<R>,
    @DrawableRes previewPlaceholder: Int = 0,
) {
    loadPainter.painter = if (LocalInspectionMode.current && previewPlaceholder != 0) {
        // 如果我们处于检查模式（预览），并且有一个预览占位符，只需使用图像绘制它并返回
        // 还记得rememberGlidePainter的参数吗？这里就是传入的参数previewPlaceholder的用途
        // 这个函数令LoadPainter完全忽略了State的变化，只展示静态图片
        painterResource(previewPlaceholder)
    } else {
        // remember在这里看上去像是毫无必要的调用，
        // 但这允许任何Painter实例接收记忆事件（如果它实现了RememberObserver）。不要移除。
        remember(loadPainter.loadState) { loadPainter.loadState.painter } ?: EmptyPainter
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

现在来总结一下0.13.0版本的Glide远程图片扩展的实现思路：

图片加载：依然是用Target回调获取加载的结果。但是加载状态的返回现在使用流（Flow）来封装，不管是发起加载，异常处理，加载取消都更加优雅直观了。Loader是彻彻底底的生产者，LoadPainter则是消费者。

LoadPainter并不具有@Composable上下文，作为替代，它实现了RememberObserver来监听控件是否已经离屏销毁。
图片大小约束：依赖于LoadPainter获取的Canvas的大小。
渐入动画实现：跟0.6.2版本的思路相似，不过消费ColorFilter的类变成了LoadPainter。
loading占位图、error图等：这些功能直接依赖于具体的图片加载框架的实现，有则有，无则无。0.13.0版本稍微舍去了一些灵活性，不能够像PicassoImage一样直接传入error、loading的Compose内容（控件），不过仍然留有监听图片加载状态的方式，注意，LoadPainter的loadState字段是公开的：
```
/**
 * The current [ImageLoadState].
 */
var loadState: ImageLoadState by mutableStateOf(ImageLoadState.Empty)
    private set
1
2
3
4
5
```

Coil

Accompanist内的Coil集成库最终集成到了Coil内部，成为其扩展，Glide的集成支持则在2021年8月的0.16.0版本被删除。

现在我们简要分析Coil的图片加载逻辑（版本2.0.0-alpha06）。Coil扩展库提供了两种方式来加载网络图片，两种方式正巧就是上面提到的在0.6.2版本与在0.13.0版本的两种实现形式：

// 实现形式1
@Composable
fun AsyncImage(
    model: Any?,
    contentDescription: String?,
    imageLoader: ImageLoader,
    modifier: Modifier = Modifier,
    loading: @Composable (AsyncImageScope.(State.Loading) -> Unit)? = null,
    success: @Composable (AsyncImageScope.(State.Success) -> Unit)? = null,
    error: @Composable (AsyncImageScope.(State.Error) -> Unit)? = null,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null,
    filterQuality: FilterQuality = DefaultFilterQuality,
) {...}
// 实现形式2
@Composable
fun rememberAsyncImagePainter(
    model: Any?,
    imageLoader: ImageLoader,
    filterQuality: FilterQuality = DefaultFilterQuality,
): AsyncImagePainter {...}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

我们重点分析第二种形式，即rememberAsyncImagePainter函数，其实该函数的实现逻辑与Glide扩展库比较类似，只在某些细节有所区别：

// 这里不再详细分析源码，挑重要的讲
@Composable
fun rememberAsyncImagePainter(
    model: Any?,
    imageLoader: ImageLoader,
    filterQuality: FilterQuality = DefaultFilterQuality,
): AsyncImagePainter {
    val request = requestOf(model)
    requireSupportedData(request.data)
    // 注意这里，这里要求request的target为null
    require(request.target == null) { "request.target must be null." }

    // Dispatchers.Main.immediate是一个有趣的协程调度器，具体效果见类注释
    val scope = rememberCoroutineScope { Dispatchers.Main.immediate }
    // AsyncImagePainter
    val painter = remember(scope) { AsyncImagePainter(scope, request, imageLoader) }
    painter.request = request
    painter.imageLoader = imageLoader
    painter.filterQuality = filterQuality
    // 是否处于预览模式
    painter.isPreview = LocalInspectionMode.current
    // 这里手动调用了一次onRemembered，onRemembered里有向ImageLoader提交request的逻辑
    painter.onRemembered() // Invoke this manually so `painter.state` is up to date immediately.
    // 这里的updatePainter更加复杂，里面有处理fadeIn动画的逻辑
    updatePainter(painter, request, imageLoader)
    return painter
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Dispatchers.Main.immediate比单纯的Dispatchers.Main更加智能，它会减少不必要的调度，当它已经在正确的上下文中，它会立刻执行相应逻辑而无需额外的重新调度。效果类似于下面这样：

suspend fun updateUiElement(val text: String) {
  /*
   * 假设updateUiElement既会被Main线程调用也会被其他线程调用。
   * 那么，当updateUiElement是在Main线程被调用的，更新uiElement.text 这段代码会直接运行，而换成Dispatchers.Main的话，它会再进行一次到Main的调度（明显这是赘余的调度）。
   */
  withContext(Dispatchers.Main.immediate) {
    uiElement.text = text
  }
  // Do context-independent logic such as logging
}
1
2
3
4
5
6
7
8
9
10

接下来我们关注AsyncImagePainter的具体实现：

/**
 * 异步执行ImageRequest并呈现结果的Painter。
 */
class AsyncImagePainter internal constructor(
    private val parentScope: CoroutineScope,
    request: ImageRequest,
    imageLoader: ImageLoader
) : Painter(), RememberObserver {

    private var rememberScope: CoroutineScope? = null
    // 图片请求的协程的Job
    private var requestJob: Job? = null
    private var drawSize = MutableStateFlow(Size.Zero)

    private var alpha: Float by mutableStateOf(1f)
    private var colorFilter: ColorFilter? by mutableStateOf(null)

    internal var painter: Painter? by mutableStateOf(null)
    internal var filterQuality = DefaultFilterQuality
    internal var isPreview = false

    /** The current [AsyncImagePainter.State]. */
    var state: State by mutableStateOf(State.Empty)
        private set

    var request: ImageRequest by mutableStateOf(request)
        internal set

    var imageLoader: ImageLoader by mutableStateOf(imageLoader)
        internal set

    override val intrinsicSize: Size
        get() = painter?.intrinsicSize ?: Size.Unspecified

    override fun DrawScope.onDraw() {
        // 绘制逻辑非常清爽
        drawSize.value = size
        // Draw the current painter.
        painter?.apply { draw(size, alpha, colorFilter) }
    }
    ...

    override fun onRemembered() {
        // 如果我们处于检查模式（预览），请跳过执行图像请求，并将状态设置为加载。
        // 对于预览模式的支持
        if (isPreview) {
            val request = request.newBuilder().defaults(imageLoader.defaults).build()
            state = State.Loading(request.placeholder?.toPainter())
            return
        }
        // 与Glide扩展类似，创建了一个子作用域
        if (rememberScope != null) return
        val scope = parentScope + SupervisorJob(parentScope.coroutineContext.job)
        rememberScope = scope

        // 观察当前请求+请求大小，并根据需要启动新请求。
        // Coil天然支持Kotlin协程，无需为生产者额外编写代码
        scope.launch {
            snapshotFlow { request }.collect { request ->
                requestJob?.cancel()
                requestJob = launch {
                    // execute是挂起函数，返回ImageResult
                    state = imageLoader.execute(updateRequest(request)).toState()
                }
            }
        }
    }

    override fun onForgotten() {
        rememberScope?.cancel()
        rememberScope = null
        requestJob?.cancel()
        requestJob = null
    }

    override fun onAbandoned() = onForgotten()

    /** Update the [request] to work with [AsyncImagePainter]. */
    private fun updateRequest(request: ImageRequest): ImageRequest {
        return request.newBuilder()
            .target(
                onStart = { placeholder ->
                     // 这里获取到placeholder的Painter并更新State为Loading
                    state = State.Loading(placeholder?.toPainter())
                }
            )
            .apply {
                if (request.defined.sizeResolver == null) {
                    // Coil内关于设置图片大小的代码
                    // size接受一个SizeResolver，一个含suspend函数的接口
                    // 获取尺寸的函数是挂起函数，非常合理，因为很多时候需要等待控件测量完毕才知道大小
                    size(DrawSizeResolver())
                }
                if (request.defined.precision != Precision.EXACT) {
                    precision(Precision.INEXACT)
                }
            }
            .build()
    }

    private fun ImageResult.toState() = when (this) {....}
    private fun Drawable.toPainter() = when (this) {...}

    /** Suspends until the draw size for this [AsyncImagePainter] is unspecified or positive. */
    private inner class DrawSizeResolver : SizeResolver {

        override suspend fun size() = drawSize
            .mapNotNull { size ->
                when {
                    // mapNotNull会将drawSize转化为Flow，同时过滤null值，然后挂起函数first()
                    // 将会返回Flow中传送的第一个值
                    size.isUnspecified -> CoilSize.ORIGINAL
                    size.isPositive -> CoilSize(size.width.roundToInt(), size.height.roundToInt())
                    else -> null
                }
            }
            .first()
    }

    /**
     * The current state of the [AsyncImagePainter].
     * 状态定义
     */
    sealed class State {
        abstract val painter: Painter?
        object Empty : State() {
            override val painter: Painter? get() = null
        }
        data class Loading(
            override val painter: Painter?,
        ) : State()
        data class Success(
            override val painter: Painter,
            val result: SuccessResult,
        ) : State()
        data class Error(
            override val painter: Painter?,
            val result: ErrorResult,
        ) : State()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

与Glide扩展库的思路类似，updatePainter函数会监听AsyncImagePainter的加载状态变化，同时更新AsyncImagePainter内的Painter字段。

@Composable
private fun updatePainter(
    imagePainter: AsyncImagePainter,
    request: ImageRequest,
    imageLoader: ImageLoader
) {
    // This may look like a useless remember, but this allows any painter instances
    // to receive remember events (if it implements RememberObserver). Do not remove.
    // 与Glide扩展库一样，允许结果Painter实例接收remember事件（如果它实现了RememberObserver）
    val state = imagePainter.state
    val painter = remember(state) { state.painter }

    // 如果没有CrossfadeTransition（实现渐入变换）的话，直接设置imagePainter.painter并返回
    val transition = request.defined.transitionFactory ?: imageLoader.defaults.transitionFactory
    if (transition !is CrossfadeTransition.Factory) {
        imagePainter.painter = painter
        return
    }

    // ValueHolder是一个包含static field的数据类，目的是储存state.painter的值，
    // 避免在state.painter值更新后函数rememberCrossfadePainter重组，
    // 与rememberUpdatedState有异曲同工之妙，估计是因为rememberUpdatedState没有
    // 传入key的API（这里要监听request变化），所以这里提供了简易的避免重组的实现
    val loading = remember(request) { ValueHolder<Painter?>(null) }
    if (state is State.Loading) loading.value = state.painter

    // 必须位于Success状态且图片是从网络或磁盘加载的，才允许启动Crossfade，否则返回即可
    if (state !is State.Success || state.result.dataSource == DataSource.MEMORY_CACHE) {
        imagePainter.painter = painter
        return
    }

    // Set the crossfade painter.
    // 千呼万唤始出来的CrossfadePainter
    imagePainter.painter = rememberCrossfadePainter(
        key = state,
        start = loading.value,
        end = painter,
        scale = request.scale,
        durationMillis = transition.durationMillis,
        fadeStart = !state.result.isPlaceholderCached,
        preferExactIntrinsicSize = transition.preferExactIntrinsicSize
    )
}
/** A simple mutable value holder that avoids recomposition. */
// 使用静态字段（static）避免重组
private class ValueHolder<T>(@JvmField var value: T)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

CrossfadePainter的实现如下：

@Stable
private class CrossfadePainter(
    private var start: Painter?,
    private val end: Painter?,
    private val scale: Scale,
    private val durationMillis: Int,
    private val fadeStart: Boolean,
    private val preferExactIntrinsicSize: Boolean,
) : Painter() {

    private var invalidateTick by mutableStateOf(0)
    private var startTimeMillis = -1L
    private var isDone = false

    private var maxAlpha: Float by mutableStateOf(1f)
    private var colorFilter: ColorFilter? by mutableStateOf(null)

    override val intrinsicSize get() = computeIntrinsicSize()

    override fun DrawScope.onDraw() {
        // 如果Alpha变化完毕，直接使用end绘制
        if (isDone) {
            drawPainter(end, maxAlpha)
            return
        }

        // Initialize startTimeMillis the first time we're drawn.
        val uptimeMillis = SystemClock.uptimeMillis()
        if (startTimeMillis == -1L) {
            startTimeMillis = uptimeMillis
        }

        // Alpha的百分比 = (当前时间 - 开始时间) / 持续时间
        val percent = (uptimeMillis - startTimeMillis) / durationMillis.toFloat()
        val endAlpha = percent.coerceIn(0f, 1f) * maxAlpha
        val startAlpha = if (fadeStart) maxAlpha - endAlpha else maxAlpha
        isDone = percent >= 1.0

        // Loading占位图渐出，Success图片结果渐入
        drawPainter(start, startAlpha)
        drawPainter(end, endAlpha)

        if (isDone) {
            start = null
        } else {
            // Increment this value to force the painter to be redrawn.
            invalidateTick++
        }
    }
    ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

现在来总结一下Coil远程图片扩展的实现思路：

图片加载：Coil对协程提供直接的支持，size函数、execute加载函数本身就是挂起函数，因此无需额外的转换逻辑。而AsyncImagePainter则使用Job来控制图片加载协程。

AsyncImagePainter并不具有@Composable上下文，作为替代，它实现了RememberObserver来监听控件是否已经离屏销毁。
图片大小约束：依赖于DrawContext的Size。
渐入动画实现：依赖于DrawScope.onDraw()内的重绘行为，通过对透明度Alpha的百分比计算来实现，令Loading状态的占位图渐出，Success状态的最终结果渐入。
loading占位图、error图等：由Coil提供具体的实现。

根据上述分析我们可以发现，相比于Glide或是Picasso，基于Kotlin协程实现的图片加载库Coil，的确能够很轻松与Jetpack Compose配合工作。

至此对扩展库的分析已经完毕。横向对比来说，无论是对Picasso还是Glide进行扩展，我们都得额外做一些处理，才能够令本身不支持协程的它们在Compose下正常工作。要注意的是，单纯使用自定义的Target把结果返回到某个State，这种简单的做法在列表中可能会遇到严重的性能问题，因为Glide也好，Picasso也好，它们内部实现中取消图片加载以避免图片错位、闪烁的重要参照物就是ImageView，随着列表滑动不断创建的自定义的Target无法被它们识别并进行相应处理。相比之下基于协程的Coil的加载能够变得简单得多，我们只需要利用Job本身就可以控制加载的协程。

最后

我和另外两位小伙伴最近合作构建了一款仿网易云的Android客户端，项目采用MVVM架构，部分界面使用Compose编写，除此之外，项目中还集成了多线程断点续传组件（by Giagor）与基于原生MediaPlayer进行再封装的音乐Service框架（by lanlin-code）

项目地址：https://github.com/giagor/PureJoy

如果项目对你有所帮助，欢迎点赞、Star、收藏~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/321232