Detailed explanation of openharmony resource management

In this section, the author introduces to readers  OpenHarmony  Application resource classification and resource access . I don't say much nonsense , Let's go straight to .

Resource classification

Resources commonly used in mobile application development, such as pictures , Audio and video , Strings and so on have fixed storage directories ,OpenHarmony  Put the resource files of these applications in  

resources

  The subdirectories under the directory are convenient for developers to use and maintain , 

resoures

  The table of contents includes two main categories , Actually, it is a kind of , by  

base

  Table of contents and determiners ,

Another kind of  

rawfile

  Catalog （ I don't know if the official document is wrong , I already mentioned Issue）

. newly build  OpenHarmony  application , The default generated resource directory is as follows ：

Here it is , I found something wrong with the official documents , It has also been modified . Mention the PR, Etc .

base

  Under the directory and qualifier directory, you can create a resource group directory （ Include  

element

 、 

media

 、

animation

 、 

layout

 、 

graphic

 、 

profile

  etc. ）, Used to store specific types of resource files , The description of each resource directory is shown in the following figure ：

Resource group Directory

Be careful , They all exist in the form of key value pairs ,name Can't repeat ,value Can be repeated , But I believe , since name No repetition ,value Certainly not repeated , Otherwise, what is the significance .

List of determiners

The qualifier catalog can be composed of one or more qualifiers representing the features of the application scenario or device , Including mobile country code and mobile network code 、 Language 、 written words 、 Country or region 、 Horizontal and vertical screen 、 Device type 、 Dimensions such as color mode and screen density , The determiners are underlined （_） Or the middle line （-） Connect . When developers create qualifier directories , You need to master the naming requirements of the determiner directory , And the matching rules between the qualifier directory and the device status .

Determiner value requirements

Do not show table , Purring

Matching rules between qualifier directory and device status

• When matching the corresponding resource file for the device , The priority of qualifier directory matching is from high to low ： Mobile country code and mobile network code  >  Area （ Optional combination ： Language 、 Language _ written words 、 Language _ Country or region 、 Language _ written words _ Country or region ）>  Horizontal and vertical screen  >  Device type  >  Color mode  >  Screen density .

• If the qualifier directory contains
  Mobile country code and mobile network code 、 Language 、 written words 、 Horizontal and vertical screen 、 Device type 、 Color mode
  qualifier , The value of the corresponding qualifier must be consistent with the current equipment status , This directory can participate in resource matching of devices . for example , List of determiners “zh_CN-car-ldpi” Can't participate in “en_US” Resource matching of devices .

Of course, you can also create your own directory , Store pictures and other documents in a unified way , such as , I save the pictures in my own “/common/images” Catalog , In this case , The resource files in the directory will be packaged directly into the application , Without compiling , And it won't be given a resource file ID. This requires your attention .

Access to resources

OpenHarmony  The application resource directory is divided into three categories , One is application resource directory , The other is system resource directory , There is also the directory created by yourself .

Their resource access methods are as follows ：

• Access application resources
  Catalog

• base
    The resource files in the directory will be compiled into binary files and given unique  ID , When using the corresponding resources, use the resource accessor  
  $('app.type.name')
    In the form of ,
  app
    Represents in application  
  resources
    Resources defined in the directory ;
  type
    Represents the resource type , There are  
  color
   、 
  float
   、 
  string
   、 
  string
   、 
  media
    etc. ;
  name
    The name of the file that represents the resource . for example  
  media
    China, Singapore and Canada  
  name
    by  Car.svg Pictures of the , Then access the string resource as  
  $r('app.media.Car')
  .

• The author is in  
  base
    New under the directory  
  string.json
    and  
  color.json
    file , Store string and color respectively , The resource content is shown in the figure below ：

• adopt  
  $('app.type.name')
    A simple example of accessing resources is shown below ：

 @Entry
 @Component
 struct Index {
 
 build() {
 Row() {
 Column() {
 Text($r('app.string.title_desc')) //  Access string resources
 .fontSize(60).fontWeight(FontWeight.Bold)
 
 .fontColor($r('app.color.title_color')) //  Access font colors
 .backgroundImage($r('app.media.Car')) //  Device background picture
 Image("common/images/Car.svg").objectFit(ImageFit.Contain).height(200)
 }
 .width('100%')
 }
 .height('100%')
 }
 }


The sample running results are shown in the following figure ：

• Access system resources

• System resources include  
  Color
   、 
  Round corners
   、 
  typeface
   、 
  spacing
   、 
  character string
    And  
  picture
    etc. , By using system resources , Different developers can develop applications with the same visual style , Developers can use  
  $r('sys.type.name')
    Reference system resources in the form of , Unlike accessing application resources, use  
  sys
    Represents system resources , Others are consistent with the rules for accessing application resources .

• A simple example of accessing system resources is shown below ：

 @Entry
 @Component
 struct ResourceTest {
 build() {
 Column() {
 Text($r('app.string.title_desc')) //** Access the application resource directory **
 .fontColor($r('sys.color.ohos_fa_alert')) //** Access the system resource directory **
 .fontSize($r('sys.float.ohos_id_text_size_headline3'))
 .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
 Image("/common/images/Car.svg") //** Create your own directory **
 .objectFit(ImageFit.None)
 .border({
 color: Color.Orange,
 radius: 20,
 width: 12
 })
 .margin({
 top: 50,
 
 })
 .width(200)
 .height(200)
 
 }
 .padding(20)
 .width("100%")
 .height("100%")
 }
 }


The sample running results are shown in the following figure ：

Visit the directory you created

We can also store image files in our own “/common/images” Catalog

It's easy to use , As shown in the figure below ：

Image("/common/images/Car.svg") //** Create your own directory **
 .objectFit(ImageFit.None)
 .border({
 color: Color.Orange,
 radius: 20,
 width: 12
 })
 .margin({
 top: 50,

 })
 .width(200)
 .height(200)


Running effect

Explorer

ArkUI Development framework in  

@ohos.resourceManager

  The module provides a resource manager  

ResourceManager

, It can access different resources , For example, get string resources , Get device configuration information, etc ,

resourceManager

  Module provides part  API  As shown below ：

declare namespace resourceManager {
//  obtain ResourceManager
export function getResourceManager(callback: AsyncCallback<ResourceManager>): void;
//  Get specified bundleName Of ResourceManager
export function getResourceManager(bundleName: string, callback: AsyncCallback<ResourceManager>): void;

 export interface ResourceManager {
 //  Get string resources
 getString(resId: number, callback: AsyncCallback<string>): void;
 //  Get string array resource
 getStringArray(resId: number, callback: AsyncCallback<Array<string>>): void;
 //  Get media resources
 getMedia(resId: number, callback: AsyncCallback<Uint8Array>): void;
 //  Get device information , For example, the current screen density , Whether the device type is mobile phone or tablet
 getDeviceCapability(callback: AsyncCallback<DeviceCapability>): void;
 //  Get configuration information , For example, the current screen direction density , Current device language
 getConfiguration(callback: AsyncCallback<Configuration>): void;
 //  Release ResourceManager resources
 release();
 }
}
export default resourceManager;


Use  

ResourceManager

  Call before  

getResourceManager()

  Method to get it , Then call  

ResourceManager

  Various  

getXXX()

  Method to obtain the corresponding resource , 

ResourceManager

  The procedure is as follows ：

• introduce  resourceManager

 import resourceManager from '@ohos.resourceManager';


• obtain  ResourceManager

 aboutToAppear() {
 resourceManager.getResourceManager((error, manager) => {
 //  obtain manager
 })
 }


• Use  ResourceManager

 manager.getString(0x1000001, (innerError, data) => {
 if(data) {
 //  Resource acquisition success
 } else {
 console.log("error: " + JSON.stringify(innerError))
 }
 })


The complete example is shown below ：

import resourceManager from '@ohos.resourceManager';

@Entry @Component struct ResourceTest {

 @State text_string: string = " Learn from nuts ";
 @State capability: string = "OpenHarmony";
 @State configuration: string = " application development ";

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

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

 manager.getConfiguration((innerError, configuration) => {
 if(configuration) {
 this.configuration = JSON.stringify(configuration);
 }
 })
 })
 }

 build() {
 Column({ }) {
 Text(this.text_string) //  Access string resources
 //  Set dimensions
 .fontSize(29)
 .fontColor($r('app.color.title_color')) //  Access font colors


 Text(this.capability) // capability Information
 .fontSize(40).fontWeight(FontWeight.Bold)

 Text(this.configuration) // configuration Information
 .fontSize(60)
 }
 .width('100%')
 .height('100%')
 .padding(10)
 }
}


The sample running results are shown in the following figure ：