Jetpack Compose：自定义 VectorAsset Icon object 类似于内置的`Icons.Default`

Question

看起来 go 关于从res文件夹中的 Android Vector Resources 加载自定义图标的唯一方法是使用vectorResource(R.drawable.myVectorName)方法在@Composable function 中执行此操作。

这很棒，但我喜欢为Icon(asset: VectorAsset) class 获取VectorAssets的语法，它看起来像Icon(Icons.Default.Plus) 。

看起来vectorResource()方法使用了一个名为loadVectorResource()的内部方法，它用来读取组成矢量资产文件的实际 XML 文件的方法也是内部的。

我 go 如何在 Jetpack Compose 中创建 object 之类的MyAppIcons.Default.SomeIcon ？

编辑

所以，我有点找到了解决方案。 但是，我自己对内置Icon() function 进行扩展/重载会很好，但我不确定是否有正确的方法来执行此操作。

Answer 1

原来我没有用我的大脑。 答案很简单。

要点是， Icon()是一个可组合的函数，这意味着当然可以在那里使用vectorResource() 。

所以，正确的方法不是什么秘密......它是制作你自己的MyAppIcon()组件，调用vectorResource()然后返回一个普通的Icon() ，如下所示：

正确方式

@Composable
fun MyAppIcon(
    resourceId: Int,
    modifier: Modifier = Modifier,
    tint: Color = AmbientContentColor.current
) {
    Icon(
        asset = vectorResource(id = resourceId),
        modifier = modifier,
        tint = tint
    )
}

然后您可以在其他地方创建一个对象，如下所示：

object MyAppIcons {
    val SomeIcon = R.drawable.someIcon
    val AnotherIcon = R.drawable.anotherIcon
}

当你把两者放在一起时，你可以像这样使用它：

MyAppIcon(MyAppIcons.SomeIcon)

我希望 Google 尽快添加此覆盖，允许我们传入资源 ID。

Answer 2

有一种方法可以使用Icon(Icons.Default.Plus)加载资产。 你需要做一个extesion属性

val androidx.compose.material.icons.Icons.Filled.FiveG : VectorAsset
    get() {

    }

但我没有看到在可组合函数之外获取VectorAsset的方法。 当然你可以做这样的事情

val androidx.compose.material.icons.Icons.Filled.FiveG : VectorAsset
    get() {
        return Assets.FiveG
    }

object Assets {
    lateinit var FiveG: VectorAsset
}

@Composable
fun initializeAssets() {
    Assets.FiveG = vectorResource(R.drawable.ic_baseline_5g_24)
}

但是使用具有副作用的可组合物是一个坏主意。 所以我在等待有人找到一种方法将 SVG 转换为VectorAsset Kotlin 类或在可组合函数之外获取VectorAsset对象。

Answer 3

我走另一条路，从 Jetpack Compose 源代码中提取逻辑，将 XML SVG 路径字符串转换为ImageVector 。 最后我想到了这个：

fun makeIconFromXMLPath(
    pathStr: String,
    viewportWidth: Float = 24f,
    viewportHeight: Float = 24f,
    defaultWidth: Dp = 24.dp,
    defaultHeight: Dp = 24.dp,
    fillColor: Color = Color.White,
): ImageVector {
    val fillBrush = SolidColor(fillColor)
    val strokeBrush = SolidColor(fillColor)

    return ImageVector.Builder(
        defaultWidth = defaultWidth,
        defaultHeight = defaultHeight,
        viewportWidth = viewportWidth,
        viewportHeight = viewportHeight,
    ).run {
        addPath(
            pathData = addPathNodes(pathStr),
            name = "",
            fill = fillBrush,
            stroke = strokeBrush,
        )
        build()
    }
}

您所要做的就是调用此 function 并将pathStr设置为可绘制文件 XML 文件中android:pathData的值。 这是一个例子：

val AppleIcon by lazy { makeAppleIcon() }

// by Austin Andrews, found on https://materialdesignicons.com/
private fun makeAppleIcon(): ImageVector {
    return makeIconFromXMLPath(
        pathStr = "M20,10C22,13 17,22 15,22C13,22 13,21 12,21C11,21 11,22 9,22C7,22 2,13 4,10C6,7 9,7 11,8V5C5.38,8.07 4.11,3.78 4.11,3.78C4.11,3.78 6.77,0.19 11,5V3H13V8C15,7 18,7 20,10Z"
    )
}

@Preview
@Composable
fun AppleIconPreview() {
    Surface { 
        Icon(AppleIcon, "Apple")
    }
}

Answer 4

来自Compose 中的资源

使用painterResource API 加载矢量可绘制对象或光栅化资产格式（如 PNG）。 您不需要知道可绘制对象的类型，只需在Image组合或paint修饰符中使用painterResource即可。

// Files in res/drawable folders. For example:
// - res/drawable-nodpi/ic_logo.xml
// - res/drawable-xxhdpi/ic_logo.png

// In your Compose code
Icon(
    painter = painterResource(id = R.drawable.ic_logo),
    contentDescription = null // decorative element
)