Glide加載之圓角兼容CenCrop+寬度鋪滿高度自適應坑

標題太長貌似不行掠械。育八。說字數(shù)超了吩蔑,哼体谒。。翻默。

需求:圓角 + 裁剪

image

<figcaption style="margin-top: 0.66667em; padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">后臺圖片的尺寸寬高都不一樣</figcaption>

如果說后臺給的圖片的寬高都是不一樣的缸沃,你就很難做到按比例縮放,還能不變形修械,還能全部顯示趾牧。這個不太可能。*** 如果比例一樣就簡單了**肯污,你可以直接指定一個寬度翘单,然后高度按照比例寬度得到:

nowH = ( nowW * oldH) / oldw; 就這樣就可以搞定了呀,對吧蹦渣。哄芜。。當然也可以直接指定寬高柬唯,比如原圖是640 * 320 , 你可以xml里面或者代碼直接設定為比如320 * 160 认臊,當然也是同樣比例縮放的。 其實都一樣锄奢。失晴。。

But拘央,此時如果后臺給的圖片什么寬高情況都有:這個時候我就不能這樣指定寬度涂屁,高度根據(jù)原圖比例來搞了。那樣你的高度就是亂七八糟的尺寸灰伟,那樣跟UI設計就不同了拆又,會很難看的。 我們只能固定一個寬高 - 之后呢袱箱? 你需要設置圖片縮放的方式遏乔,fitxy, centerCrop啥的。

關(guān)于Imageview屬性問題发笔,推薦一篇比較好的文章,可以當手冊使用凉翻。我自己有時候忘記了就回來看看了讨。我覺得比較形象和便于理解。所以也就不打算總結(jié)了,如果有特殊的坑再總結(jié)下:android學習筆記之ImageView的scaleType屬性前计, 目前用的比較多的就是centerCrop和fitxy, 當然有可能有其他的也需要胞谭。

Glide里面加載圖片也可以設置相關(guān)的屬性,所以這個有必要去了解認知一下男杈。

***回過頭來看看centerCrop丈屹, ***當你的圖片大小不一的時候,你根據(jù)UI設計有固定了ImageView的尺寸伶棒,這個時候為了保證圖片顯示效果旺垒,就用裁剪。 不要去搞fitxy或者類似會做縮放的效果肤无,那樣可能會產(chǎn)生圖片變形的顯示效果先蒋。

這個時候還帶圓角的,你自然的可能就去找Glide圓角加載器的類宛渐,你發(fā)現(xiàn)從github上面找的圓角加載器可能與CenterCrop產(chǎn)生沖突竞漾,效果不一致:

推薦一篇文章:Glide4.0 centerCrop屬性和圓角 沖突 這里面就說明了如何重寫加載器以及解決共存問題。 具體的Glide很多屬性窥翩,后面小白我還需要專門研究才行业岁。 目前就解決了先。

    package com.xxxx.app.tools;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;
import com.bumptech.glide.load.resource.bitmap.TransformationUtils;

import java.security.MessageDigest;

/*
*@Description: Glide圓角轉(zhuǎn)換器
*@Author: hl
*@Time: 2018/7/10 10:56
*/
public class GlideRoundTransform extends BitmapTransformation {

    private static float radius = 0f;

    public GlideRoundTransform(Context context) {
        this(context, 4);
    }

    public GlideRoundTransform(Context context, int dp) {
        super(context);
        this.radius = Resources.getSystem().getDisplayMetrics().density * dp;
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        Bitmap bitmap = TransformationUtils.centerCrop(pool, toTransform, outWidth, outHeight);
        return roundCrop(pool, bitmap);
    }

    private static Bitmap roundCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
        canvas.drawRoundRect(rectF, radius, radius, paint);
        return result;
    }

    public String getId() {
        return getClass().getName() + Math.round(radius);
    }

    @Override
    public void updateDiskCacheKey(MessageDigest messageDigest) {

    }
}

封裝一下:

    public class GlideUtil {
    private static RequestOptions roundRequestOptions = null;

    /**
     * 獲取圓角屬性
     *
     * @param radius
     * @return
     */
    public static RequestOptions getRoundRe(Context context, int radius) {
        if (null == roundRequestOptions) {
            roundRequestOptions = new RequestOptions()
                    .transform(new GlideRoundTransform(context, radius));
        }
        return roundRequestOptions;
    }
 } 

用的時候這樣:

    ///< 基本信息
        GlideApp.with(this)
                .load("url"))
                .apply(GlideUtil.getRoundRe(this, 4))
                .placeholder(R.drawable.home_list_img_default)
                .into(prePicImageView);

基本上這樣就沒什么問題了寇蚊。叨襟。。

有機會幔荒,一定要好好研究這個BitmapTransformation這個東東糊闽。不然到時候遇到什么特殊需求或者較好的顯示效果還是麻煩哈。爹梁。

另外關(guān)于寬度全屏右犹,高度自適應的情況:除了我們說的指定寬度全屏,高度動態(tài)計算:比如:

image

目前做法是這樣:

     ///< 屏幕寬高固定比例
 HC_Screen.setConstraintLayoutWHNoRatio(posterIv,
                            HC_Screen.SCREEN_WIDTH - DensityUtil.dip2px(30),
                           (40 * (HC_Screen.SCREEN_WIDTH - DensityUtil.dip2px(30))) / 67);

目的就是動態(tài)設置控件的全屏寬度姚垃,高度根據(jù)圖片本身固定比例動態(tài)計算念链。 之后Glide直接加載(這個不需要用裁剪方式,用也沒關(guān)系积糯,本身控件比例和圖片比例就是一樣掂墓,所以縮放可肯定沒問題。哪怕你用fitxy也沒問題 ---- So看成,你可以用圓角的IamgeView君编,就不用加載器了):

@BindView(R.id.fpma_posterIv)
**public **RoundedImageView posterIv;

      GlideApp.with(context)
                    .load(promotionBean.getCover())
                    //.override(HC_Screen.SCREEN_WIDTH, (40 * (HC_Screen.SCREEN_WIDTH)) / 67)
                    //.apply(GlideUtil.getRoundCrop(context, 4))
                    .placeholder(R.drawable.home_list_img_default_02)
                    .into(posterIv);

所以有時候你不得不去固定一些東西。另外如果不涉及到圓角的話川慌,其實這樣更簡單:

   <ImageView

     android:layout_width="match_parent"

     android:layout_height="wrap_content"

     android:adjustViewBounds="true"

     android:scaleType="fitXY" />

fitXY完全就可以了吃嘿。 這樣繪自動寬度填滿祠乃,高度自適應調(diào)整。兑燥。亮瓷。 當然這種也是要求給的圖片要適合移動端,別給太大或者說給各種不同降瞳。

當然不同的話比較適合瀑布流的展示方式...瀑布流就沒關(guān)系嘱支。。挣饥。所以你發(fā)發(fā)現(xiàn)有些布局就需要這樣....

簡單記錄下除师,能滿足下需求。后面我們深入Glide的一些東西的時候再說亮靴。馍盟。哎!要學的東西依然很多茧吊。贞岭。。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末搓侄,一起剝皮案震驚了整個濱河市瞄桨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌讶踪,老刑警劉巖芯侥,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異乳讥,居然都是意外死亡柱查,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門云石,熙熙樓的掌柜王于貴愁眉苦臉地迎上來唉工,“玉大人,你說我怎么就攤上這事汹忠×芟酰” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵宽菜,是天一觀的道長谣膳。 經(jīng)常有香客問我,道長铅乡,這世上最難降的妖魔是什么继谚? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮隆判,結(jié)果婚禮上犬庇,老公的妹妹穿的比我還像新娘僧界。我一直安慰自己侨嘀,他們只是感情好臭挽,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著咬腕,像睡著了一般欢峰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上涨共,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天纽帖,我揣著相機與錄音,去河邊找鬼举反。 笑死懊直,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的火鼻。 我是一名探鬼主播室囊,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼魁索!你這毒婦竟也來了融撞?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤粗蔚,失蹤者是張志新(化名)和其女友劉穎尝偎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鹏控,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡致扯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了当辐。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片抖僵。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖瀑构,靈堂內(nèi)的尸體忽然破棺而出裆针,到底是詐尸還是另有隱情,我是刑警寧澤寺晌,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布世吨,位于F島的核電站,受9級特大地震影響呻征,放射性物質(zhì)發(fā)生泄漏耘婚。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一陆赋、第九天 我趴在偏房一處隱蔽的房頂上張望沐祷。 院中可真熱鬧嚷闭,春花似錦、人聲如沸赖临。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽兢榨。三九已至嗅榕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間吵聪,已是汗流浹背凌那。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留吟逝,地道東北人帽蝶。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像块攒,于是被迫代替她去往敵國和親励稳。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

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