返回发烧友论坛
发 帖  

[文章]HarmonyOS实战——ProgressBar进度条组件基本使用

兮动人
2021-09-22 23:31:56
阅读量0
HarmonyOS鸿蒙系统鸿蒙OS
0
0
1. ProgressBar进度条组件
  • 组件说明：常见app中，下载进度条，完成任务的进度条等都会用到
  • 常见属性：
  • 常见方法：

基本用法：

  1. <ProgressBar
  2.         ohos:id="$+id:pb"
  3.         ohos:height="match_content"
  4.         ohos:width="300vp"
  5.         ohos:progress="0"
  6.         ohos:progress_hint_text="0%"
  7.         ohos:progress_hint_text_color="#000000"
  8.         ohos:progress_width="50vp"
  9.         ohos:progress_color="red"
  10.         ohos:max="100"
  11.         ohos:min="0"/>
复制代码

  • ohos:progress="50"：表示进度条里面真正的进度，50表示一半是有颜色的，另外一半没有颜色，表示进度条有了50%
  • ohos:progress_hint_text="0%"：跟进度条里面的进度是没有关系的，它只是设置进度条上面的提示文字
  • 一般写的时候，会保证 progress 和 progress_hint_text 的值是一致的
  • ohos:progress_width="50vp"：表示进度条的粗细
  • max、min 表示最大最小，最大一般为100，最小一般为0
  • 运行，发现进度条上面的提示文字为 0%，而且真正的进度也是 0
  • 把上面的进度条和提示文字都改为 80
  • 运行后：

  • 一般在上传或下载的时候经常用到进度条，下载的文字的百分比会不断地改变进度条里面的值

2. ProgressBar案例——点击进度条增加实际进度值
需求分析：
  • 每单击一次进度条组件时，进度条就加 5% 的进度
  • 给进度条组件绑定一个单击事件
  • 案例：ProgressBarApplication
  • 也可以在布局的下面添加一个按钮，给按钮绑定单击事件，当按钮每点一次，进度条的百分比就加5%
ability_main
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">

  9.     <ProgressBar
  10.         ohos:id="$+id:pb"
  11.         ohos:height="match_content"
  12.         ohos:width="300vp"
  13.         ohos:progress="0"
  14.         ohos:progress_hint_text="0%"
  15.         ohos:progress_hint_text_color="#000000"
  16.         ohos:progress_width="50vp"
  17.         ohos:progress_color="red"
  18.         ohos:max="100"
  19.         ohos:min="0"/>

  21. </DirectionalLayout>
复制代码

  • 下面就直接给进度条去绑定单击事件，当用鼠标点击进度条ProgressBar后，就会执行onClick方法
  • MainAbilitySlice
  1. package com.xdr630.progres***arapplication.slice;

  3. import com.xdr630.progres***arapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Component;
  7. import ohos.agp.components.ProgressBar;

  9. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
  10.     @Override
  11.     public void onStart(Intent intent) {
  12.         super.onStart(intent);
  13.         super.setUIContent(ResourceTable.Layout_ability_main);

  15.         //1.找到进度条组件
  16.         ProgressBar pb = (ProgressBar) findComponentById(ResourceTable.Id_pb);

  18.         //2.给进度条绑定一个单击事件
  19.         pb.setClickedListener(this);
  20.     }

  22.     @Override
  23.     public void onActive() {
  24.         super.onActive();
  25.     }

  27.     @Override
  28.     public void onForeground(Intent intent) {
  29.         super.onForeground(intent);
  30.     }

  32.     @Override
  33.     public void onClick(Component component) {
  34.         //把进度条里面的值 + 5
  35.         //获取进度条里面原本的值
  36.         //两种获取进度条组件的方式：
  37.         //1.把onStart方法的pb移动到成员位置
  38.         //2.onClick方法的形参，也表示被点击的组件对象
  39.         //下面就使用第二种来实现
  40.         //强转
  41.         ProgressBar pb = (ProgressBar) component;
  42.         //获取进度条里面原本的值
  43.         int progress = pb.getProgress();
  44.         //把进度条里面的值 + 5
  45.         progress = progress + 5;
  46.         //再给进度条设置进度
  47.         pb.setProgressValue(progress);
  48.         //再修改下提示的文字
  49.         pb.setProgressHintText(progress + "%");
  50.     }
  51. }
复制代码

  • 运行，每点击一次进度条组件，就会增加 5% 进度
  • 发现当点击到100%时，再点击一次，就会到 105%，而进度条的背景色没有增加
  • 在 xml 文件中，给进度条组件设置的值最大100，最小0，按理说是不会超过 100 值的大小的
  • bug 修复：当进度条的值超过 100 后，就不要去增加进度条的值了。当
  • 运行后，进度值到了100%就不会再增加了。progress 大于等于 100 后，就直接 return，后面的代码就不会执行了 。
3. RoundProgressBar进度条
  • 使用方式和ProgressBar是一样的
  • 是ProgressBar的子类，只是显示的方式不同
  • 查看 RoundProgressBar 组件，发现是继承了 ProgressBar 组件的
  • 基本使用

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">

  9.     <RoundProgressBar
  10.         ohos:height="300vp"
  11.         ohos:width="300vp"
  12.         ohos:progress_hint_text="80%"
  13.         ohos:progress_hint_text_size="50vp"
  14.         ohos:progress_hint_text_color="#000000"
  15.         ohos:progress="80"
  16.         ohos:progress_width="20vp"
  17.         ohos:progress_color="red"
  18.         ohos:max="100"
  19.         ohos:min="0"/>
  20. </DirectionalLayout>
复制代码


  • 上面的案例也同样可以使用RoundProgressBar组件来实现，基本一致的效果，只是显示的方式不同而已

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友