使用 Jetpack Compose 自定义锯齿形状 Android

Question

我正在尝试使用 Jetpack Compose 为 Android 视图创建自定义的锯齿形状，这是示例：enter image description here

我不知道如何为这个形状创建小波浪 (left/right)。我需要有一个盒子和一个定制的形状吗？因为我需要在这个形状中添加一些文字。

如何使用 Jetpack Compose 创建此元素？

Answer 1

您可以使用 Philip 的回答中解释的方法，这将需要您创建一个自己的 Shape 实例。如果你不希望它变得过于复杂（虽然它确实相当简单，但无论如何），你可以简单地这样做：

1.) 以矢量可绘制格式获取形状的路径数据。如果您首先使用原型制作软件设计布局（如 Figma、Sketch 等），您将可以访问插件，third-party 或首先，它应该允许您从您选择的形状中提取路径数据。例如，对于 Figma，有 'Android Vector Drawable' 插件，它提取形状的完整 android-vector-drawable 格式代码。如果您不使用这样的服务，只需在网上查找并从在线路径提取器中获取数据。它们基本上是 SVG 路径，方法略有不同。不管怎样，这一步你需要的只是形状的 path-data（这是一个足够简单的形状，你甚至可以使用一些 good-ol' 三角函数自己绘制矢量）

2.) 一旦有了路径数据，就很容易了。只需创建一个 Vector Drawable 并像这样在屏幕上绘制形状

Image(
 painter = rememberPainterResource(id = R.drawable.shape) // Id refers to your drawable
)

您可以在带有 Text 的 Box 中使用它，您将实现这一点。

除此之外，您可以直接在 Canvas 中使用 path-data，这样您就不需要显式创建 Drawable Resource。

Canvas {
 drawPath(
  PathParser.createPathFromPathData(yourDataHere).asComposePath()
 )
}

给你了。

使用 Jetpack Compose 自定义锯齿形状 Android

Customize serrated shapes with Jetpack Compose Android

android

android-jetpack-compose