Android加载长图方案

背景介绍


在某些特定场景下,我们需要考虑加载长图的需求,比如加载一幅《清明上河图》,这个好像有点过分了,那就加载1/2的《清明上河图》吧... 那TMD还不是一样道理。


言归正传说一下我这边遇到的情况,之前有图片或大图的模块是划分为H5来实现的,现在需求变更划分为原生开发,那么问题就来了。


图片尺寸为


image.png


图片大小为


image.png


这一刻我是懵逼的,哪个端图片上传的时候没限制尺寸和压缩?mdzz,
吐槽归吐槽,还是要撸起袖子解决加载长图大图的问题。
先提供几个技术方案来对比一下:


方案1:WebView加载渲染

因为图片本身也是一个URL地址,也是被WebView渲染,并且支持缩放。这是一种实现方案,遇到几M的大图WebView也是会崩溃Crash,所以这种投机的方式并不推荐。


方案2:BitmapRegionDecoder

分片加载,使用系统BitmapRegionDecoder去加载本地的图片,调用bitmapRegionDecoder.decodeRegion解析图片的矩形区域,返回bitmap,最终显示在ImageView上。这种方案需要手动处理滑动、缩放手势,网络图片还要处理缓存策略等问题。实现方式比较繁琐也不是很推荐。


方案3:SubsamplingScaleImageView

一款封装BitmapRegionDecoder的三方库,已经处理了滑动,缩放手势。我们可以考虑选择这个库来进行加载长图,但是官方上的Demo示例加载的长图均为本地图片。这可能并不符合我们的网络场景需求,所以对于网络图片,我们还要考虑不同的加载框架,


SubsamplingScaleImageView Git传送门

方案4:Glide+SubsamplingScaleImageView混合加载渲染

对于图片加载框架,Glide当然是首选,我们使用Glide进行网络图片的下载和缓存管理,FileTarget作为桥梁,SubsamplingScaleImageView进行本地资源图片的分片加载,看起来很靠谱,那么一起来实现吧。


Glide Git传送门

SubsamplingScaleImageView Git传送门

fun loadLargeImage(context: Context, res: String, imageView: SubsamplingScaleImageView) {
imageView.isQuickScaleEnabled = true
imageView.maxScale = 15F
imageView.isZoomEnabled = true
imageView.setMinimumScaleType(SubsamplingScaleImageView.SCALE_TYPE_CUSTOM)

Glide.with(context).load(res).downloadOnly(object : SimpleTarget<File?>() {
override fun onResourceReady(resource: File, glideAnimation: Transition<in File?>?) {

val options = BitmapFactory.Options()
options.inJustDecodeBounds = true
BitmapFactory.decodeFile(resource.absolutePath, options)
val sWidth = options.outWidth
val sHeight = options.outHeight
options.inJustDecodeBounds = false
val wm = ContextCompat.getSystemService(context, WindowManager::class.java)
val width = wm?.defaultDisplay?.width ?: 0
val height = wm?.defaultDisplay?.height ?: 0
if (sHeight >= height
&& sHeight / sWidth >= 3) {
imageView.setMinimumScaleType(SubsamplingScaleImageView.SCALE_TYPE_CENTER_CROP)
imageView.setImage(ImageSource.uri(Uri.fromFile(resource)), ImageViewState(0.5f, PointF(0f, 0f), 0))
} else {
imageView.setMinimumScaleType(SubsamplingScaleImageView.SCALE_TYPE_CUSTOM)
imageView.setImage(ImageSource.uri(Uri.fromFile(resource)))
imageView.setDoubleTapZoomStyle(SubsamplingScaleImageView.ZOOM_FOCUS_CENTER_IMMEDIATE)
}
}
override fun onLoadFailed(errorDrawable: Drawable?) {
super.onLoadFailed(errorDrawable)
}
})

}

这是我封装起来的一个方法,就很简单就能理解了, 包括SubsamplingScaleImageView的缩放设置,默认展示状态、缩放、位置,计算当前图片高宽比为3倍进行长图渲染处理,否则按正常图片渲染处理。


最后快用下面的这张完整版《清明上河图》来试一试效果吧~ 赞


清明上河图_简书_爱吃大蒜.jpeg


如果我帮助你成功实现了加载长图的需求,千万要记得回来点赞哦,ღ( ´・ᴗ・` )比心

作者:rivenlee
链接:https://juejin.cn/post/6955427322291814431
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

0 个评论

要回复文章请先登录注册