【HarmonyOS】在鸿蒙开发中，如何使用资源文件？_harmony 新建media 目录

1.资源分类

应用开发中使用的各类资源文件（颜色、字体、图片等），需要放入特定子目录中进行存储管理，如下所示：

resources
|---base
|   |---element
|   |   |---string.json
|   |---media
|   |   |---icon.png
|   |---profile
|   |   |---test_profile.json
|---en_US  // 默认存在的目录，设备语言环境是美式英文时，优先匹配此目录下资源
|   |---element
|   |   |---string.json
|   |---media
|   |   |---icon.png
|   |---profile
|   |   |---test_profile.json
|---zh_CN  // 默认存在的目录，设备语言环境是简体中文时，优先匹配此目录下资源
|   |---element
|   |   |---string.json
|   |---media
|   |   |---icon.png
|   |---profile
|   |   |---test_profile.json
|---en_GB-vertical-car-mdpi // 自定义限定词目录示例，由开发者创建
|   |---element
|   |   |---string.json
|   |---media
|   |   |---icon.png
|   |---profile
|   |   |---test_profile.json
|---rawfile // 其他类型文件，原始文件形式保存，不会被集成到resources.index文件中。文件名可自定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

其中base目录、限定词目录、rawfile目录称为资源目录，element media profile称为资源组目录。

• base目录：默认存在。会被编译成二进制文件，赋予文件ID，通过资源类型和名称（name）引用
  • element目录：用于存放字符串、颜色、布尔值等基础元素；
  • media目录：存放媒体、动画等文件；
  • profile目录：存放页面索引配置等；
• 限定词目录：基于多语言\国家或地区\横竖屏\设备类型等维度适配使用，内部文件和base对应；
• rawfile目录：可以自由放置各类资源文件，会直接打包进应用，不经过编译，通过文件路径和文件名引用；

资源组目录说明：

以官方的待办事项Demo为例，color.json:

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "page_background",
      "value": "#F1F3F5"
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13

string.json:

{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "待办列表"
    },
    {
      "name": "page_title",
      "value": "待办"
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

float.json:

{
  "float": [
    {
      "name": "checkbox_width",
      "value": "28vp"
    },
    {
      "name": "checkbox_margin",
      "value": "20vp"
    },
    {
      "name": "item_font_size",
      "value": "20fp"
    },
    {
      "name": "title_font_size",
      "value": "28fp"
    },
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

上面可以看到在float.json中单位有vp和fp，这里做下解释：

vp是虚拟像素单位，它以屏幕相对像素为单位，表示一台设备针对应用而言所具有的虚拟尺寸。这个单位用于描述控件的大小，可以使得开发者在不同屏幕尺寸和分辨率的设备上实现一致的布局效果。在一些通用屏幕下，160像素密度下刚好1vp等于1px，这使得换算变得方便。

fp是字体像素单位，它用于描述字体的大小。默认情况下，fp和vp的大小是相同的，即1 fp = 1 vp。然而，如果用户在设备的设置中选择了更大的字体，那么字体的实际显示大小就会在vp的基础上乘以一个scale系数，即1 fp = 1 vp * scale。

简单来说，前期就尺寸用vp，文字大小用fp。

2.创建资源目录和资源文件

2.1 创建资源目录和资源文件

在resources目录右键菜单选择“New -> Resource File”，可同时创建资源目录和资源文件，文件默认创建在base目录的资源组，如果选择了限定词则会按照命名规范自动生成限定词和资源组目录，并将文件创建在限定词目录中。

• 图中的Root Element为资源类型；
• Abaliable qualifiers为供选择的限定词目录，通过右边的小箭头可以添加和删除；
• 创建的目录名自动生成，格式固定为：限定词.资源组；

2.2 创建资源目录

在resources目录右键菜单选择“New > Resource Directory”，可创建资源目录，默认创建的是base目录。如果选择了限定词，则会按照命名规范自动生成限定词和资源组目录。确定限定词后，选择资源组类型，当前资源组类型支持Element、Media、Profile三种，创建后生成资源目录。

2.3 创建资源文件

在资源目录（element、media、profile）的右键菜单选择“New > XXX Resource File”，即可创建对应资源组目录的资源文件。例如，在element目录下可新建Element Resource File。

3.资源访问

3.1 应用资源

对于应用资源，通过“$r(‘app.type.name’)”的形式引用，其中：

• app为应用内resources目录中定义的资源；
• type为资源类型或资源存放的位置，比如：color float string media；
• name为资源命名；

对于rawfile目录资源，通过"$rawfile(‘filename’)"形式引用，其中，filename为rawfile目录下文件的相对路径，文件名需要包含后缀。

具体使用方法如下：

Text($r('app.string.string_hello'))
  .fontColor($r('app.color.color_hello'))
  .fontSize($r('app.float.font_hello'))

Text($r('app.string.string_world'))
  .fontColor($r('app.color.color_world'))
  .fontSize($r('app.float.font_world'))

// 引用string.json资源。Text中$r的第一个参数指定string资源，第二个参数用于替换string.json文件中的%s。
// 如下示例代码value为"We will arrive at five of the clock"。
Text($r('app.string.message_arrive', "five of the clock"))
  .fontColor($r('app.color.color_hello'))
  .fontSize($r('app.float.font_hello'))

// 引用plural$资源。Text中$r的第一个指定plural资源，第二个参数用于指定单复数（在中文，单复数均使用other。在英文，one：代表单数，取值为1；other：代表复数，取值为大于等于1的整数），第三个参数用于替换%d
// 如下示例代码为复数，value为"5 apples"。
Text($r('app.plural.eat_apple', 5, 5))
  .fontColor($r('app.color.color_world'))
  .fontSize($r('app.float.font_world'))

Image($r('app.media.my_background_image'))  // media资源的$r引用

Image($rawfile('test.png'))                 // rawfile$r引用rawfile目录下图片

Image($rawfile('newDir/newTest.png'))       // rawfile$r引用rawfile目录下图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3.2 系统资源

除了自定义资源，开发者也可以使用系统中预定义的资源，统一应用的视觉风格。

在开发过程中，分层参数的用法与资源限定词基本一致。对于系统资源，可以通过“$r(‘sys.type.resource_id’)”的形式引用。其中，sys为系统资源；type为资源类型，取值包括“color”、“float”、“string”、“media”；resource_id为资源id。

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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18