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:mediasrc"ohos:infiniteelement="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:backgroundinstructelement="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:progresselement="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:viceprogresselement="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](https://i-blog.csdnimg.cn/blog_migrate/0e3b57538bc31b245c75d2d4d278c48c.png)
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](https://i-blog.csdnimg.cn/blog_migrate/1d75a7e520ec699739262715cc6982ca.png)
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](https://i-blog.csdnimg.cn/blog_migrate/24f5a429bc895c112b514193f3aa7781.png)
5、设置ProgressBar底色颜色
<ProgressBar
...
ohos:background_instruct_element="#000000" />
设置底色颜色效果:
![WX20210610-165135@2x](https://i-blog.csdnimg.cn/blog_migrate/12e4b0b39d34a452cd54cd5e155dfa6f.png)
6、设置ProgressBar分割线
在xml中配置:
<ProgressBar
...
ohos:divider_lines_enabled="true"
ohos:divider_lines_number="5" />
在Java代码中配置:
progressBar.enableDividerLines(true);
progressBar.setDividerLinesNumber(5);
添加分割线效果:
![WX20210610-165417@2x](https://i-blog.csdnimg.cn/blog_migrate/80f8585ec6b28c34b20bb0462991565d.png)
7、设置ProgressBar分割线颜色
progressBar.setDividerLineColor(Color.MAGENTA);
设置分割线颜色效果:
![WX20210610-170007@2x](https://i-blog.csdnimg.cn/blog_migrate/97edb94809bd4da42c39cb244eb638cb.png)
8、设置ProgressBar提示文字
<ProgressBar
...
ohos:progress_hint_text="20%"
ohos:progress_hint_text_color="#FFCC99" />
设置提示文字效果:
![WX20210610-170234@2x](https://i-blog.csdnimg.cn/blog_migrate/6eed4f5b888ea81e119218ca83f0e11d.png)
二、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](https://i-blog.csdnimg.cn/blog_migrate/a4482aa61e169a536a6b48631d9d79d1.png)
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](https://i-blog.csdnimg.cn/blog_migrate/983bf2305e0df157ea75511e96ad1538.png)
本来写了一个模拟下载数据,加载进度条的例子,写完后,发现用了EventHandler等等,那就把这个例子挪到EventHandler那一章节了。😂
更多内容:
1、社区:鸿蒙巴士https://www.harmonybus.net/
2、公众号:HarmonyBus
3、技术交流QQ群:714518656
4、视频课:https://www.chengxuka.com