鸿蒙应用开发 | 进度条(ProgressBar,Slider)的功能和用法

于 2025-03-13 18:23:38 发布
阅读量89 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： harmonyos 华为
原文链接：https://blog.youkuaiyun.com/jianpengxuexikaifa/article/details/118684505

简介
ProgressBar , Slider用于显示内容或操作的进度。可以通过进度条查看一些功能操作的进度。

使用场景：项目开发中 通过 设置数值 改变进度条的样式，或者通过手动拖动改变进度条和进度值。

ProgressBar , Slider 两者的主要区别就是  Slider有拖动圆环效果。

用到的属性
ProgressBar的共有XML属性继承自：ScrollView。
ProgressBar和Slider的关系：Slider 继承 ohos.agp.components.AbsSlider  继承 ohos.agp.components.ProgressBar

实战
1，添加默认的进度条

<ProgressBar
    ohos:progress_width="10vp"
    ohos:height="60vp"
    ohos:width="match_parent"
    ohos:max="100"
    ohos:min="0"
    ohos:progress="60"
    ohos:orientation="horizontal"/>

1，默认进度条很简单 ，设置 最大值，最小值，默认进度值。
2，进度条方向 ohos:orientation="horizontal"

2，设置 进度条分割线和分割线颜色

<ProgressBar
    ohos:id="$+id:progressbar"
    ohos:progress_width="10vp"
    ohos:height="100vp"
    ohos:width="match_parent"
    ohos:max="100"
    ohos:min="0"
    ohos:progress="30"
    ohos:progress_element="#000000"
    ohos:divider_lines_enabled="true"
    ohos:divider_lines_number="5"
    />

1，设置分割线 个数  ohos:divider_lines_number="5"
2，设置是否显示分割线  ohos:divider_lines_enabled="true"
3，设置进度条背景颜色  ohos:progress_element="#000000" 设置进度条分割线颜色 progressBar.setDividerLineColor(Color.RED);

3，设置 进度条进度数值及其颜色

<ProgressBar
    ohos:id="$+id:progressbar1"
    ohos:progress_width="10vp"
    ohos:height="100vp"
    ohos:width="match_parent"
    ohos:max="100"
    ohos:min="0"
    ohos:progress="30"
    ohos:progress_element="#232134"
 
    ohos:progress_hint_text="30%"
    ohos:progress_hint_text_color="#FFCC99"
    />

1，设置进度条数值  ohos:progress_hint_text="30%"
2, 设置进度条数值颜色 ohos:progress_hint_text_color="#FFCC99"

图片
 

4，设置 拖动条和拖动进度更新

<Slider
    ohos:id="$+id:current_value_slider"
    ohos:width="0vp"
    ohos:weight="1"
    ohos:height="match_content"
    ohos:left_padding="10vp"
    ohos:right_padding="10vp"
    ohos:max="100"
    ohos:progress="0"
    ohos:progress_hint_text="20%"
    ohos:progress_hint_text_color="#FFCC99"/>

1, 设置拖动条 数值，和数值颜色
 

图片

2，拖动条 更新函数 
Slider.ValueChangedListener
currentSlider.setValueChangedListener(this);

@Override
public void onProgressUpdated(Slider slider, int position, boolean b) {
    switch (slider.getId()) {
        case ResourceTable.Id_current_value_slider: {
            progressBar.setProgressValue(position);
            progressBar1.setProgressHintText(position+"%");
            currentText.setText(String.valueOf(currentSlider.getProgress()));
            break;
        }
        default:
            break;
    }
}

完整代码效果：
 

图片

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="top"
    ohos:padding="20vp"
    ohos:orientation="vertical">
 
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="left"
        ohos:text_color="#000000"
        ohos:text_size="20vp"
        ohos:text="水平进度条 / 竖直进度条"
        />
 
    <ProgressBar
        ohos:progress_width="10vp"
        ohos:height="60vp"
        ohos:width="match_parent"
        ohos:max="100"
        ohos:min="0"
        ohos:progress="60"
        ohos:orientation="horizontal"/>
 
    <ProgressBar
        ohos:progress_width="10vp"
        ohos:height="100vp"
        ohos:width="match_parent"
        ohos:max="100"
        ohos:min="0"
        ohos:progress="30"
        ohos:progress_element="#FF9900"
        ohos:orientation="vertical"/>
 
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="left"
        ohos:text_color="#000000"
        ohos:text_size="20vp"
        ohos:text="进度条分割线和分割线颜色"
        />
 
    <ProgressBar
        ohos:id="$+id:progressbar"
        ohos:progress_width="10vp"
        ohos:height="100vp"
        ohos:width="match_parent"
        ohos:max="100"
        ohos:min="0"
        ohos:progress="30"
        ohos:progress_element="#000000"
        ohos:divider_lines_enabled="true"
        ohos:divider_lines_number="5"
        />
 
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="left"
        ohos:text_color="#000000"
        ohos:text_size="20vp"
        ohos:text="进度条进度数值"
        />
 
    <ProgressBar
        ohos:id="$+id:progressbar1"
        ohos:progress_width="10vp"
        ohos:height="100vp"
        ohos:width="match_parent"
        ohos:max="100"
        ohos:min="0"
        ohos:progress="30"
        ohos:progress_element="#232134"
 
        ohos:progress_hint_text="30%"
        ohos:progress_hint_text_color="#FFCC99"
        />
 
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="left"
        ohos:text_color="#000000"
        ohos:text_size="20vp"
        ohos:text="拖动条和拖动进度更新"
        />
 
    <DirectionalLayout
        ohos:orientation="horizontal"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:top_margin="30vp">
 
        <Slider
            ohos:id="$+id:current_value_slider"
            ohos:width="0vp"
            ohos:weight="1"
            ohos:height="match_content"
            ohos:left_padding="10vp"
            ohos:right_padding="10vp"
            ohos:max="100"
            ohos:progress="0"
            ohos:progress_hint_text="20%"
            ohos:progress_hint_text_color="#FFCC99"/>
 
        <Text
            ohos:id="$+id:current_value_text"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="0"
            ohos:text_size="15fp"
            ohos:padding="5vp"
            ohos:right_margin="10vp"/>
 
    </DirectionalLayout>
</DirectionalLayout>
package com.example.progressbar.slice;
 
import com.example.progressbar.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ProgressBar;
import ohos.agp.components.Slider;
import ohos.agp.components.Text;
import ohos.agp.utils.Color;
 
public class MainAbilitySlice extends AbilitySlice implements Slider.ValueChangedListener{
    private ProgressBar progressBar,progressBar1;
    private Text currentText;
    private Slider currentSlider;
 
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        progressBar = (ProgressBar)findComponentById(ResourceTable.Id_progressbar);
        progressBar.setDividerLineColor(Color.RED);
        progressBar1 = (ProgressBar)findComponentById(ResourceTable.Id_progressbar1);
 
        currentText = (Text) findComponentById(ResourceTable.Id_current_value_text);
        currentSlider = (Slider) findComponentById(ResourceTable.Id_current_value_slider);
        currentSlider.setValueChangedListener(this);
    }
 
    @Override
    public void onActive() {
        super.onActive();
    }
 
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
 
    @Override
    public void onProgressUpdated(Slider slider, int position, boolean b) {
        switch (slider.getId()) {
            case ResourceTable.Id_current_value_slider: {
                progressBar.setProgressValue(position);
                progressBar1.setProgressHintText(position+"%");
                currentText.setText(String.valueOf(currentSlider.getProgress()));
                break;
            }
            default:
                break;
        }
    }
 
    @Override
    public void onTouchStart(Slider slider) {
 
    }
 
    @Override
    public void onTouchEnd(Slider slider) {
 
    }
}

————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.youkuaiyun.com/jianpengxuexikaifa/article/details/118684505

scratchpads
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值