4.2【HarmonyOS鸿蒙开发】组件ProgressBar和RoundProgressBar

4.2【HarmonyOS鸿蒙开发】组件ProgressBar和RoundProgressBar

作者：韩茹

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

鸿蒙巴士专栏作家

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

一、ProgressBar

1.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=“$media:medi{a}_{s}rc"ohos:infinit{e}_{e}lement="$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=“$color:black"ohos:backgroun{d}_{i}nstruc{t}_{e}lement="$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=“$color:black"ohos:progres{s}_{e}lement="$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=“$color:black"<br/>ohos:vic{e}_{p}rogres{s}_{e}lement="$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那一章节了。

更多内容：

1、社区：鸿蒙巴士https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交流QQ群：714518656

4、视频课：https://www.chengxuka.com