鴻蒙ArkUI聲明式學習：【UI資源管理】

OpenHarmony 應用的資源分類和資源的訪問以及應用開發使用的像素單位以及各單位之間相互轉換的方法。

資源分類

移動端應用開發常用到的資源比如圖片，音視頻，字符串等都有固定的存放目錄，OpenHarmony 把這些應用的資源文件統一放在 resources 目錄下的各子目錄中便于開發者使用和維護， resoures 目錄包括兩大類，一類為 base 目錄與限定詞目錄，另一類為 rawfile 目錄。新建 OpenHarmony 應用，默認生成的資源目錄如下所示：

base 目錄與限定詞目錄下面可以創建資源組目錄（包括 element 、 media 、animation 、 layout 、 graphic 、 profile ），用于存放特定類型的資源文件，各資源目錄說明如下圖所示：

資源訪問

OpenHarmony 應用資源分為兩類，一類是應用資源，另一類是系統資源，它們的資源訪問方式如下：

• 訪問應用資源
  base 目錄下的資源文件會被編譯成二進制文件并且給這些資源賦予唯一的 ID ，使用相應資源的時候通過資源訪問符 r('app.type.name') 的形式，app 代表是應用內 resources 目錄中定義的資源；type 表示資源類型，可取值有 color 、 float 、 string 、 string 、 media 等；name 表示資源的文件名字。例如 string.json 中新加 name 為 text_string 的字符串，則訪問該字符串資源為 r('app.string.text_string') 。
  筆者在 base 目錄下新建 float.json 和 color.json 文件，分別存放字體和顏色，資源內容如下圖所示：
  
  通過 $('app.type.name') 訪問資源的簡單樣例如下所示：

  @Entry @Component struct ResourceTest {
    build() {
      Column({space: 10}) {
        Text($r('app.string.text_string'))                       // 訪問字符串資源
          .size({width: 300, height: 120})                       // 設置尺寸
          .fontSize($r('app.float.text_size'))                   // 訪問字體大小
          .fontColor($r('app.color.text_color'))                 // 訪問字體顏色
          .backgroundImage($r('app.media.test'), ImageRepeat.XY) // 設備背景圖片
      }
      .width('100%')
      .height('100%')
      .padding(10)
    }
  }
  

  樣例運行結果如下圖所示：

  

• 訪問系統資源
  系統資源包含 顏色 、 圓角 、 字體 、 間距 、 字符串 及 圖片 等，通過使用系統資源，不同的開發者可以開發出具有相同視覺風格的應用，開發者可以通過 $r('sys.type.name') 的形式引用系統資源，和訪問應用資源不同的是使用 sys 代表系統資源，其它和訪問應用資源規則一致。
  訪問系統資源簡單樣例如下所示：

  @Entry @Component struct ResourceTest {
    build() {
      Column() {
        Text('Hello')
          .fontColor($r('sys.color.ohos_id_color_emphasize'))
          .fontSize($r('sys.float.ohos_id_text_size_headline1'))
          .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
          .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
        Image($r('sys.media.ohos_app_icon'))
          .border({
            color: $r('sys.color.ohos_id_color_palette_aux1'),
            radius: $r('sys.float.ohos_id_corner_radius_button'),
            width: 2
          })
          .margin({
            top: $r('sys.float.ohos_id_elements_margin_horizontal_m'),
            bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')
          })
          .height(200)
          .width(300)
      }
      .padding(10)
      .width("100%")
      .height("100%")
    }
  }
  

  樣例運行結果如下圖所示：

  

像素單位

ArkUI開發框架提供了 4 種像素單位供開發者使用，分別是： px 、 vp 、 fp 和 lpx ，它們之間的區別如下表所示：

ArkUI開發框架也提供了全局方法把這些不同的尺寸單位相互轉換，全局方法如下所示：

declare function vp2px(value: number): number;
declare function px2vp(value: number): number;
declare function fp2px(value: number): number;
declare function px2fp(value: number): number;
declare function lpx2px(value: number): number;
declare function px2lpx(value: number): number;

• vp2px ：將 vp 單位的數值轉換為以 px 為單位的數值。
• px2vp ：將 px 單位的數值轉換為以 vp 為單位的數值。
• fp2px ：將 fp 單位的數值轉換為以 px 為單位的數值。
• px2fp ：將 px 單位的數值轉換為以 fp 為單位的數值。
• lpx2px ：將 lpx 單位的數值轉換為以 px 為單位的數值。
• px2lpx ：將 px 單位的數值轉換為以 lpx 為單位的數值。

這些單位尺寸具體大小，筆者舉個簡單樣例演示一下：

@Entry @Component struct ResourceTest {
  build() {
    Column() {
      Flex({ wrap: FlexWrap.Wrap }) {
        Column() {
          Text("width(220)")
            .width(220)
            .height(40)
            .backgroundColor(Color.Pink)
            .textAlign(TextAlign.Center)
            .fontSize('12vp')
        }.margin(5)

        Column() {
          Text("width('220px')")
            .width('220px')
            .height(40)
            .backgroundColor(Color.Pink)
            .textAlign(TextAlign.Center)
        }.margin(5)

        Column() {
          Text("width('220vp')")
            .width('220vp')
            .height(40)
            .backgroundColor(Color.Pink)
            .textAlign(TextAlign.Center)
            .fontSize('12vp')
        }.margin(5)

        Column() {
          Text("width('220lpx') designWidth:720")
            .width('220lpx')
            .height(40)
            .backgroundColor(Color.Pink)
            .textAlign(TextAlign.Center)
            .fontSize('12vp')
        }.margin(5)

        Column() {
          Text("width(vp2px(220) + 'px')")
            .width(vp2px(220) + 'px')
            .height(40)
            .backgroundColor(Color.Pink)
            .textAlign(TextAlign.Center)
            .fontSize('12vp')
        }.margin(5)

        Column() {
          Text("fontSize('12fp')")
            .width(220)
            .height(40)
            .backgroundColor(Color.Pink)
            .textAlign(TextAlign.Center)
            .fontSize('12fp')
        }.margin(5)
      }
      .width('100%')
      .height("100%")
    }
    .width('100%')
    .height("100%")
    .padding(10)
  }
}

樣例運行結果如下圖所示：

資源管理器

ArkUI開發框架在 @ohos.resourceManager 模塊里提供了資源管理器 ResourceManager，它可以訪問不同的資源，比如獲取獲取字符串資源，獲取設備配置信息等等，resourceManager 模塊提供部分 API 如下所示：

declare namespace resourceManager {
  // 省略部分代碼
  export interface ResourceManager {
      // 獲取字符串資源
      getString(resId: number, callback: AsyncCallback< string >): void;
      // 獲取字符串數組資源
      getStringArray(resId: number, callback: AsyncCallback< Array< string >>): void;
      // 獲取媒體資源
      getMedia(resId: number, callback: AsyncCallback< Uint8Array >): void;
      // 獲取設備信息，比如當前屏幕密度，設備類型是手機還是平板等
      getDeviceCapability(callback: AsyncCallback< DeviceCapability >): void;
      // 獲取配置信息，比如當前屏幕方向密度，當前設備語言
      getConfiguration(callback: AsyncCallback< Configuration >): void;
      // 釋放ResourceManager資源
      release();
  }
}
export default resourceManager;

使用 ResourceManager 之前先調用 getContext(this) 方法獲取當前組件的 Context ，該 Conetxt 內部定義了一個 ResourceManager 的屬性，因此可以直接使用 ResourceManager 的各種 getXXX() 方法獲取對應資源， ResourceManager 使用流程如下所示：

• 引入 resourceManager

  import resourceManager from '@ohos.resourceManager';
  

  1

• 獲取 ResourceManager

  aboutToAppear() {
    // 獲取ResourceManager
    let manager = getContext(this).resourceManager;
  }
  

• 使用 ResourceManager

  manager.getString(0x1000001, (innerError, data) = > {
    if(data) {
      // 獲取資源成功
    } else {
      console.log("error: " + JSON.stringify(innerError))
    }
  })
  

• 釋放 ResourceManager

  this.manager.release();
  

完整樣例如下所示：

import resourceManager from '@ohos.resourceManager';

@Entry @Component struct ResourceTest {

  @State text_string: string = "";
  @State capability: string = "";
  @State configuration: string = "";
  
  private resManager: resourceManager.ResourceManager;

  build() {
    Column({ space: 10 }) {
      Text(this.text_string)                   // 訪問字符串資源
        .size({ width: 300, height: 120 })     // 設置尺寸
        .fontSize($r('app.float.text_size'))   // 訪問字體大小
        .fontColor($r('app.color.text_color')) // 訪問字體顏色
        .backgroundImage($r('app.media.test')) // 設備背景圖片

      Text(this.capability)                    // capability信息
        .fontSize(20)

      Text(this.configuration)                 // configuration信息
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }

  aboutToAppear() {
    this.resManager = getContext(this).resourceManager;
    this.resManager.getStringValue(0x1000001, (innerError, data) = > {
      if(data) {
        this.text_string = data;
      } else {
        console.log("error: " + JSON.stringify(innerError));
      }
    })

    this.resManager.getDeviceCapability((innerError, deviceCapability) = > {
      if(deviceCapability) {
        this.capability = JSON.stringify(deviceCapability);
      }
    })

    this.resManager.getConfiguration((innerError, configuration) = > {
      if(configuration) {
        this.configuration = JSON.stringify(configuration);
      }
    })
  }
  
  aboutToDisappear() {
    this.resManager?.release(); // 釋放 ReleaseManager 資源
  }

}

樣例運行結果如下圖所示：

渲染出來的 mock string 是因為在預覽器上暫時不支持 ResourceManager 的用法，在實際設備上是沒問題的。

審核編輯 黃宇