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

在移动应用高度同质化的今天，图标早已不只是一个“入口”，而是用户对应用的第一印象。
在 HarmonyOS 生态中，系统能力不断下沉到应用层，开发者终于可以不再满足于“一个图标用到卸载”，而是让应用图标根据状态、主题或场景动态变化，成为真正“会表达”的界面元素。

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

示例

开通服务

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

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

图标配置

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

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

开发步骤

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

查询动态图标信息

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

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

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

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模块及相关公共模块。

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

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

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模块及相关公共模块。

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

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

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); }