乐趣区

关于harmonyos:42HarmonyOS鸿蒙开发组件ProgressBar和RoundProgressBar

jiezi

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:media_src”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=”$color:black”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=”$color:black”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=”$color:black”<br />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 成果：

<img src=”https://img.chengxuka.com/WX20210610-164137@2x.png/mark” alt=”WX20210610-164137@2x” style=”zoom:50%;” />

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 成果：

<img src=”https://img.chengxuka.com/WX20210610-164615@2x.png/mark” alt=”WX20210610-164615@2x” style=”zoom:50%;” />

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 色彩成果：

<img src=”https://img.chengxuka.com/WX20210610-164956@2x.png/mark” alt=”WX20210610-164956@2x” style=”zoom:50%;” />

5、设置 ProgressBar 底色色彩 

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

设置底色色彩成果：

<img src=”https://img.chengxuka.com/WX20210610-165135@2x.png/mark” alt=”WX20210610-165135@2x” style=”zoom:50%;” />

6、设置 ProgressBar 分割线

在 xml 中配置：

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

在 Java 代码中配置：

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

增加分割线成果：

<img src=”https://img.chengxuka.com/WX20210610-165417@2x.png/mark” alt=”WX20210610-165417@2x” style=”zoom:50%;” />

7、设置 ProgressBar 分割线色彩 

progressBar.setDividerLineColor(Color.MAGENTA);

设置分割线色彩成果：

<img src=”https://img.chengxuka.com/WX20210610-170007@2x.png/mark” alt=”WX20210610-170007@2x” style=”zoom:50%;” />

8、设置 ProgressBar 提醒文字 

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

设置提醒文字效果：

<img src=”https://img.chengxuka.com/WX20210610-170234@2x.png/mark” alt=”WX20210610-170234@2x” style=”zoom:50%;” />

二、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 成果：

<img src=”https://img.chengxuka.com/WX20210610-170620@2x.png/mark” alt=”WX20210610-170620@2x” style=”zoom:50%;” />

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" />

设置角度成果：

<img src=”https://img.chengxuka.com/WX20210610-170834@2x.png/mark” alt=”WX20210610-170834@2x” style=”zoom:50%;” />

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

更多内容：

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

2、公众号：HarmonyBus

3、技术交换 QQ 群：714518656

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

退出移动版