Glide placeholder默认图圆角正确设置姿势

Glide placeholder默认图圆角正确设置姿势

网上看了下别人的方案,设置默认图圆角,都是用thumbnail的方式,但thumbnail不是用来实现缩略图的吗?这种方式可以达到效果,但是也难避免出现闪烁问题。而且假如你有缩略图的需求,那么此时方法被占用,就很尴尬。网上的实现如下:

public static void loadRoundImg(ImageView imageView, String url, @DrawableRes int placeholderId,
                                    @DrawableRes int errorId, float radius) {
 
        Glide.with(imageView.getContext()).load(url)
                .apply(new RequestOptions().placeholder(placeholderId).error(errorId).centerCrop()
                        .transform(new GlideRoundTransform(imageView.getContext(), radius)))
                .thumbnail(loadTransform(imageView.getContext(),placeholderId,radius))
                .thumbnail(loadTransform(imageView.getContext(),errorId,radius))
                .into(imageView);
    }
    
     private static  RequestBuilder<Drawable> loadTransform(Context context, @DrawableRes int placeholderId, float radius) {
 
        return Glide.with(context)
                .load(placeholderId)
                .apply(new RequestOptions().centerCrop()
                        .transform(new GlideRoundTransform(context, radius)));
 
    }

但最好的实现方式,还是应该围绕着placeholder展开,对不对?查了下placeholder的接收,除了可以接收资源文件,还可以接收Drawable对象,那这边就是突破口。下面是我的方式:

	private static Map<String, CircleRoundDrawable> circleRoundDrawableMap = new HashMap<>();
	/**
     * 
     * @param context
     * @param iv
     * @param url
     * @param corner 单位px
     * @param cornerPercent 圆角占placeholder图宽度百分比 0f-1f
     */
    public void displayRoundedCornersImage (Context context, ImageView iv, String url, int corner, float cornerPercent) {
        if (!isContextError(context)) {
            CircleRoundDrawable circleRoundDrawable = circleRoundDrawableMap.get(setPlaceHolder() + "");
            if (circleRoundDrawable == null) {
                circleRoundDrawable = new CircleRoundDrawable(context, setPlaceHolder());
                circleRoundDrawableMap.put(setPlaceHolder() + "", circleRoundDrawable);
            }
            circleRoundDrawable.setRoundAngle(cornerPercent);
            circleRoundDrawable.setType(1);
            GlideApp.with(context)
                    .load(url + "?x-oss-process=image/resize,p_100")
                    .apply(RequestOptions.bitmapTransform(new RoundedCorners(corner)))
                    .thumbnail(GlideApp.with(context).load(url + "?x-oss-process=image/resize,p_30").apply(RequestOptions.bitmapTransform(new RoundedCorners(corner))))
                    .placeholder(circleRoundDrawable)
                    .error(circleRoundDrawable)
                    .into(iv);
        }
    }

切记传入的drawable对象,需要实现下缓存,不然每次new一个drawable对象进去,会出现闪图的情况。你可以自行替换你自己的圆角实现方式,但如果没有,下面是我的CircleRoundDrawable实现

public class CircleRoundDrawable extends Drawable {

    private Paint paint;//画笔
    private int mWidth;//图片宽与高的最小值
    private RectF rectF;//矩形
    private int radius;//半径
    private int roundAngle = 30;//默认圆角
    private Bitmap bitmap;//位图
    private int type=2;//默认为圆形

    public static final int TYPE_Round = 1;
    public static final int Type_Circle = 2;


    public CircleRoundDrawable(Context context, int resID) {
        this(BitmapFactory.decodeResource(context.getResources(), resID), 0, 0);
    }

    public CircleRoundDrawable(Context context, int resID, int w, int h) {
        this(BitmapFactory.decodeResource(context.getResources(), resID), w, h);
    }

    public CircleRoundDrawable(Bitmap oldBitmap, int w, int h) {
        if (w != 0) {
            Matrix matrix = new Matrix();
            float scaleWidth = ((float) w / oldBitmap.getWidth());
            float scaleHeight = ((float) h / oldBitmap.getHeight());
            matrix.postScale(scaleWidth, scaleHeight);
            this.bitmap = Bitmap.createBitmap(oldBitmap, 0, 0, oldBitmap.getWidth(), oldBitmap.getHeight(),
                    matrix, true);
        } else {
            this.bitmap = oldBitmap;
        }
        paint = new Paint();
        paint.setAntiAlias(true);//抗锯齿
        paint.setDither(true);//抖动,不同屏幕尺的使用保证图片质量

        ///位图渲染器
        BitmapShader bitmapShader = new BitmapShader(this.bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        paint.setShader(bitmapShader);
        mWidth = Math.min(this.bitmap.getWidth(), this.bitmap.getHeight());
        //初始化半径
        radius = mWidth / 2;
    }

    /***
     * 设置圆角
     * @param roundAngle 百分比
     */
    public void setRoundAngle(float roundAngle) {
        this.roundAngle = (int) (roundAngle * this.bitmap.getWidth());
    }

    public void setType(int type) {
        this.type = type;
    }

    /**
     * drawable将被绘制在画布上的区域
     *
     * @param left
     * @param top
     * @param right
     * @param bottom
     */
    @Override
    public void setBounds(int left, int top, int right, int bottom) {
        super.setBounds(left, top, right, bottom);
        //绘制区域
        rectF = new RectF(left, top, right, bottom);
    }

    /**
     * 核心方法
     *
     * @param canvas
     */
    @Override
    public void draw(@NonNull Canvas canvas) {
        if (type ==Type_Circle) {
            canvas.drawCircle(mWidth / 2, mWidth / 2, radius, paint);
        } else{
            canvas.drawRoundRect(rectF, roundAngle, roundAngle, paint);
        }

    }

    @Override
    public void setAlpha(int i) {
        paint.setAlpha(i);
        invalidateSelf();//更新设置

    }

    @Override
    public int getIntrinsicHeight() {
        if (type == Type_Circle) {
            return mWidth;
        }
        return bitmap.getHeight();
    }

    @Override
    public int getIntrinsicWidth() {
        if (type == Type_Circle) {
            return mWidth;
        }
        return bitmap.getWidth();
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        paint.setColorFilter(colorFilter);
        invalidateSelf();//更行设置

    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

完毕!思路供参考

你可能感兴趣的:(Glide placeholder默认图圆角正确设置姿势)