目录

（推荐）分层图标处理

场景介绍

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

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

约束条件

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

开发步骤

  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. 简单配置页面的布局，调用分层图标接口获取处理后的图标信息，也可以调用异步批量处理接口。

    @Entry
@Component
struct Index{
  bundleName: string = 'com.example.uidesignsample';
  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: hdsDrawable.ProcessedIcon) => 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: 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}`);
    }
  }
}