Android加載長圖的多種方案分享

背景介紹

在某些特定場景下,我們需要考慮加載長圖的需求,比如加載一幅《清明上河圖》,這個好像有點過分瞭,那就加載1/2的《清明上河圖》吧… 那TMD還不是一樣道理。

言歸正傳說一下我這邊遇到的情況,之前有圖片或大圖的模塊是劃分為H5來實現的,現在需求變更劃分為原生開發,那麼問題就來瞭。

圖片尺寸為

圖片大小為

這一刻我是懵逼的,哪個端圖片上傳的時候沒限制尺寸和壓縮?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 sWidth = BitmapFactory.decodeFile(resource.absolutePath).width
                    val sHeight = BitmapFactory.decodeFile(resource.absolutePath).height
                    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倍進行長圖渲染處理,否則按正常圖片渲染處理。

最後快用下面的這張完整版《清明上河圖》來試一試效果吧~ 贊

以上就是Android加載長圖的多種方案分享的詳細內容,更多關於Android加載長圖的資料請關註WalkonNet其它相關文章!