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

简介: Jetpack compose绘制图标的方式比较有趣,得益于kotlin神奇的语法,不需要像flutter那样定义一个icons.dart的类集中管理所有的图标,而是各就其位,散装定义,来尝试一下吧

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

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

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

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

image.png

这个很简单,点入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,后面再用就直接返回内存中的这个对象就好了,下面如何具体绘画呢?你可能看到了CheckCirclematerialPath。诶不,我们用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,就能看到复制按钮的自定义图标效果了:

image.png

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

目录
相关文章
|
2月前
|
安全 Java Android开发
探索安卓应用开发的新趋势:Kotlin和Jetpack Compose
在安卓应用开发领域,随着技术的不断进步,新的编程语言和框架层出不穷。Kotlin作为一种现代的编程语言,因其简洁性和高效性正逐渐取代Java成为安卓开发的首选语言。同时,Jetpack Compose作为一个新的UI工具包,提供了一种声明式的UI设计方法,使得界面编写更加直观和灵活。本文将深入探讨Kotlin和Jetpack Compose的特点、优势以及如何结合使用它们来构建现代化的安卓应用。
68 4
|
4月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
5月前
|
JavaScript Java Android开发
kotlin安卓在Jetpack Compose 框架下跨组件通讯EventBus
**EventBus** 是一个Android事件总线库,简化组件间通信。要使用它,首先在Gradle中添加依赖`implementation &#39;org.greenrobot:eventbus:3.3.1&#39;`。然后,可选地定义事件类如`MessageEvent`。在活动或Fragment的`onCreate`中注册订阅者,在`onDestroy`中反注册。通过`@Subscribe`注解方法处理事件,如`onMessageEvent`。发送事件使用`EventBus.getDefault().post()`。
|
5月前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
5月前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
5月前
|
监控 Android开发 数据安全/隐私保护
安卓kotlin JetPack Compose 实现摄像头监控画面变化并录制视频
在这个示例中,开发者正在使用Kotlin和Jetpack Compose构建一个Android应用程序,该程序 能够通过手机后置主摄像头录制视频、检测画面差异、实时预览并将视频上传至FTP服务器的Android应用
|
5月前
深入了解 Jetpack Compose 中的 Modifier
深入了解 Jetpack Compose 中的 Modifier
106 0
|
5月前
|
Android开发
Jetpack Compose: Hello Android
Jetpack Compose: Hello Android
|
5月前
|
安全 网络安全 API
kotlin安卓开发JetPack Compose 如何使用webview 打开网页时给webview注入cookie
在Jetpack Compose中使用WebView需借助AndroidView。要注入Cookie,首先在`build.gradle`添加WebView依赖,如`androidx.webkit:webkit:1.4.0`。接着创建自定义`ComposableWebView`,通过`CookieManager`设置接受第三方Cookie并注入Cookie字符串。最后在Compose界面使用这个自定义组件加载URL。注意Android 9及以上版本可能需要在网络安全配置中允许第三方Cookie。
|
5月前
|
Android开发 Kotlin
kotlin安卓开发【Jetpack Compose】:封装SnackBarUtil工具类方便使用
GPT-4o 是一个非常智能的模型,比当前的通义千问最新版本在能力上有显著提升。作者让GPT开发一段代码,功能为在 Kotlin 中使用 Jetpack Compose 框架封装一个 Snackbar 工具类,方便调用