Jetpack compose使用ImageVector绘制自定义图标

Jetpack compose绘制图标的方式比较有趣，得益于kotlin神奇的语法，不需要像flutter那样定义一个icons.dart的类集中管理所有的图标，而是各就其位，散装定义，依旧可以放入Icons对象，先看一下如何使用compose material自带的图标，下面用我前天写的桌面应用时间显示器为基础测试一下：

首先改动一下那个复制按钮，给他增加一个Icon，请注意不要把Button改成IconButton，IconButton是圆角按钮，我们只需要在Text("复制")前面多加入一个Icon即可：

Button(modifier = Modifier.padding(horizontal = 10.dp),
    onClick = {
        clipboard.setText(AnnotatedString(time))
    }) {
    Icon(
        imageVector = Icons.Filled.CheckCircle, contentDescription = null
    )
    Text("复制")
}

下面就能看到按钮前面多了个图标：

这个很简单，点入CheckCircle可以看到，这个值单独存在于自己的文件，搜索一下就能发现其他任何文件都没有CheckCircle这个对象，只存在于CheckCircle.kt中，但却能以Icons.Filled.CheckCircle的方式引用，归类起来，相当有特点，那么我们画一个自己的复制图标呢？其实借鉴这个Icons.Filled.CheckCircle就可以了，代码看上去非常简单，我们先画出一个大概的架子并命名为IconCopy：

import androidx.compose.material.icons.materialIcon

public val IconCopy: ImageVector
    get() {
        if (iconCopy != null) {
            return iconCopy!!
        }
        iconCopy = materialIcon(name = "IconCopy") {
            //在这里具体绘制
        }
        return iconCopy!!
    }

private var iconCopy: ImageVector? = null

直接把外面那层复制过来，这个代码很容易懂，就是一个懒汉式的单例模式，不用的时候这个iconCopy值就是空的，也不进行绘画，第一次就初始化一下放入iconCopy，后面再用就直接返回内存中的这个对象就好了，下面如何具体绘画呢？你可能看到了CheckCircle的materialPath。诶不，我们用path即可，因为materialPath其实也是用path，他只是给stroke设置了null，但我们希望是有stroke的，所以先设置一下path的基本情况：

iconCopy = materialIcon(name = "IconCopy") {
    path(
        stroke = SolidColor(Color.Black),
        strokeLineWidth = 2f
    ) {
        //在这里具体绘制
    }
}

设置一下色彩和宽度就好了，就像是css中的2px solid black，虽然没css那样简便到一句话，但看上去也很清晰嘛，下面就是具体画这个图像。其实常见的复制图标具体应该长什么样子，大家应该都有见过，就两笔就完成了，一个矩形，在他的上面和左边各有一条线连接在一起，先画这一条线：

//从右上角开始画
moveTo(19f, 2f)
horizontalLineToRelative(-18f)
verticalLineToRelative(18f)
//画到左下角结束

为什么从右上角不从左上角画呢，因为要一笔画成这条线嘛，右上角->左上角->右下角，这条线就出来了。

然后画矩形，也很简单：

//从左上角开始画
moveTo(5f, 7f)
horizontalLineToRelative(14f)
verticalLineToRelative(15f)
horizontalLineToRelative(-14f)
close()
//结束连接回左上角

就这样就搞定了，3个点位，然后把最上面的Icons.Filled.CheckCircle改成我们的IconCopy，就能看到复制按钮的自定义图标效果了：

IconCopy.kt的源代码如下：

import androidx.compose.material.icons.materialIcon
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.path

public val IconCopy: ImageVector
    get() {
        if (iconCopy != null) {
            return iconCopy!!
        }
        iconCopy = materialIcon(name = "IconCopy") {
            path(
                stroke = SolidColor(Color.Black),
                strokeLineWidth = 2f
            ) {
                moveTo(19f, 2f)
                horizontalLineToRelative(-18f)
                verticalLineToRelative(18f)
                moveTo(5f, 7f)
                horizontalLineToRelative(14f)
                verticalLineToRelative(15f)
                horizontalLineToRelative(-14f)
                close()
            }
        }
        return iconCopy!!
    }

private var iconCopy: ImageVector? = null

不得不说做起来确实非常简单，绘画的API也是有够丰富的，以后有机会会详细的介绍ImageVector其他更有趣的一些绘画细节。

本文写作于2023年6月29日并发布于lyrieek的掘金，于2023年7月19日进行修订发布于lyrieek的阿里云开发者社区。