【HarmonyOS】个性化应用图标动态切换详解

在移动应用高度同质化的今天，图标早已不只是一个"入口" ，而是用户对应用的第一印象。

在 HarmonyOS 生态中，系统能力不断下沉到应用层，开发者终于可以不再满足于"一个图标用到卸载"，而是让应用图标根据状态、主题或场景动态变化，成为真正"会表达"的界面元素。

本文将围绕 HarmonyOS 中应用图标的个性化与动态切换能力展开，结合实际开发经验，介绍如何在不破坏系统规范的前提下，实现多图标配置、运行时切换以及典型应用场景设计，帮助应用在桌面层就建立清晰、直观的用户认知。

示例

开通服务

因目前功能还为beta阶段，所以需要申请开通服务 。需按如下格式向华为运营人员发送邮件申请开通服务。申请审核时间为1-3个工作日，审核结果请关注邮件信息或互动中心通知。

请确保申请开通图标管理服务的应用处于正式上架状态，避免服务开通失败。
应用信息和开发者账号信息查询方法参见查看应用信息。

|------|----------------------------------|
| 邮箱地址 | agconnect@huawei.com |
| 邮件标题 | HarmonyOS应用图标管理开通申请-应用名称 |
| 邮件内容 | 开发者账号ID：应用名称：应用ID：应用包名：应用状态： |

图标配置

开通图标管理服务后，登录AppGallery Connect，点击"APP与元服务"，在应用列表中选择已经开通图标管理服务的HarmonyOS应用，选择"分发 > 服务 > 图标管理"，进入图标管理页面，就可以管理HarmonyOS应用的个性化图标。

在图标管理页面点击"新增图标"按钮，进入创建图标页面。输入图标ID、图标名称，选择设备类型，上传图标文件，点击"保存"或者"提交"按钮，将图标保存为草稿状态或提交审核。

开发步骤

应用内可调用API查询到AGC配置的动态图标信息，用户点击切换可选的动态图标，系统切换对应的动态图标。当用户停止已选择的动态图标，可以再切换为默认图标。

查询动态图标信息

导入appInfoManager模块及相关公共模块。

javascript 复制代码

import { appInfoManager } from '@kit.AppGalleryKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

调用queryDynamicIcons方法切换动态图标。

javascript 复制代码

try {
  appInfoManager.queryDynamicIcons()
    .then((queryResult: appInfoManager.DynamicIconInfo[]) => {
      hilog.info(0, 'TAG', "Succeeded in getting DynamicIconInfo size = " + queryResult.length);
      for (let i = 0; i < queryResult.length; i++) {
        hilog.info(0, 'TAG', "Succeeded in getting DynamicIconInfo iconUrl = " + queryResult[i]["iconUrl"] + ", iconId = " + queryResult[i]["iconId"] + ", enabled = "+queryResult[i]["enabled"]);
      }
    }).catch((error: BusinessError) => {
      hilog.error(0, 'TAG', "queryDynamicIcons failed, code: " + error.code + ", exception message: " + error.message);
    });
} catch (error) {
  hilog.error(0, 'TAG', "queryDynamicIcons exception code: " + error.code + ", exception message: " + error.message);
}

切换动态图标

导入appInfoManager模块及相关公共模块。

javascript 复制代码

import { appInfoManager } from '@kit.AppGalleryKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

调用selectDynamicIcon方法切换动态图标。

javascript 复制代码

try {
  let iconId: string = 'iconId';
  appInfoManager.selectDynamicIcon(iconId).then(() => {
      hilog.info(0, 'TAG', "Succeeded in selecting dynamic icon");
  }).catch((error: BusinessError) => {
    hilog.error(0, 'TAG', "selectDynamicIcon failed, code: " + error.code + ", exception message: " + error.message);
  });
} catch (error) {
  hilog.error(0, 'TAG', "selectDynamicIcon exception code: " + error.code + ", exception message: " + error.message);
}

恢复默认图标

导入appInfoManager模块及相关公共模块。

javascript 复制代码

import { appInfoManager } from '@kit.AppGalleryKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

调用disableDynamicIcon方法恢复默认图标。

javascript 复制代码

try {
  appInfoManager.disableDynamicIcon().then(() => {
      hilog.info(0, 'TAG', "Succeeded in disabling dynamic icon");
  }).catch((error: BusinessError) => {
    hilog.error(0, 'TAG', "disableDynamicIcon failed, code: " + error.code + ", exception message: " + error.message);
  });
} catch (error) {
  hilog.error(0, 'TAG', "disableDynamicIcon exception code: " + error.code + ", exception message: " + error.message);
}