作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

ProgressBar用于显示内容或操作的进度。

一、ProgressBar1.1 支持的XML属性

ProgressBar的共有XML属性继承自：ScrollView

ProgressBar的自有XML属性见下表：

属性名称

中文描述

取值

取值说明

使用案例

divider_lines_enabled

分割线

boolean类型

可以直接设置true/false，也可以引用boolean资源。

ohos:divider_lines_enabled="true" ohos:divider_lines_enabled="$boolean:true"

divider_lines_number

分割线数量

integer类型

可以直接设置整型数值，也可以引用integer资源。

ohos:divider_lines_number="1" ohos:divider_lines_number="$integer:one"

infinite

是否使用不确定模式

boolean类型

可以直接设置true/false，也可以引用boolean资源。

ohos:infinite="true" ohos:infinite="$boolean:true"

infinite_element

不确定模式图样配置前提：infinite需设置为true

Element类型

仅可引用media/graphic下的图片资源。

ohos:infinite_element="graphic:graphic_src"

max

最大值

integer类型

可以直接设置整型数值，也可以引用integer资源。

ohos:max="1"ohos:max="$integer:one"

max_height

最大高度

float类型

表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。

ohos:max_height="100" ohos:max_height="20vp" ohos:max_height="$float:size_value"

max_width

最大宽度

float类型

表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。

ohos:max_width="100"ohos:max_width="20vp" ohos:max_width="$float:size_value"

min

最小值

integer类型

可以直接设置整型数值，也可以引用integer资源。

ohos:min="1"ohos:min="$integer:one"

orientation

排列方向

horizontal

表示ProgressBar水平显示。

ohos:orientation="horizontal"

vertical

表示ProgressBar垂直显示。

progress

当前进度

integer类型

可以直接设置整型数值，也可以引用integer资源。

ohos:progress="10"ohos:progress="$integer:ten"

background_instruct_element

背景

Element类型

可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。

ohos:background_instruct_element="#000000" ohos:background_instruct_element="​media:media_src"ohos:background_instruct_element="$graphic:graphic_src"

progress_width

进度条宽度

float类型

表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。

ohos:progress_width="100" ohos:progress_width="20vp" ohos:progress_width="$float:size_value"

progress_color

进度条颜色

color类型

可以直接设置色值，也可以引用color资源。

ohos:progress_color="#FF262626" ohos:progress_color="$color:black"

progress_element

进度条背景

Element类型

可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。

ohos:progress_element="#000000"ohos:progress_element="​media:media_src"ohos:progress_element="$graphic:graphic_src"

progress_hint_text

进度提示文本

string类型

可以直接设置文本字串，也可以引用string资源。

ohos:progress_hint_text="test" ohos:progress_hint_text="$string:test_str"

progress_hint_text_alignment

进度提示文本对齐方式

left

表示文本靠左对齐。

可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:progress_hint_text_alignment="top" ohos:progress_hint_text_alignment="top|left"

top

表示文本靠顶部对齐。

right

表示文本靠右对齐。

bottom

表示文本靠底部对齐。

horizontal_center

表示文本水平居中对齐。

vertical_center

表示文本垂直居中对齐。

center

表示文本居中对齐。

progress_hint_text_color

进度提示文本颜色

color类型

可以直接设置色值，也可以引用color资源。

ohos:progress_hint_text_color="#FFFFFFFF" ohos:progress_hint_text_color="$color:black"

vice_progress

当前副进度

integer类型

可以直接设置整型数值，也可以引用integer资源。

ohos:vice_progress="1" ohos:vice_progress="$integer:one"

vice_progress_element

副进度条背景

Element类型

可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。

ohos:vice_progress_element="#000000" ohos:vice_progress_element="​media:media_src" ohos:vice_progress_element="$graphic:graphic_src"

step

进度的步长

integer类型

可以直接设置整型数值，也可以引用integer资源。默认值为1。若step设置为10，进度值则为10的倍数。

ohos:step="1"ohos:step="$integer:one"

progress_hint_text_size

进度提示文本大小

float类型

表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源。

ohos:progress_hint_text_size="100" ohos:progress_hint_text_size="20fp" ohos:progress_hint_text_size="$float:size_value"

1.2 创建ProgressBar

在layout目录下的xml文件中创建一个ProgressBar。

<ProgressBar        ohos:progress_width="10vp"        ohos:height="60vp"        ohos:width="match_parent"        ohos:max="100"        ohos:min="0"        ohos:progress="60"        ohos:top_margin="30vp"/>

创建ProgressBar效果：

1.3 设置ProgressBar

1、设置ProgressBar方向为垂直。

<ProgressBar        ohos:orientation="vertical"        ohos:top_margin="20vp"        ohos:height="150vp"        ohos:width="60vp"        ohos:progress_width="10vp"        ohos:max="100"        ohos:min="0"        ohos:progress="60"/>

垂直ProgressBar效果：

2、设置当前进度

在xml中的设置：

<ProgressBar    ...    ohos:progress="60"/>

或者在Java中设置：

progressBar.setProgressValue(60);

3、设置最大和最小值

在xml中设置：

<ProgressBar    ...    ohos:max="400"    ohos:min="0"/>

或者在Java中设置：

progressBar.setMaxValue(400);progressBar.setMinValue(0);

4、设置ProgressBar进度颜色

<ProgressBar    ...    ohos:progress_element="#FF9900" />

设置ProgressBar颜色效果：

5、设置ProgressBar底色颜色

<ProgressBar    ...    ohos:background_instruct_element="#000000" />

设置底色颜色效果：

6、设置ProgressBar分割线

在xml中配置：

<ProgressBar    ...    ohos:divider_lines_enabled="true"    ohos:divider_lines_number="5" />

在Java代码中配置：

progressBar.enableDividerLines(true);progressBar.setDividerLinesNumber(5);

添加分割线效果：

7、设置ProgressBar分割线颜色

progressBar.setDividerLineColor(Color.MAGENTA);

设置分割线颜色效果：

8、设置ProgressBar提示文字

<ProgressBar    ...    ohos:progress_hint_text="20%"    ohos:progress_hint_text_color="#FFCC99" />

设置提示文字效果：

二、RoundProgressBar

RoundProgressBar继承自ProgressBar，拥有ProgressBar的属性，在设置同样的属性时用法和ProgressBar一致，用于显示环形进度。

2.1 支持的XML属性

RoundProgressBar的共有XML属性继承自：ProgressBar

RoundProgressBar的自有XML属性见下表：

属性名称

中文描述

取值

取值说明

使用案例

start_angle

圆形进度条的起始角度

float类型

可以直接设置浮点数值，也可以引用float浮点数资源。

ohos:start_angle="10" ohos:start_angle="$float:float_num"

max_angle

圆形进度条的最大角度

float类型

可以直接设置浮点数值，也可以引用float浮点数资源。

ohos:start_angle="360.0" ohos:start_angle="$float:float_num"

2.2 创建RoundProgressBar

<RoundProgressBar        ohos:id="$+id:round_progress_bar"        ohos:height="200vp"        ohos:width="200vp"        ohos:progress_width="10vp"        ohos:progress="20"        ohos:progress_color="#00FF00"/>

创建RoundProgressBar效果：

2.3 设置RoundProgressBar

1、设置开始和结束角度

<RoundProgressBar    ...    ohos:start_angle="45"    ohos:max_angle="270"    ohos:progress="20"    ohos:progress_hint_text="Round"    ohos:progress_hint_text_color="#007DFF" />

设置角度效果：

本来写了一个模拟下载数据，加载进度条的例子，写完后，发现用了EventHandler等等，那就把这个例子挪到EventHandler那一章节了。