關(guān)于Glide+RecyclerView圖形錯亂和閃爍

在RecyclerView中使用Glide加載圖片,當圖片寬或高其中有一種是wrap_content的時候, 在Adapter bindView動態(tài)設(shè)置設(shè)置圖片寬或者高的時候要調(diào)用 imageView.layout(0,0,0,0)重置imageView,否則來回滑動RecyclerView的時候圖片會位置錯亂或者圖片閃爍

關(guān)于圖形轉(zhuǎn)換

一個集合圖形轉(zhuǎn)換的庫 : glide-transformations 可實現(xiàn)大部分圖形轉(zhuǎn)換

注意

使用了Transformations后就不能再使用centerCrop()和fitCenter()了，不然轉(zhuǎn)換會失效，被后者的效果所覆蓋

• 圓形圖片
  項目中遇到使用圓形圖像顯示,默認的裁剪方式是居中裁剪,在項目中有大多人物形象照片的時候,居中裁剪并不適用,頭部大多在上方,居中裁剪會把頭裁掉

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就是用來實現(xiàn)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的寬和高