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=“ m e d i a : m e d i a s r c " o h o s : i n f i n i t e e l e m e n t = " media:media_src"ohos:infinite_element=" media:medias​rc"ohos:infinitee​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=“ c o l o r : b l a c k " o h o s : b a c k g r o u n d i n s t r u c t e l e m e n t = " color:black"ohos:background_instruct_element=" color:black"ohos:backgroundi​nstructe​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=“ c o l o r : b l a c k " o h o s : p r o g r e s s e l e m e n t = " color:black"ohos:progress_element=" color:black"ohos:progresse​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=“ c o l o r : b l a c k " < b r / > o h o s : v i c e p r o g r e s s e l e m e n t = " color:black"<br />ohos:vice_progress_element=" color:black"<br/>ohos:vicep​rogresse​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效果:

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

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效果:

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

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颜色效果:

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

5、设置ProgressBar底色颜色

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

设置底色颜色效果:

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

6、设置ProgressBar分割线

在xml中配置:

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

在Java代码中配置:

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

添加分割线效果:

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

7、设置ProgressBar分割线颜色

progressBar.setDividerLineColor(Color.MAGENTA);

设置分割线颜色效果:

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

8、设置ProgressBar提示文字

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

设置提示文字效果:

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

二、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效果:

4.2【HarmonyOS鸿蒙开发】组件ProgressBar和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" />

设置角度效果:

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

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

上一篇:Qt进度条QProgressBar的使用


下一篇:控件ProgressBar