OpenHarmony 應(yīng)用的資源分類和資源的訪問以及應(yīng)用開發(fā)使用的像素單位以及各單位之間相互轉(zhuǎn)換的方法。

資源分類

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

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

資源訪問

OpenHarmony 應(yīng)用資源分為兩類，一類是應(yīng)用資源，另一類是系統(tǒng)資源，它們的資源訪問方式如下：

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

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

  樣例運(yùn)行結(jié)果如下圖所示：

  

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

  @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%")
    }
  }
  

  樣例運(yùn)行結(jié)果如下圖所示：

  

像素單位

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

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

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 單位的數(shù)值轉(zhuǎn)換為以 px 為單位的數(shù)值。
• px2vp ：將 px 單位的數(shù)值轉(zhuǎn)換為以 vp 為單位的數(shù)值。
• fp2px ：將 fp 單位的數(shù)值轉(zhuǎn)換為以 px 為單位的數(shù)值。
• px2fp ：將 px 單位的數(shù)值轉(zhuǎn)換為以 fp 為單位的數(shù)值。
• lpx2px ：將 lpx 單位的數(shù)值轉(zhuǎn)換為以 px 為單位的數(shù)值。
• px2lpx ：將 px 單位的數(shù)值轉(zhuǎn)換為以 lpx 為單位的數(shù)值。

這些單位尺寸具體大小，筆者舉個(gè)簡(jiǎn)單樣例演示一下：

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

樣例運(yùn)行結(jié)果如下圖所示：

資源管理器

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

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

使用 ResourceManager 之前先調(diào)用 getContext(this) 方法獲取當(dāng)前組件的 Context ，該 Conetxt 內(nèi)部定義了一個(gè) ResourceManager 的屬性，因此可以直接使用 ResourceManager 的各種 getXXX() 方法獲取對(duì)應(yīng)資源， 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 })     // 設(shè)置尺寸
        .fontSize($r('app.float.text_size'))   // 訪問字體大小
        .fontColor($r('app.color.text_color')) // 訪問字體顏色
        .backgroundImage($r('app.media.test')) // 設(shè)備背景圖片

      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 資源
  }

}

樣例運(yùn)行結(jié)果如下圖所示：

渲染出來(lái)的 mock string 是因?yàn)樵陬A(yù)覽器上暫時(shí)不支持 ResourceManager 的用法，在實(shí)際設(shè)備上是沒問題的。

審核編輯 黃宇