HarmonyOS之常用组件ProgressBar的功能和使用

Posted 2021-08-31 Forever_wj

一、简介

• ProgressBar 用于显示内容或操作的进度。
• ProgressBar 的共有 XML 属性继承自 Component，详情请参考我的博客：HarmonyOS之组件通用的XML属性总览。
• 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_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”
orientation	排列方向	vertical	表示ProgressBar垂直显示	ohos:orientation=“vertical”
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" hos: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"<br>ohos:progres{s}_{e}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”
progress_hint_text_alignment	进度提示文本对齐方式	top	表示文本靠顶部对齐	-
progress_hint_text_alignment	进度提示文本对齐方式	right	表示文本靠右对齐	-
progress_hint_text_alignment	进度提示文本对齐方式	bottom	表示文本靠底部对齐	-
progress_hint_text_alignment	进度提示文本对齐方式	horizontal_center	表示文本水平居中对齐	-
progress_hint_text_alignment	进度提示文本对齐方式	vertical_center	表示文本垂直居中对齐	-
progress_hint_text_alignment	进度提示文本对齐方式	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" 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”

二、创建 ProgressBar

• 在 layout 目录下的 xml 文件中创建一个 ProgressBar：

	<ProgressBar
	    ohos:id="$+id:progressbar"
	    ohos:progress_width="10vp"
	    ohos:height="60vp"
	    ohos:width="600vp"
	    ohos:max="100"
	    ohos:min="0"
	    ohos:progress="60"/>

• 创建 ProgressBar 效果：

三、设置 ProgressBar

• 设置 ProgressBar 方向为垂直：

	<ProgressBar
	    ohos:orientation="vertical"
	    ohos:top_margin="20vp"
	    ohos:height="150vp"
	    ohos:width="60vp"
	    ohos:id="$+id:progressbar"
	    ohos:progress_width="10vp"
	    ohos:max="100"
	    ohos:min="0"
	    ohos:progress="60"/>

• 垂直 ProgressBar 效果：

• 设置当前进度
• • 在 xml 中的设置：

	<ProgressBar
    	...
	    ohos:progress="60"/>

• • 在 Java 中设置：

	ProgressBar progressBar = (ProgressBar) findComponentById(ResourceTable.Id_progressbar);
	progressBar.setProgressValue(60);

• 设置最大和最小值
• • 在 xml 中设置：

	<ProgressBar
	    ...
	    ohos:max="400"
	    ohos:min="0"/>

• • 在 Java 中设置：

	progressBar.setMaxValue(400);
	progressBar.setMinValue(0);

• • 设置最大和最小值以及进度的效果：

• 设置 ProgressBar 进度颜色：

	<ProgressBar
	    ...
	    ohos:progress_element="#FF9900" />

• • 设置 ProgressBar 颜色效果：

• 设置 ProgressBar 底色颜色：

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

• • 设置底色颜色效果：

• 设置 ProgressBar 分割线
• • 在 xml 中配置：

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

• • 在 Java 代码中配置：

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

• • 添加分割线效果：

• 设置 ProgressBar 分割线颜色：

	progressBar.setDividerLineColor(Color.MAGENTA);

• • 设置分割线颜色效果：

• 设置 ProgressBar 提示文字：

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

• • 设置提示文字效果：