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异步加载图片实现的相关代码, 更多内容欢迎关注之后的文章