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

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

示例

开通服务

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

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

邮箱地址

agconnect@huawei.com

邮件标题

HarmonyOS应用图标管理开通申请-应用名称

邮件内容

开发者账号ID:

应用名称:

应用ID:

应用包名:

应用状态:

图标配置

开通图标管理服务后,登录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);
    }

    Logo

    讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

    更多推荐