#夏日挑战赛#一种eTS自定义icon图标组件的思路 原创 精华

Tuer白晓明
发布于 2022-7-25 11:56
浏览
1收藏

本文正在参加星光计划3.0–夏日挑战赛

1. 图标介绍

应用程序中图标作为UI界面视觉组成的一部分,其可以替代文字表达出文字的含义。如底部选项卡使用图标+文字的方式视觉效果更明显,使用不同的图标表示天气状态等。
本节将构建适用于HarmonyOS/OpenHarmony icon图标组件库(基于eTS+Api8)。

2. 图标分类

  • 图片图标,如pngjpg等格式,缺点是占用存储大,且尺寸固定,放大缩小会使图像变虚,多个颜色的图标需要多张图片。一般用于应用程序图标。
  • 字符图标常见的是Unicode特殊字符Unicode变种Font Class全新方式Symbol。字符图标优势在于占体小,易操作(可以像操作字体一样),单个多颜色的图标只需要一个即可。

3. 自定义icon图标

1)创建项目并创建icon模块

  • 打开DevEco Studio创建项目TeCustomIcon(名称根据自己的项目命名),注意Ability Template选择HarmonyOS模板
    #夏日挑战赛#一种eTS自定义icon图标组件的思路-鸿蒙开发者社区
  • 项目名称右键New > Module,打开模块创建窗口,选择Ohos Library,点击Next填写模块名称。
    #夏日挑战赛#一种eTS自定义icon图标组件的思路-鸿蒙开发者社区

2)构建icon模块并引入

  • 点击Project页签中的tetcl_icon模块,然后点击菜单栏Build > Make Module 'tetcl_icon'进行构建
    #夏日挑战赛#一种eTS自定义icon图标组件的思路-鸿蒙开发者社区
  • 控制台出现BUILD SUCCESSFUL表示构建成功
    #夏日挑战赛#一种eTS自定义icon图标组件的思路-鸿蒙开发者社区
  • 打开TeCustomIcon > entry > package.json,在dependencies中添加构建的自定义icon模块
{
  "name": "entry",
  "version": "1.0.0",
  "ohos": {
    "org": "huawei",
    "buildTool": "hvigor",
    "directoryLevel": "module"
  },
  "description": "example description",
  "repository": {},
  "license": "ISC",
  "dependencies": {
    "@ohos/tetcl_icon": "file:../tetcl_icon"
  }
}

其中@ohos/tetcl_icontetcl_icon模块下package.json文件中的name属性。

#夏日挑战赛#一种eTS自定义icon图标组件的思路-鸿蒙开发者社区
然后点击编辑器上方的Sync Now进行同步。

#夏日挑战赛#一种eTS自定义icon图标组件的思路-鸿蒙开发者社区

  • 初始创建的tetcl_icon模块,官方默认提供了MainPage,可以引入到TeCustomIcon/entry中尝试是否构建模块成功。修改TeCustomIcon/entry/src/main/ets/MainAbility/pages/index.ets代码如下:
import {MainPage} from '@ohos/tetcl_icon/index'

@Entry
@Component
struct Index {
  build() {
    Row() {
      MainPage({message: "Hello HarmonyOS/OpenHarmony"})
    }
    .height('100%')
  }
}

点击视窗右侧的Previewer打开预览器,预览效果。
#夏日挑战赛#一种eTS自定义icon图标组件的思路-鸿蒙开发者社区

至此证明我们的tetcl_icon模块是正确的。

  • 注意:控制台报如下错误,需要打开MainPage删除@Entry注解,然后重新构建一次。
[Compile Result]  ETS:WARN File: F:\Huawei\HarmonyOSWorkspace\TeCustomIcon\entry\src\main\ets\MainAbility\pages\index.ets
[Compile Result]  It's not a recommended way to export struct with @Entry decorator, which may cause ACE Engine error in component preview mode.  
[Compile Result]  ETS:WARN File: F:\Huawei\HarmonyOSWorkspace\TeCustomIcon\tetcl_icon\index.ets
[Compile Result]  It's not a recommended way to export struct with @Entry decorator, which may cause ACE Engine error in component preview mode.  
[phone][Console    INFO]  07/25 11:26:45 5340   app Log: Application onCreate

3)实现自定义icon图标

  • 这里以用户图标为例,在阿里巴巴矢量图标库搜索用户图标,选择一个图标并复制svg代码,然后在tetcl_ico/src/main/ets/resources/创建rawfile文件夹同时创建user.svg。将复制的svg代码粘贴到user.svg中,使用Ctrl+Alt+L格式化代码,并删除报错属性值,在path标签加入fill属性设置默认颜色<path d="..." fill="#f2f2f2"></path>
    #夏日挑战赛#一种eTS自定义icon图标组件的思路-鸿蒙开发者社区
  • tetcl_icon/src/main/ets/components中创建TeIcon.ets文件,并编写如下代码:
/**
 * @Description 自定义图标
 * @date 2022/7/25 11:20
 * @Author Bai XiaoMing
 * @Version 1.0
 */

@Component
export struct TeIcon {
  size: number //设置icon图标宽高
  color: ResourceColor //填充图标颜色
  build() {
    Image($rawfile('user.svg')).width(this.size).height(this.size).fillColor(this.color)
  }
}
  • tetcl_icon/src/index.ets中导出自定义的icon图标
export { TeIcon } from './src/main/ets/components/TeIcon'

4)引入自定义icon图标

  • 修改TeCustomIcon/entry/src/main/ets/MainAbility/pages/index.ets代码如下:
import {TeIcon} from '@ohos/tetcl_icon/index'

@Entry
@Component
struct Index {
  build() {
    Flex({alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
      TeIcon({size: 100, color: 0x554466})
    }
    .height('100%')
  }
}
  • 使用预览器预览效果
    #夏日挑战赛#一种eTS自定义icon图标组件的思路-鸿蒙开发者社区

至此我们自定义的icon图标库已经实现了,你可以在此基础上继续完善。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
自定义icon图标.rar 2.97M 36次下载
已于2022-7-25 11:57:07修改
6
收藏 1
回复
举报
2条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

虽然应用程序功能是否丰富,可靠是很重要的一环,但图标是否精致美观也不容忽视,好看的UI更能吸引用户的使用。

回复
2022-7-25 13:59:35
laojean
laojean

已学习

回复
2022-7-29 17:20:33
回复
    相关推荐