关于Glide+RecyclerView图形错乱和闪烁
在RecyclerView中使用Glide加载图片,当图片宽或高其中有一种是wrap_content的时候, 在Adapter bindView动态设置设置图片宽或者高的时候要调用 imageView.layout(0,0,0,0)重置imageView,否则来回滑动RecyclerView的时候图片会位置错乱或者图片闪烁
关于图形转换
一个集合图形转换的库 : glide-transformations 可实现大部分图形转换
注意
使用了Transformations后就不能再使用centerCrop()和fitCenter()了，不然转换会失效，被后者的效果所覆盖
- 圆形图片
项目中遇到使用圆形图像显示,默认的裁剪方式是居中裁剪,在项目中有大多人物形象照片的时候,居中裁剪并不适用,头部大多在上方,居中裁剪会把头裁掉
Paste_Image.png
--->
Paste_Image.png
扩展一下,参照glide-transformations库中的圆形图像方法,扩展成可自定义CropType的类:
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.Transformation;
import com.bumptech.glide.load.engine.Resource;
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapResource;
/**
* 圆形头像支持CropType:top center bottom
*/
public class CircleTransformation implements Transformation<Bitmap> {
private BitmapPool mBitmapPool;
private CropType mCropType = CropType.CENTER;
public enum CropType {
TOP,
CENTER,
BOTTOM
}
public CircleTransformation(Context context) {
this(Glide.get(context).getBitmapPool(), CropType.CENTER);
}
public CircleTransformation(Context context, CropType cropType) {
this(Glide.get(context).getBitmapPool(), cropType);
}
public CircleTransformation(BitmapPool pool, CropType cropType) {
this.mBitmapPool = pool;
this.mCropType = cropType;
}
@Override
public Resource<Bitmap> transform(Resource<Bitmap> resource, int outWidth, int outHeight) {
Bitmap source = resource.get();
int w = source.getWidth();
int h = source.getHeight();
int size = Math.min(w, h);
int width = (w - size) / 2;
int height = (h - size) / 2;
Bitmap bitmap = mBitmapPool.get(size, size, Bitmap.Config.ARGB_8888);
if (bitmap == null) {
bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
}
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
BitmapShader shader =
new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
if (width != 0 || height != 0) {
// 图像不是正方形,移动窗口
Matrix matrix = new Matrix();
switch (mCropType) {
case TOP:
matrix.setTranslate(-width, 0);
break;
case CENTER:
matrix.setTranslate(-width, -height);
break;
case BOTTOM:
matrix.setTranslate(-width, -(h-size));
break;
}
shader.setLocalMatrix(matrix);
}
paint.setShader(shader);
paint.setAntiAlias(true);
float r = size / 2f;
canvas.drawCircle(r, r, r, paint);
return BitmapResource.obtain(bitmap, mBitmapPool);
}
@Override
public String getId() {
return "CircleTransformation()";
}
}
使用方法
Glide.with(mContext).load(url)
.placeholder(R.color.colorf2f2f2)
.bitmapTransform(new CircleTransformation(mContext, CircleTransformation.CropType.TOP))
.into(imageView);
效果:
Paste_Image.png
- 圆角图片 + centerCrop()
上边说过,使用了Transformations后就不能再使用centerCrop()和fitCenter()了,如果想显示圆角,又想用centerCrop()该咋整呢
方法如下
Glide.with(mContext).load(url)
.bitmapTransform(new CenterCrop(mContext),new RoundedCornersTransformation(mContext,30,0))
.into(imageView);
//CenterCrop为Glide里的类
//RoundedCornersTransformation为glide-transformations里的类
- 圆角图片 + topCrop() / bottomCrop()
glide-transformations 里提供了一个类CropTransformation就是用来实现centerCrop或者topCrop,bottomCrop的
使用如下
Glide.with(mContext).load(url)
.bitmapTransform(new CropTransformation(mContext,w,h, CropTransformation.CropType.TOP),new RoundedCornersTransformation(mContext,30,0))
.into(imageView);
w h 为imageView的宽和高
网友评论