（推荐）分层图标处理
==========

#### 场景介绍

从5.0.0(12)版本开始， Hds支持分层图标处理能力。

适用于图标为分层资源，且图标展示风格要与华为HarmonyOS Design System设计风格一致的应用场景。以下是一些典型的应用场景：

*   展示带图标的应用列表：可调用UI Design Kit批量处理分层图标的接口获取处理后的应用图标。
    
*   展示应用详情：可调用UI Design Kit处理单个分层图标的接口获取处理后的应用图标。
    
*   展示跟随在线主题的应用图标：可调用UI Design Kit处理分层图标的接口获取主题换肤后的应用图标。
    

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7d/v3/NwHzGdFARnWfZ_L7jHdr4w/zh-cn_image_0000002625108073.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=73B05119AB88462230A18E5445C6F5C3ECD6DB3A403FC78067205A7E7F224BB1)![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/87/v3/t688-jL_Q4ipJGcRkiIwDw/zh-cn_image_0000002594668556.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=342EE4A009E6A6BED924E3BEB20C959D86B2368D73D432CD6176A9E3F5D88EFB)![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/df/v3/vo3YW06-R86RaYLXnADTjQ/zh-cn_image_0000002594828484.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=2B609EEBC56F369D5EF338FA3F69591ADE7B6DFB339DEE311233AB887F1E04DB)

#### 约束条件

分层图标处理支持Phone、Tablet、PC/2in1设备，并且从5.1.1(19)版本开始，新增支持TV设备。

#### 开发步骤

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/eb/v3/kZidMP-cQDGvpTOcK6-xIA/zh-cn_image_0000002625187931.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=E9755B2EA2D38250C9DAC1389B8FF21555AD6BCFE814BDF0C24FDDE7B0CC8203)

1.  设置分层图标，将前景资源和背景资源放至entry/src/main/resources/base/media文件中，并在该目录下创建一个json文件（例如：drawable.json）：
    
    {
      "layered-image":
      {
        "background" : "$media:background",
        "foreground" : "$media:foreground"
      }
    }
    
2.  将图标处理的相关类添加至工程。
    
    import { LayeredDrawableDescriptor } from '@kit.ArkUI';
    import { hdsDrawable } from '@kit.UIDesignKit';
    import { image } from '@kit.ImageKit';
    import { BusinessError } from '@kit.BasicServicesKit';
    import { resourceManager } from '@kit.LocalizationKit';
    import { common } from '@kit.AbilityKit';
    
3.  简单配置页面的布局，调用[分层图标接口](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdsdrawable#hdsdrawablegethdslayeredicon)获取处理后的图标信息，也可以调用[异步批量处理接口](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdsdrawable#hdsdrawablegethdslayeredicons)。
    
    @Entry
    @Component
    struct Index{
      bundleName: string = 'com.example.uidesignkit';
      resManager: resourceManager.ResourceManager | undefined = undefined;
      layeredDrawableDescriptor: LayeredDrawableDescriptor | undefined = undefined;
      @State layeredIconsResult: Array<hdsDrawable.ProcessedIcon> = \[\];
    
      build() {
        Column() {
          Column() {
            Text('getHdsLayeredIcon')
              .fontWeight(FontWeight.Bold)
              .fontSize(16)
              .margin(5)
    
            Image(this.getHdsLayeredIcon())
              .width(48)
              .height(48)
          }
          .margin(20)
    
          Text('getHdsLayeredIcons')
            .fontWeight(FontWeight.Bold)
            .fontSize(16)
            .margin(5)
    
          List() {
            ForEach(this.layeredIconsResult,
              (item: hdsDrawable.ProcessedIcon, index?: number) => {
                ListItem() {
                  Column() {
                    Text(item.bundleName)
                      .fontWeight(FontWeight.Medium)
                      .fontSize(16)
                      .margin(5)
    
                    Image(item.pixelMap)
                      .width(48)
                      .height(48)
                  }
                  .margin(15)
                }
                .width('100%')
              }, (item: string) => item.toString())
          }
          .scrollBar(BarState.On)
          .height('60%')
        }
        .height('100%')
        .width('100%')
      }
    
      aboutToAppear(): void {
        // 获取资源管理器
        this.resManager = (this.getUIContext().getHostContext() as common.UIAbilityContext)?.resourceManager;
        if (!this.resManager) {
          return;
        }
        // 通过资源管理获取原始分层图标信息
        this.layeredDrawableDescriptor = (this.resManager.getDrawableDescriptor($r('app.media.drawable')
          .id)) as LayeredDrawableDescriptor;
        this.getHdsLayeredIcons();
      }
    
      private getHdsLayeredIcon(): image.PixelMap | null {
        try {
          // 调用HDS分层图标接口处理图标
          return hdsDrawable.getHdsLayeredIcon(this.bundleName, this.layeredDrawableDescriptor, 48, true);
        } catch (err) {
          let message = (err as BusinessError).message;
          let code = (err as BusinessError).code;
          console.error(\`getHdsLayeredIcon failed, code: ${code}, message: ${message}\`);
          return null;
        }
      }
    
      private getHdsLayeredIcons(): void {
        if (!this.layeredDrawableDescriptor) {
          console.error(\`getHdsLayeredIcons layeredDrawableDescriptor is undefined.\`);
          return;
        }
        
        // 构造批量接口传参
        let options: hdsDrawable.Options = {
          size: 48,
          hasBorder: true,
          parallelNumber: 4
        };
    
        let layeredIcons: Array<hdsDrawable.LayeredIcon> = \[\];
        for (let i = 0; i < 10; i++) {
          layeredIcons.push({
            bundleName: \`${this.bundleName}-${i}\`,
            layeredDrawableDescriptor: this.layeredDrawableDescriptor
          });
        }
    
        try {
          // 调用HDS批量分层接口处理图标
          hdsDrawable.getHdsLayeredIcons(layeredIcons, options)
            .then((data: Array<hdsDrawable.ProcessedIcon>) => {
              console.info(\`getHdsLayeredIcons data size: ${data.length}\`);
              this.layeredIconsResult = data;
            })
            .catch((err: BusinessError) => {
              console.error(\`getHdsLayeredIcons return error, code: ${err.code}, msg: ${err.message}\`);
            });
        } catch (err) {
          let message = (err as BusinessError).message;
          let code = (err as BusinessError).code;
          console.error(\`getHdsLayeredIcons failed, code: ${code}, message: ${message}\`);
        }
      }
    }