如何使用 Jetpack Compose 在我的屏幕上使用 9 patch drawable (.9.png)？

Question

我正在尝试在 Image composable 中使用 .9.png 文件作为 :

            Image(
            painter = painterResource(id = R.drawable.shadow_faq),
            contentDescription = "Faq card 1",
            modifier = Modifier
                .constrainAs(imgGeneral) {
                    top.linkTo(glImgGeneralTop)
                    bottom.linkTo(glImgBottom)
                    start.linkTo(glImgLeft)
                    end.linkTo(glImgRight)
                    height = Dimension.fillToConstraints
                    width = Dimension.fillToConstraints
                }
        )

但是在这样做时我遇到了一个渲染问题 java.lang.IllegalArgumentException: Only VectorDrawables and rasterized asset types are supported ex. PNG, JPG

如何在 Jetpack Compose 中使用 .9.png 文件？

Answer 1

您可以使用伴奏中的 DrawablePainter returns 一个 Painter 绘制一个 Android Drawable.

Image(
    rememberDrawablePainter(drawable = ContextCompat.getDrawable(context,R.drawable.xxxx) ),
    contentDescription = "Faq card 1"
)

更新：从1.0.0-rc02和伴奏者0.14.0开始，您可以使用coil-compose版本：

Image(
    rememberImagePainter(ContextCompat.getDrawable(context,R.drawable.xxx)),
    contentDescription = "Faq card 1",
)

Answer 2

已编辑：请使用Gabriele答案。

~~我尝试了 Gabriele 解决方案，但当我设置特定尺寸（如 100x200）时，它对我不起作用。~~

这是我的解决方案...

val context = LocalContext.current
val (w, h) = with(LocalDensity.current) {
    200.dp.roundToPx() to 100.dp.roundToPx()
}
val image = remember {
    ContextCompat.getDrawable(context, R.drawable.balao)?.toBitmap(w, h)?.asImageBitmap()!!
}
Image(image, contentDescription = null)

Answer 3

有时，我们加载 9.png 作为视图的背景，就像聊天应用程序中的消息项一样。我们可以这样做：

首先我们将 9.png 作为可绘制对象加载：

 val bgImg = ContextCompat.getDrawable(
    LocalContext.current,
    if (isFromMe) R.drawable.chat_message_right else R.drawable.chat_message_left
)

其次我们可以使用 Modifier#drawBehind() 方法设置背景：

Text(text = "This my message",
    modifier = Modifier
        .drawBehind {
            bgImg?.updateBounds(0, 0, size.width.toInt(), size.height.toInt())
            bgImg?.draw(drawContext.canvas.nativeCanvas)
        }
        .padding(8.dp)
)

最后，你会得到你想要的效果。

如何使用 Jetpack Compose 在我的屏幕上使用 9 patch drawable (.9.png)？

How to use a 9 patch drawable (.9.png) in my screen using Jetpack Compose?

android

image

nine-patch

android-jetpack-compose