標題太長貌似不行掠械。育八。說字數(shù)超了吩蔑,哼体谒。。翻默。
需求:圓角 + 裁剪
<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)計算:比如:
目前做法是這樣:
///< 屏幕寬高固定比例
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的一些東西的時候再說亮靴。馍盟。哎!要學的東西依然很多茧吊。贞岭。。