Glide動(dòng)態(tài)獲取寬高,自動(dòng)適配瀑布流布局,解決滑動(dòng)跳動(dòng)

所遇到的問題:

問題:服務(wù)端返回的圖片沒有返回尺寸,移動(dòng)端無法確定圖片比例,導(dǎo)致RecyclerView的圖片無法充滿屏幕或者被過渡拉伸,特別是在瀑布流布局中,嚴(yán)重影響用戶體驗(yàn)

解決: 1. 服務(wù)端提供寬高 2. 動(dòng)態(tài)計(jì)算寬高
思路: 使用Glide加載圖片讓其返回Bitmap,拿到Bitmap的寬高,然后計(jì)算屏幕的寬度,通過圖片比例動(dòng)態(tài)計(jì)算高度,最后設(shè)置給ImageView即可

代碼 Kotlin:

這里圖片加載使用Glide,其他的也類似,新建一個(gè)Glide工具類,提供常用方法。

 //請求頭 ,不需要可以不加
  var header: HashMap<String, String> = hashMapOf()

 companion object {
       //重要 圖片的寬高的緩存,后面會講
        var imageSize: HashMap<Int, ImageSize> = hashMapOf()

        private var glideUtils: GlideUtils? = null
        fun getGlide(): GlideUtils {
            if (glideUtils == null) {
                glideUtils = GlideUtils()
            }
            return glideUtils!!
        }
    }
  fun load(url: String): GlideUtils {
        this.url = url
        return glideUtils!!
    }

    fun with(context: Context): GlideUtils {
        this.mContext = context
        return glideUtils!!
    }

      //主要方法:
     fun into(view: ImageView, position: Int) {
          val glideUrl = GlideUrl(url, LazyHeaders.Builder()
                .addHeader("Authorization", "ToKen")
                .build())

        Glide.with(mContext!!).asBitmap().load(glideUrl).listener(object : RequestListener<Bitmap> {
            override fun onLoadFailed(e: GlideException?, model: Any, target: Target<Bitmap>, isFirstResource: Boolean): Boolean {
                return false
            }

            override fun onResourceReady(resource: Bitmap, model: Any, target: Target<Bitmap>, dataSource: DataSource, isFirstResource: Boolean): Boolean {
                //拿到圖片的寬和高
                var width = resource.width
                var height = resource.height
                //拿到當(dāng)前屏幕的寬度的一半  如果是3列就除以3
                var screenWidthPx = mContext?.screenWidth()!! / 2
                //通過寬高比例動(dòng)態(tài)計(jì)算高度,使圖片撐滿屏幕
                height *= (width / screenWidthPx)
                //設(shè)置圖片的寬高
                val params = view.layoutParams
                //將圖片的寬高放入hashmap緩存,下一次加載圖片從緩存中取出寬高
                if (!imageSize.containsKey(position)) {
                    //設(shè)置圖片的寬高
                    params?.width = width
                    params?.height = height
                    view.layoutParams = params
                    //存入緩存
                    imageSize[position] = ImageSize(width, height)
                    Log.d("圖片的寬高", width.toString() + "---" + height)
                }
                return false
            }
        }).into(view)

注意:如果不使用緩存,那么首次加載的時(shí)候是沒有問題的,如果用戶向上滑動(dòng),由于RecyclerView的復(fù)用,會導(dǎo)致View的寬高獲取上一個(gè)View寬高,導(dǎo)致View滑動(dòng)過程中跳動(dòng),大小也會變化,導(dǎo)致顯示錯(cuò)亂;

Adapter :

 override fun convert(helper: BaseViewHolder?, item: String?) { 
        val ivItem = helper?.getView<ImageView>(R.id.iv_item_pic)
        val params = ivItem?.layoutParams 
       //  使用緩存中寬高,如果有的話
        if (GlideUtils.imageSize.containsKey(helper?.position)) {
            params?.width = GlideUtils.imageSize.get(helper?.position)?.width
            params?.height = GlideUtils.imageSize.get(helper?.position)?.height
            ivItem?.layoutParams = params     
        } 
        GlideUtils.getGlide().with(mContext).load(item!!).into(ivItem!!, helper.position) 
    }
最后: 不要忘了在onDestroy中清除緩存,這樣使用基本上就沒什么問題了,如果遇到問題或者更好的解決方法,請?jiān)谙旅媪粞浴?/h5>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容