文章目录
- 前言
- 一、使用
- 二、官方Icon图库的引入
前言
Icon是compose中专门用来展示小图标的组件，传统的View体系中没有对应的控件，该组件支持三种不同类型的图片设置：imageVector矢量图(可显示SVG格式的图标)、ImageBitmap位图(可显示JPG、PNG等格式图标)、Painter自定义画笔(可直接用画笔再Canvas上绘制图标，也可以同res/下的图片资源)
一、使用
运行结果如图：
常用的三种设置图标方式：
Column(){//垂直排列的布局//加载矢量图Icon(imageVector=ImageVector.vectorResource(R.drawable.icon_favorite_svg),"收藏矢量图",//无障碍描述tint=Color.Red)//对矢量图的颜色改变//加载jpg/png图Icon(bitmap=ImageBitmap.imageResource(R.drawable.icon_favorite_bitmap),"收藏的位图",tint=Color.Unspecified// 关键：禁用默认的黑色色调,因为该图片是黑色轮廓透明背景)//加载任意类型图标Icon(painter=painterResource(R.drawable.icon_favorite_svg),contentDescription="收藏的任意类型资源")}二、官方Icon图库的引入
Material 包有很多预置的矢量图标，通常可以直接调用该库中的矢量图进行设置，Material 包每个图标都提供了五种风格可供使用，包括 Filled， Outlined，Rounded，Sharp，Two tone 等，都可以通过 Icons.xxx.xxx 的方式调用，具体可参考如下：
Icon(imageVector=Icons.Default.CheckCircle,//官方默认的矢量图库,只提供部分图标contentDescription="无障碍描述",tint=Color.Red//图标颜色的设置)Icon(imageVector=Icons.Outlined.CheckCircle,//勾勒轮廓类型contentDescription="无障碍描述")Icon(imageVector=Icons.Filled.CheckCircle,//图形填充类型contentDescription="无障碍描述")Icon(imageVector=Icons.Rounded.CheckCircle,//端点均为圆角类型contentDescription="无障碍描述")Icon(imageVector=Icons.Sharp.CheckCircle,//端点均为尖角类型contentDescription="无障碍描述")Icon(imageVector=Icons.TwoTone.CheckCircle,//双色配合角类型contentDescription="无障碍描述")注：
Material 包只提供了部分图标,更多需要可引入扩展库：implementation
“androidx.compose.material:material-icons-extended:$compose_version”(与当前项目版本号一致即可)
Material版本号情况查询：https://central.sonatype.com/search?q=material-icons-extended
Material设计库全部图标查询：https://fonts.google.com/icons?selected=Material+Symbols+Outlined:translate:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%231f1f1f&icon.platform=android&icon.query=translate
可在该库中找到所需矢量图，根据其命名找到对应图标—