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

最新推荐文章于 2024-03-17 16:02:30 发布
最新推荐文章于 2024-03-17 16:02:30 发布
阅读量1.9k 收藏 3
点赞数
分类专栏： 鸿蒙应用开发入门到进阶 文章标签： 鸿蒙 移动端开发 手机app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianpengxuexikaifa/article/details/118684505
版权

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

上一篇原创文章  时间选择器，设置了时间选择控件。

今天来说说进度条，鸿蒙中进度条分为两种 ProgressBar ，Slider 。提前说一下 鸿蒙进度条可是比Android强大多了。

图片

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

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

简介

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

    }
}

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

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

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

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

作者：码工
 

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

沉默的闪客
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
自定义带动画的不规则分段显示进度条
Water的博客
06-01 2676
转载请注明出处：http://blog.csdn.net/binbinqq86/article/details/46313437 这种效果在游戏中见到的比较多，一般用在初始化加载的时候。最近项目中需要用到这种效果，于是就自己实现了一个，废话不多说，先上效果图 怎么样，如果你感兴趣，就继续向下看吧~ 首先说说实现的原理：整个界面上下是两个文本布局，没什么说的，主要是中间的动画展示进度条
易语言标签制作进度条.rar
03-23
易语言标签制作进度条.rar 易语言标签制作进度条.rar 易语言标签制作进度条.rar 易语言标签制作进度条.rar 易语言标签制作进度条.rar 易语言标签制作进度条.rar
滑动条（Slider），进度条（ProgressBar）运用
07-06
WPF开发过程中少不了有些界面加载等待，不能没有过度界面处理你不然显得软件如同卡死了一般，用户体验极度不好。这需要使用到各种样式的进度条过渡处理展示些细节提醒用户。有些参数的调整一味的使用文本框调整太生硬可以考虑使用滑动条，例如声音的调节等等。
Android开发之进度条ProgressBar的示例代码
01-20
说明 ProgressBar一般用于显示一个过程，例如数据加载过程，文件下载进度，音乐播放进度等。 默认形式ProgressBar 默认方式下，ProgressBar显示为圆形进度，循环转圈，不显示具体的进度值，控制其显隐藏即可，如下 适用于界面加载 //xml中 <ProgressBar android:layout_width=wrap_content android:layout_height=wrap_content> //代码中控制显隐藏 mProgressBar = (ProgressBar) findViewById(R.id.progress
【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— Progress进度条组件
最新发布
温的打怪之旅
03-17 445
Progress为进度条组件，用于显示各种进度。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Slider组件
weixin_47730343的博客
02-09 1338
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Slider组件
Echarts分段仪表盘
unknowna的专栏
05-31 3367
一、代码简介 本次主要是在Vue web项目中，利用Echarts实现一个多段的仪表盘. 二、功能预览 三、示例代码 <template> <div id="echartsGauge" style="width: 358px;height: 327px"></div> </template> <script> im...
鸿蒙应用开发 | (Slider) 用法，拖动进度条改变图片大小和透明度
07-20 1066
导语：大家好，我是你们的朋友 朋哥，十年码农经验，对技术情有独钟。 今天来一个小小的实战，使用进度条的托送功能，实现改变图片的比例和透明度。 不多说了，今天的内容简单，下面我们开始今天的文章，还是老规矩，通过如下几点来说： 1，功能的使用场景 2，用到的属性 3，实战 简介 鸿蒙中进度条目前有3种方式：RoundProgressBar，ProgressBar，Slider，分别是：圆形，线性，和拖动，今天来说说拖动进度条，该类型的进度条有一个拖动bar用来拖动，通过重写Slider....
android 进度条 java_Android进度条progressbar
weixin_42135754的博客
02-16 107
xml文件代码部分android:id="@+id/firstprobar"android:layout_width="match_parent"android:layout_height="wrap_content"android:max="200"android:progress="100"style="?android:attr/progressBarStyleHorizontal"/&gt...
【鸿蒙软件开发】进度条Progress
m0_62599305的博客
10-22 539
Progress是进度条显示组件，显示内容通常为某次目标操作的当前进度。具体用法请参考Progress。Text是文本组件，通常用于展示用户的视图，如显示文章的文字。具体用法可参考Text。Span只能作为Text组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息，例如产品说明书、承诺书等。本节课主要介绍了Progress组件的使用，他可以让你构建出好看的鸿蒙软件界面，让用户的等待不再无聊。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Progress进度条组件
zy0412326的专栏
12-25 926
中段处的进度展示效果与Linear相同。中段处的进度展示效果与Linear相同。进度条也是UI开发最常用的组件之一，进度条组件，用于显示内容加载或操作处理等进度。圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。环形有刻度样式，显示类似时钟刻度形式的进度展示效果。环形有刻度样式，显示类似时钟刻度形式的进度展示效果。环形无刻度样式，环形圆环逐渐显示至完全填充效果。环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Android开发使用ProgressBar实现进度条功能示例
01-05
本文实例讲述了Android开发使用ProgressBar实现进度条功能。分享给大家供大家参考，具体如下： 进度条ProgressBar的使用主要有两种方向; 1.使用官方默认样式 2.使用自定义样式 先看效果： 详细代码实现文末给出 ...
Vue进度条progressbar组件功能
11-29
首先我们看一下进度条组件运行出来的效果，如下图显示 进度条组件 实现过程 :black_medium-small_square: 项目搭建 progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具，...
鸿蒙APP开发入门到进阶 | 入门完整篇。
热门推荐
06-13 1万+
大家好，我是 码工，一个有十年工作经验的码农，一心追求技术。 简介 华为鸿蒙系统（英文：huaweiHarmonyOS,HongmengOS）。在2019年8月9日，华为在东莞举行华为开发者大会，正式发布操作系统鸿蒙OS，该版本是1.0。 鸿蒙OS是一款“面向未来”的操作系统，一款基于微内核的面向全场景的分布式操作系统，现已适配智慧屏，未来它将适配手机、平板、电脑、智能汽车、可穿戴设备等多终端设备。 2020年9月10日，华为鸿蒙系统升级至华为鸿蒙系统2.0版本。 余承东表示，2020年12月份
鸿蒙应用开发 | 文本框（Text）和编辑框（TextField）的功能与用法
06-24 3938
大家好，我是你们的朋友 朋哥，今天开始朋哥开始研究鸿蒙了，定时会写一些文章分享给大家，希望多多提意见。 上一篇原创文章解读了鸿蒙开发布局的 自定义布局，也是为了总结一下几种布局的使用，里面牵涉到几个接口和函数，用来自定义布局的设置和监听。 胜利胜利，布局终于完成了，今天加个鸡腿犒劳一下自己。 接下来我们开始学习组件了，组件是界面的显示组件，界面布局是一个大的规划，组件就是每一个布局中的每一个小布局效果。 简介： 为啥要将Text和 TextField一起来讲呢？主要还是关联性比较高，看下...
HarmonyOS应用开发：鸿蒙Js实战，计算器功能开发
08-09 3001
开发计算器最主要的是连续计算，连续计算需要添加计算优先级逻辑，后续考虑通过遍历来判断里面的计算。
鸿蒙应用开发 | 滚动视图(ScrollView) 的功能和用法
08-09 2651
导语：大家好，我是你们的朋友 朋哥，十年码农经验，对技术情有独钟。 app开发很常见的数据太多，需要完整显示的时候用到滚动效果，今天来看看鸿蒙种的布局滚动ScrollView。 不多说，今天的内容不多，下面我们开始今天的文章，还是老规矩，通过如下几点来说： 1，简介2，属性 3，实战 简介 ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。 比如一个手机界面分为两部分 ，一部分是功能菜单，下一部分是列表，为了显示更多的内容需要...
鸿蒙应用开发 | 图像视图(Image)的功能和用法
07-03 2334
导语：大家好，我是你们的朋友 朋哥。 上一篇原创文章 解析了 开关Switch的功能和用法。这个可是很重要的，是做设置滑块开关的必备组件。 各位尽快学习，后面更新会比较快了，学习完常用的组件 后面就开始大量项目的开发了。 好了，来说一下今天的重点 Image...... 下面我们开始今天的文章，还是老规矩，通过如下几点来说： 1，简介 2，用到的属性 3，实战 简介 Image是用来显示图片的组件，各种图片的展示都需要该组件的使用。 用到的属性 Image的共有XML属性继...
Android进度条函数,android ListView和ProgressBar(进度条控件)的使用方法
05-27
1. Android进度条函数 Android 提供了多种类型的进度条函数，您可以根据您的需求选择合适的进度条函数。以下是一些常用的进度条函数： （1）ProgressDialog ProgressDialog 是 Android 提供的一个对话框，它可以显示一个进度条。在 ProgressDialog 中，您可以设置进度条的样式、进度条的进度、对话框的标题和消息等。 （2）ProgressBar ProgressBar 是 Android 提供的一个进度条控件。它可以在您的应用程序中显示一个进度条。您可以设置 ProgressBar 的样式、进度条的进度等。 （3）SeekBar SeekBar 是 Android 提供的一个滑动条控件。它可以在您的应用程序中显示一个可滑动的进度条。SeekBar 可以用来设置音量、亮度等。 2. Android ListView的使用方法 ListView 是 Android 提供的一个列表控件。它可以在您的应用程序中显示一个可滚动的列表。以下是 ListView 的使用方法： （1）创建一个 ListView 组件 您可以在布局文件中创建一个 ListView 组件。您可以使用以下代码： ``` <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="wrap_content" /> ``` （2）创建一个 Adapter 您需要创建一个 Adapter 来为 ListView 提供数据。Adapter 可以将数据源（如数组或数据库）中的数据转换为 ListView 中的每个列表项。 （3）设置 Adapter 您需要使用 setAdapter() 方法将 Adapter 设置给 ListView。您可以使用以下代码： ``` ListView listView = findViewById(R.id.listview); MyAdapter adapter = new MyAdapter(this, data); listView.setAdapter(adapter); ``` 其中，MyAdapter 是您创建的 Adapter，data 是您要显示的数据源。 3. ProgressBar（进度条控件）的使用方法 ProgressBar 是 Android 提供的一个进度条控件。它可以在您的应用程序中显示一个进度条。以下是 ProgressBar 的使用方法： （1）创建一个 ProgressBar 组件 您可以在布局文件中创建一个 ProgressBar 组件。您可以使用以下代码： ``` <ProgressBar android:id="@+id/progressbar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="visible" /> ``` （2）设置 ProgressBar 的进度 您可以使用 setProgress() 方法设置 ProgressBar 的进度。您可以使用以下代码： ``` ProgressBar progressBar = findViewById(R.id.progressbar); progressBar.setProgress(50); ``` 其中，50 是进度条的进度值。 （3）设置 ProgressBar 的样式 您可以使用 setIndeterminate() 方法设置 ProgressBar 的样式。如果将该方法的参数设置为 true，则 ProgressBar 将显示一个循环动画，表示进度条正在进行中。如果将该方法的参数设置为 false，则 ProgressBar 将显示一个静态的进度条。 ``` ProgressBar progressBar = findViewById(R.id.progressbar); progressBar.setIndeterminate(true); ``` 以上就是 Android 进度条函数、ListView 和 ProgressBar（进度条控件）的使用方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沉默的闪客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值