标题太长貌似不行。。说字数超了，哼。。。
需求：圆角 + 裁剪
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，此时如果后台给的图片什么宽高情况都有：这个时候我就不能这样指定宽度，高度根据原图比例来搞了。那样你的高度就是乱七八糟的尺寸，那样跟UI设计就不同了，会很难看的。 我们只能固定一个宽高 - 之后呢？ 你需要设置图片缩放的方式，fitxy, centerCrop啥的。
关于Imageview属性问题，推荐一篇比较好的文章，可以当手册使用。我自己有时候忘记了就回来看看。我觉得比较形象和便于理解。所以也就不打算总结了，如果有特殊的坑再总结下：android学习笔记之ImageView的scaleType属性， 目前用的比较多的就是centerCrop和fitxy, 当然有可能有其他的也需要。
Glide里面加载图片也可以设置相关的属性，所以这个有必要去了解认知一下。
***回过头来看看centerCrop， ***当你的图片大小不一的时候，你根据UI设计有固定了ImageView的尺寸，这个时候为了保证图片显示效果，就用裁剪。 不要去搞fitxy或者类似会做缩放的效果，那样可能会产生图片变形的显示效果。
这个时候还带圆角的，你自然的可能就去找Glide圆角加载器的类，你发现从github上面找的圆角加载器可能与CenterCrop产生冲突，效果不一致：
推荐一篇文章：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圆角转换器
*@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这个东东。不然到时候遇到什么特殊需求或者较好的显示效果还是麻烦哈。。
另外关于宽度全屏，高度自适应的情况：除了我们说的指定宽度全屏，高度动态计算：比如：
image
目前做法是这样：
///< 屏幕宽高固定比例
HC_Screen.setConstraintLayoutWHNoRatio(posterIv,
HC_Screen.SCREEN_WIDTH - DensityUtil.dip2px(30),
(40 * (HC_Screen.SCREEN_WIDTH - DensityUtil.dip2px(30))) / 67);
目的就是动态设置控件的全屏宽度，高度根据图片本身固定比例动态计算。 之后Glide直接加载（这个不需要用裁剪方式，用也没关系，本身控件比例和图片比例就是一样，所以缩放可肯定没问题。哪怕你用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完全就可以了。 这样绘自动宽度填满，高度自适应调整。。。 当然这种也是要求给的图片要适合移动端，别给太大或者说给各种不同。
当然不同的话比较适合瀑布流的展示方式...瀑布流就没关系。。。所以你发发现有些布局就需要这样....
简单记录下，能满足下需求。后面我们深入Glide的一些东西的时候再说。。哎！要学的东西依然很多。。。
网友评论