短视频平台源码Jetpack Compose异步加载图片实现

Android开发中异步加载图片是非常常见的需求，下面一起来看一下短视频平台源码Jetpack Compose异步加载图片实现的相关代码
借助Glide库自己写
Glide开源库基本上成为了Android中加载图片的首选，其简单易用的API和强大的缓存能力让这一过程变得十分方便。
自然在Jetpack Compose中也可以使用。
引入依赖
在模块中的build.gradle中加入

implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'

编写函数
如何让Glide把图片加载到Compose组件上去呢？我们可以利用其提供的into(Target)指定自定义的target，再搭配上mutableState<Bitmap>的返回值，即可实现在图片加载完成后Compose自动更新
图片加载时一般会有一个默认的loading图，我们可以如法炮制，让Glide先帮我们加载一张本地图片，然后再去加载网络图片即可。
编写的函数如下：

 

/**
* 使用Glide库加载网络图片
* @author [FunnySaltyFish](https://funnysaltyfish.github.io)
* @date 2021-07-14
* @param context Context 合理的Context
* @param url String 加载的图片URL
* @param defaultImageId Int 默认加载的本地图片
* @return MutableState<Bitmap?> 加载完成（失败为null）的Bitmap-State
*/
fun loadImage(
context: Context,
url: String,
@DrawableRes defaultImageId: Int = R.drawable.load_holder
): MutableState<Bitmap?> {
val TAG = "LoadImage"
val bitmapState: MutableState<Bitmap?> = mutableStateOf(null)

//为请求加上 Headers ，提高访问成功率
val glideUrl = GlideUrl(url,LazyHeaders.Builder().addHeader("User-Agent","Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.67").build())

//先加载本地图片
Glide.with(context)
.asBitmap()
.load(defaultImageId)
.into(object : CustomTarget<Bitmap>() {
override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
//自定义Target，在加载完成后将图片资源传递给bitmapState
bitmapState.value = resource
}

override fun onLoadCleared(placeholder: Drawable?) {}
})

//然后再加载网络图片
try {
Glide.with(context)
.asBitmap()
.load(glideUrl)
.into(object : CustomTarget<Bitmap>() {
override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
//自定义Target，在加载完成后将图片资源传递给bitmapState
bitmapState.value = resource
}

override fun onLoadCleared(placeholder: Drawable?) {}
})
} catch (glideException: GlideException) {
Log.d(TAG, "error: ${glideException.rootCauses}")
}

return bitmapState
}

 

以上就是短视频平台源码Jetpack Compose异步加载图片实现的相关代码， 更多内容欢迎关注之后的文章