乐趣区

关于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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章