ProgressBar

ProgressBar用于显示内容或操作的进度。

支持的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"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:progress_width="10vp"    ohos:height="60vp"    ohos:width="600vp"    ohos:max="100"    ohos:min="0"    ohos:progress="60"/>

图1 创建ProgressBar效果 点击放大

设置ProgressBar

  • 设置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"/>

    图2 垂直ProgressBar效果 img

  • 设置当前进度

    在xml中的设置：

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

    或者在Java中设置：

    progressBar.setProgressValue(60);

  • 设置最大和最小值

    在xml中设置：

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

    或者在Java中设置：

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

    图3 设置最大和最小值以及进度的效果 点击放大

  • 设置ProgressBar进度颜色

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

    图4 设置ProgressBar颜色效果 点击放大

  • 设置ProgressBar底色颜色

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

    图5 设置底色颜色效果 点击放大

  • 设置ProgressBar分割线

    在xml中配置：

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

    在Java代码中配置：

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

    图6 添加分割线效果 点击放大

  • 设置ProgressBar分割线颜色

    progressBar.setDividerLineColor(Color.MAGENTA);

    图7 设置分割线颜色效果 点击放大

  • 设置ProgressBar提示文字

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

    图8 设置提示文字效果 点击放大

相关实例

针对ProgressBar组件开发，有以下示例工程可供参考：

  • ProgressBar

    本示例演示了ProgressBar的基本使用方法。

results matching ""

    No results matching ""