Jetpack Compose中如何编程创建Drawable作为Coil的自定义占位图

以下两种方案都可以生成符合要求的动态Drawable，直接传入Coil的占位参数即可使用。

方案1：使用原生Android GradientDrawable（无额外依赖，性能最优） #

直接用Android SDK自带的GradientDrawable创建圆角矩形，不需要依赖Compose相关API：

// 调用你的自研算法获取动态颜色，返回ARGB格式的Int色值即可
val dynamicColor = getCustomDynamicColor()
// 圆角大小如果用dp单位，先转成px适配不同屏幕密度
val cornerRadiusPx = 12.dp.toPx()

val roundPlaceholder = GradientDrawable().apply {
    shape = GradientDrawable.RECTANGLE
    setColor(dynamicColor)
    // 按左上、右上、右下、左下的顺序设置四个角的圆角半径，每个角需传入x、y两个半径值
    cornerRadii = floatArrayOf(
        cornerRadiusPx, cornerRadiusPx,
        cornerRadiusPx, cornerRadiusPx,
        cornerRadiusPx, cornerRadiusPx,
        cornerRadiusPx, cornerRadiusPx
    )
}

方案2：复用Compose Shape体系（适合需要和Compose侧形状保持一致的场景） #

如果你的占位形状需要和其他Compose组件的Shape定义统一，可用Compose提供的转换工具将Shape转成原生Drawable：

val dynamicColor = getCustomDynamicColor()
// 支持任意Compose Shape实现，比如RoundedCornerShape、CutCornerShape或自定义Shape
val placeholderShape = RoundedCornerShape(12.dp)

val context = LocalContext.current
// 用remember缓存Drawable，避免重组时重复创建
val placeholderDrawable = remember(dynamicColor, placeholderShape) {
    androidx.compose.ui.graphics.drawable.ShapeDrawable(
        shape = placeholderShape,
        color = Color(dynamicColor)
    ).toDrawable(context.resources)
}

Coil调用示例 #

生成的Drawable直接传入placeholder参数即可：

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("你的图片资源地址")
        .placeholder(placeholderDrawable)
        .build(),
    contentDescription = "图片描述"
)

注意事项 #

• 所有dp单位的尺寸必须转成px再传给原生Drawable API，避免不同密度设备显示效果不一致
• 动态颜色生成逻辑如果和主题相关，记得将主题状态加入remember的依赖项，主题切换时自动重新生成Drawable
• 如果需要设置描边、渐变等效果，可以直接在GradientDrawable的apply代码块里加对应配置即可

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