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

阅读量0
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">

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

  19. </DirectionalLayout>
复制代码

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

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

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

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

  14.         //2.给进度条绑定一个单击事件
  15.         pb.setClickedListener(this);
  16.     }

  17.     @Override
  18.     public void onActive() {
  19.         super.onActive();
  20.     }

  21.     @Override
  22.     public void onForeground(Intent intent) {
  23.         super.onForeground(intent);
  24.     }

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

  • 运行,每点击一次进度条组件,就会增加 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">

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


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

回帖

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