其他分享
首页 > 其他分享> > 4.2【HarmonyOS鸿蒙开发】组件ProgressBar和RoundProgressBar

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需设置为trueElement类型仅可引用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效果:

WX20210610-164137@2x

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

WX20210610-164615@2x

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

WX20210610-164956@2x

5、设置ProgressBar底色颜色

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

设置底色颜色效果:

WX20210610-165135@2x

6、设置ProgressBar分割线

在xml中配置:

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

在Java代码中配置:

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

添加分割线效果:

WX20210610-165417@2x

7、设置ProgressBar分割线颜色

progressBar.setDividerLineColor(Color.MAGENTA);

设置分割线颜色效果:

WX20210610-170007@2x

8、设置ProgressBar提示文字

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

设置提示文字效果:

WX20210610-170234@2x

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

WX20210610-170620@2x

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

设置角度效果:

WX20210610-170834@2x

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

标签:4.2,color,float,RoundProgressBar,ProgressBar,设置,ohos,progress
来源: https://blog.csdn.net/hanru723/article/details/118751311