关于harmonyos:42HarmonyOS鸿蒙开发组件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="$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成果：

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

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

5、设置ProgressBar底色色彩

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

设置底色色彩成果：

6、设置ProgressBar分割线

在xml中配置：

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

在Java代码中配置：

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

增加分割线成果：

7、设置ProgressBar分割线色彩

progressBar.setDividerLineColor(Color.MAGENTA);

设置分割线色彩成果：

8、设置ProgressBar提醒文字

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

设置提醒文字效果：

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

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

设置角度成果：

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