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的阿里云开发者社区。