Android：无客户图片时为CircleImageView设置灰色背景（解决矩形显示问题）

我太懂你这个糟心的问题了——用de.hdodenhof:circleimageview:2.2.0里的CircleImageView时，直接设置backgroundColor居然会显示成矩形，完全破坏了圆形控件的美感。这其实是个逻辑设计问题：CircleImageView的圆形裁剪逻辑只作用于它的前景Drawable（也就是通过src设置的图片），而背景层是在裁剪范围之外绘制的，所以会露出矩形的底色。

下面给你几个实用的解决办法，按推荐程度排序：

方案1：使用setImageDrawable设置纯色Drawable（最推荐） #

既然CircleImageView会自动裁剪前景的Drawable，那我们直接把灰色背景做成一个纯色Drawable，用setImageDrawable()来设置，这样就会被自动裁剪成圆形了。

Java代码示例：

// 当图片不可用时，设置灰色圆形背景
CircleImageView circleImageView = findViewById(R.id.your_circle_image_view);
circleImageView.setImageDrawable(new ColorDrawable(ContextCompat.getColor(this, R.color.your_gray_color)));

Kotlin代码示例：

val circleImageView = findViewById<CircleImageView>(R.id.your_circle_image_view)
circleImageView.setImageDrawable(ColorDrawable(ContextCompat.getColor(this, R.color.your_gray_color)))

方案2：自定义CircleImageView修改背景裁剪（适合需要保留背景逻辑的场景） #

如果你一定要用background属性，可以自定义一个继承自CircleImageView的类，重写draw()方法，让背景也跟着圆形裁剪逻辑走。

代码示例：

public class CustomCircleImageView extends CircleImageView {
    public CustomCircleImageView(Context context) {
        super(context);
    }

    public CustomCircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomCircleImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void draw(Canvas canvas) {
        // 先把画布裁剪成圆形，再执行原有的绘制逻辑
        Path path = new Path();
        path.addCircle(getWidth() / 2f, getHeight() / 2f, getWidth() / 2f, Path.Direction.CCW);
        canvas.clipPath(path);
        super.draw(canvas);
    }
}

之后在布局里用这个自定义控件代替原来的CircleImageView，再设置backgroundColor就会显示圆形了。

方案3：用LayerDrawable组合前景和背景（适合需要同时显示背景和占位图的场景） #

如果需要在图片加载失败时显示灰色背景+居中的占位图标，这种方法非常合适。创建一个LayerDrawable，把纯色Drawable放在底层，占位图标放在上层，再用setImageDrawable()设置即可。

代码示例：

ColorDrawable background = new ColorDrawable(ContextCompat.getColor(this, R.color.your_gray_color));
Drawable placeholder = ContextCompat.getDrawable(this, R.drawable.ic_user_placeholder);
// 给占位图设置内边距，让它居中显示
Drawable[] layers = {background, placeholder};
LayerDrawable layerDrawable = new LayerDrawable(layers);
int padding = getResources().getDimensionPixelSize(R.dimen.placeholder_padding);
layerDrawable.setLayerInset(1, padding, padding, padding, padding);

circleImageView.setImageDrawable(layerDrawable);

这些方法都能完美解决背景显示矩形的问题，你可以根据自己的实际场景挑选最合适的~

内容的提问来源于stack exchange，提问作者Yesudass Moses