Android如何实现运行时动态加载的自定义圆角背景图片

原有方案失效原因 #

你之前尝试的两种方案没有达到预期，核心问题如下：

• ShapeableImageView配置不生效的常见原因
  • 项目未正常依赖Material组件库，或当前页面主题未继承Theme.MaterialComponents系列主题，导致组件的形状裁剪逻辑无法正常工作
  • 给ShapeableImageView设置了android:background属性，覆盖了组件本身的形状渲染层
  • 代码配置圆角时仅设置了底部两个角的参数，未明确指定顶部两个角为0圆角，部分版本的Material库会读取全局默认圆角值，打乱预期效果
  • 使用图片加载框架加载动态图片时，额外添加的圆角/裁剪变换覆盖了ShapeableImageView本身的裁剪效果
• Layer-list XML方案不生效的核心原因
  • 图层顺序为圆角白底在下、原始矩形图片在上，上层图片未做任何裁剪处理，会完全遮挡下层的圆角效果
  • 该方案将图片资源硬编码在XML中，本身就不支持运行时从数据库动态替换图片，不符合需求

推荐实现方案 #

方案一：ShapeableImageView实现（代码量最少） #

这是适配动态换图场景最简便的方案，步骤如下：

1. 先确认app模块的build.gradle中已经引入Material组件依赖（版本可根据项目compileSdk版本选择，示例：implementation 'com.google.android.material:material:1.9.0'）
2. 布局中添加ShapeableImageView，不要给控件设置android:background属性：

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/iv_dynamic_image"
    android:layout_width="match_parent"
    android:layout_height="400dp"
    android:scaleType="centerCrop"/>

3. 代码中动态配置四个角的圆角参数，明确指定不需要圆角的上角参数为0，避免默认值干扰：

// 圆角值单位为像素，可根据设计稿尺寸换算
ShapeableImageView ivDynamic = findViewById(R.id.iv_dynamic_image);
ivDynamic.setShapeAppearanceModel(ivDynamic.getShapeAppearanceModel()
        .toBuilder()
        .setTopLeftCorner(CornerFamily.ROUNDED, 0f)
        .setTopRightCorner(CornerFamily.ROUNDED, 0f)
        .setBottomLeftCorner(CornerFamily.ROUNDED, 500f)
        .setBottomRightCorner(CornerFamily.ROUNDED, 200f)
        .build());

4. 动态加载从数据库获取的图片即可，不需要额外做圆角处理，组件会自动完成裁剪。如果使用Glide加载，直接正常调用即可，不要重复添加圆角变换：

// 数据库取出的图片可以是Uri、本地路径、Bitmap类型
Glide.with(this)
        .load(imageDataFromDb)
        .into(ivDynamic);

如果因为项目主题限制无法使用MaterialComponents主题，可以给控件单独指定Material主题规避渲染问题：

<com.google.android.material.imageview.ShapeableImageView
    ...
    android:theme="@style/Theme.MaterialComponents.Light.NoActionBar"/>

方案二：自定义Bitmap变换（不依赖Material组件） #

如果项目不想引入Material组件，可以自定义多圆角Bitmap变换，配合普通ImageView实现效果，同样支持动态换图：

1. 自定义圆角变换类：

public class MultiRoundedCornerTransform extends BitmapTransformation {
    private final float tlRadius, trRadius, blRadius, brRadius;

    public MultiRoundedCornerTransform(float topLeft, float topRight, float bottomLeft, float bottomRight) {
        this.tlRadius = topLeft;
        this.trRadius = topRight;
        this.blRadius = bottomLeft;
        this.brRadius = bottomRight;
    }

    @Override
    protected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap source, int outWidth, int outHeight) {
        Bitmap result = pool.get(outWidth, outHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(result);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));

        RectF rect = new RectF(0f, 0f, outWidth, outHeight);
        float[] radiusArr = new float[]{
                tlRadius, tlRadius,
                trRadius, trRadius,
                brRadius, brRadius,
                blRadius, blRadius
        };
        Path path = new Path();
        path.addRoundRect(rect, radiusArr, Path.Direction.CW);
        canvas.drawPath(path, paint);
        return result;
    }

    @Override
    public void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {
        messageDigest.update(("multi_radius_" + tlRadius + trRadius + blRadius + brRadius).getBytes(CHARSET));
    }
}

2. 加载图片时传入对应圆角参数即可，普通ImageView即可生效：

Glide.with(this)
        .load(imageDataFromDb)
        .transform(new MultiRoundedCornerTransform(0f, 0f, 500f, 200f))
        .into(normalImageView);

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