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

悠悠 2023-01-23 03:58 5阅读 0赞

导语：大家好，我是你们的朋友 朋哥。

上一篇原创文章 时间选择器，设置了时间选择控件。  
  
今天来说说进度条，鸿蒙中进度条分为两种 ProgressBar ，Slider 。提前说一下 鸿蒙进度条可是比Android强大多了。

![图片][f9d4265662f4545c6ce8143948ab5510.png]

下面我们开始今天的文章，还是老规矩，通过如下几点来说：

> 1，简介  
> 2，用到的属性  
> 3，实战

### 简介 ###

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

使用场景：项目开发中 通过 设置数值 改变进度条的样式，或者通过手动拖动改变进度条和进度值。  
  
ProgressBar , Slider 两者的主要区别就是 Slider有拖动圆环效果。

### 用到的属性 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5wZW5neHVleGlrYWlmYQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5wZW5neHVleGlrYWlmYQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5wZW5neHVleGlrYWlmYQ_size_16_color_FFFFFF_t_70 2][]

### 实战 ###

**1，添加默认的进度条**

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

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

1，设置分割线 个数 ohos:divider\_lines\_number="5"  
2，设置是否显示分割线 ohos:divider\_lines\_enabled="true"  
3，设置进度条背景颜色 ohos:progress\_element="\#000000" 设置进度条分割线颜色 progressBar.setDividerLineColor(Color.RED);

![图片][657c04a39dcb63647550621af42aa04a.png]

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

1，设置进度条数值 ohos:progress\_hint\_text="30%"  
2, 设置进度条数值颜色 ohos:progress\_hint\_text\_color="\#FFCC99"  
  
![图片][dd3ebf34886dbe663f05ac45fdaaafcf.png]

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

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

![20210712213525221.gif][]![图片][1fe67877c793c0c70a10470b09986ab0.png]

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;
        }
    }

**完整代码效果：**

![图片][de70a4e1294d81eddc96c136cd439c78.gif]

<?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) {
    
        }
    }

老规矩 代码不能少，下载代码 运行效果看看，记得点个赞。  
源码：  
**[https://gitee.com/codegrowth/haomony-develop/tree/master/ProgressBar][https_gitee.com_codegrowth_haomony-develop_tree_master_ProgressBar]**

关注公众号【**程序员漫话编程**】，后台回复 **”鸿蒙“** ，**即可获得上千鸿蒙开源组件。**

> 原创不易，有用就关注一下。要是帮到了你 就给个三连吧，多谢支持。  
>

**觉得不错的小伙伴，记得帮我** 点个赞和关注哟，笔芯笔芯~\*\*

> 作者：码工  
>

有问题请留言或者私信，可以 微信搜索：**程序员漫话编程**，关注公众号获得更多免费学习资料。

[f9d4265662f4545c6ce8143948ab5510.png]: /images/20221004/d7300b22b9a54d3987ac2b9ded482536.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5wZW5neHVleGlrYWlmYQ_size_16_color_FFFFFF_t_70]: /images/20221004/07981998e14e43c6b70a4a1142ffc19c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5wZW5neHVleGlrYWlmYQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/bd6a1929ae5e452e887124ad79b615a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5wZW5neHVleGlrYWlmYQ_size_16_color_FFFFFF_t_70 2]: /images/20221004/738f0703db164cc2bc885c3433bd5994.png
[657c04a39dcb63647550621af42aa04a.png]: /images/20221004/59568687d3ae4302bb99f8febc42b055.png
[dd3ebf34886dbe663f05ac45fdaaafcf.png]: /images/20221004/c47c96b9743943bfbcea6c358518b4cc.png
[20210712213525221.gif]: https://img-blog.csdnimg.cn/20210712213525221.gif
[1fe67877c793c0c70a10470b09986ab0.png]: https://img-blog.csdnimg.cn/img_convert/1fe67877c793c0c70a10470b09986ab0.png
[de70a4e1294d81eddc96c136cd439c78.gif]: /images/20221004/bd18b307317f4d03ac2e5fc8f129ba0e.png
[https_gitee.com_codegrowth_haomony-develop_tree_master_ProgressBar]: https://gitee.com/codegrowth/haomony-develop/tree/master/ProgressBar