IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 系统运维 -> 鸿蒙应用开发 | 进度条(ProgressBarSlider)的功能和用法 -> 正文阅读

[系统运维]鸿蒙应用开发 | 进度条(ProgressBarSlider)的功能和用法

导语:大家好,我是你们的朋友 朋哥。

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

今天来说说进度条,鸿蒙中进度条分为两种 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???????

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

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

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

作者:码工
?

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

  系统运维 最新文章
配置小型公司网络WLAN基本业务(AC通过三层
如何在交付运维过程中建立风险底线意识,提
快速传输大文件,怎么通过网络传大文件给对
从游戏服务端角度分析移动同步(状态同步)
MySQL使用MyCat实现分库分表
如何用DWDM射频光纤技术实现200公里外的站点
国内顺畅下载k8s.gcr.io的镜像
自动化测试appium
ctfshow ssrf
Linux操作系统学习之实用指令(Centos7/8均
上一篇文章      下一篇文章      查看所有文章
加:2021-07-13 17:54:04  更:2021-07-13 17:55:46 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 17:57:13-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码