DevEco Studio开发工具，可以生成 前景+背景 的图标吗？

DevEco Studio开发工具，可以生成 前景+背景 的图标吗？ 【问题描述】：DevEco开发工具，可以生成 前景+背景 的图标吗？

【问题现象】：DevEco开发工具，可以生成 前景+背景 的图标吗？

相关链接：Image Asset

【版本信息】：不涉及

【复现代码】：不涉及

【尝试解决方案】：Image Asset，生成出来的是合成后的图标。

cke_10626.png

目前推荐使用这种的cke_6450.png，开发工具能生成吗？


5 回复

开发者你好，DevEco Studio通过Image Asset生成单层图标，如果要生成 前景+背景 的图标，需参考以下方案进行配置：

【背景知识】 当前Image Asset功能支持为Phone、Tablet、2in1应用，生成单层图标支持生成以下两种类型图标：

  • icon：应用图标（手机或其他设备桌面及设置的图标会比应用中出现的应用图标大）。
  • startWindowIcon：启动页图标。

【解决方案】 应用图标如果采用分层图标（包括前景图和背景图两层），可以参考以下配置：

  1. 将前景资源和背景资源文件放在“AppScope\resources\base\media”文件下。 本例中采用的前景资源和背景资源的文件名分别为“foreground.png”和“background.png”。

  2. 在“AppScope\resources\base\media”文件夹下创建layered_image.json文件，并在该文件中配置分层图标的前景资源与背景资源信息。

    {
  "layered-image":
  {
    "background" : "$media:background",
    "foreground" : "$media:foreground"
  }
}

  3. 在app.json5配置文件中引用分层图标资源文件。示例如下：

    {
  "app": {
    "icon": "$media:layered_image",
    // ...
  }
}

  4. 如果在module.json5配置文件的abilities标签中配置了icon和label，且该对应的ability中skills标签下面的entities中包含"entity.system.home"、actions中包含"ohos.want.action.home"或者"action.system.home"，在module.json5文件中，需要将abilities标签下的icon配置值修改为分层图标的资源配置路径。配置要求参考图标生成机制。

    {
  "module": {
    "abilities": [
      "name": "EntryAbility",
      // ...
      "icon": "$media:layered_image", // 修改icon的配置为分层图标的资源配置路径
      "skills": [
        {
          "entities": [
            "entity.system.home"
          ],
          "actions": [
            "ohos.want.action.home"
          ]
        }
      ],
      // ...
    ]
    // ...
  }
}

DevEco Studio 支持生成前景+背景的图标吗？

不可以哦！没有自动生成工具！

需要找美工分别提供 background图片 和 foreground 图片哦！

DevEco Studio支持生成包含前景层和背景层的应用图标。在项目的AppScope > resources > base > media目录中，通过修改icon.png和icon_background.png文件来分别定义前景和背景。系统会自动将两层叠加，合成最终的应用图标。

是的，DevEco Studio的Image Asset功能可以生成前景与背景分离的图标。

根据您提供的官方文档链接和截图，您已经正确使用了Image Asset工具。该工具的设计逻辑是：将前景（Foreground Layer）和背景（Background Layer）分别配置后，工具会自动将它们合成为最终的图标文件，并输出到项目的resources目录中。

您看到的第一张截图（合成后的图标）正是该功能的预期输出结果。Image Asset本身不直接输出独立的前景和背景图层文件，它的核心目的是快速生成适配不同设备密度的、符合HarmonyOS设计规范的完整应用图标。

关于您提到的第二种图标样式（前景与背景分离的示例图），这通常是一种设计规范或示意图，用于说明图标应由前景图形和背景底板两层构成。在实际开发中：

  1. 您需要按照这种规范，分别设计好前景（.png图形）和背景（颜色或简单图形）。
  2. 然后在DevEco Studio的Image Asset中，通过“Foreground Layer”导入您的前景图片，通过“Background Layer”设置背景颜色或导入背景图片。
  3. 工具会据此生成一系列（hdpi、xhdpi等）合成后的图标。

总结： 您当前的操作方法是正确的。Image Asset工具接收分离的前景和背景元素作为输入，并输出合成后的图标资源。它本身不是一个图形设计软件，因此不会创建或输出独立的前景/背景源文件，这些源文件需要您提前准备好。

回到顶部