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

所遇到的問題:

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

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

代碼 Kotlin:

這里圖片加載使用Glide,其他的也類似芹啥,新建一個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
                //拿到當前屏幕的寬度的一半  如果是3列就除以3
                var screenWidthPx = mContext?.screenWidth()!! / 2
                //通過寬高比例動態(tài)計算高度,使圖片撐滿屏幕
                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)

注意:如果不使用緩存汽纠,那么首次加載的時候是沒有問題的,如果用戶向上滑動傀履,由于RecyclerView的復(fù)用虱朵,會導致View的寬高獲取上一個View寬高,導致View滑動過程中跳動,大小也會變化碴犬,導致顯示錯亂絮宁;

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中清除緩存翅敌,這樣使用基本上就沒什么問題了羞福,如果遇到問題或者更好的解決方法,請在下面留言蚯涮。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末治专,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子遭顶,更是在濱河造成了極大的恐慌张峰,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件棒旗,死亡現(xiàn)場離奇詭異喘批,居然都是意外死亡,警方通過查閱死者的電腦和手機铣揉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門饶深,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人逛拱,你說我怎么就攤上這事敌厘。” “怎么了朽合?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵俱两,是天一觀的道長。 經(jīng)常有香客問我曹步,道長宪彩,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任讲婚,我火速辦了婚禮尿孔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘筹麸。我一直安慰自己纳猫,他們只是感情好,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布竹捉。 她就那樣靜靜地躺著,像睡著了一般尚骄。 火紅的嫁衣襯著肌膚如雪块差。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天,我揣著相機與錄音憨闰,去河邊找鬼状蜗。 笑死,一個胖子當著我的面吹牛鹉动,可吹牛的內(nèi)容都是我干的轧坎。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼泽示,長吁一口氣:“原來是場噩夢啊……” “哼缸血!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起械筛,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤捎泻,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后埋哟,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體笆豁,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年赤赊,在試婚紗的時候發(fā)現(xiàn)自己被綠了闯狱。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡抛计,死狀恐怖哄孤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情爷辱,我是刑警寧澤录豺,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站饭弓,受9級特大地震影響双饥,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜弟断,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一咏花、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧阀趴,春花似錦昏翰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至叔汁,卻和暖如春统求,著一層夾襖步出監(jiān)牢的瞬間检碗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工码邻, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留折剃,地道東北人。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓像屋,卻偏偏與公主長得像怕犁,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子己莺,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容