Android开发之ProgressBar字体随着进度条的加载而滚动

发布时间 - 2026-01-11 03:09:48    点击率:

在网上翻阅了很多关于ProgressBar滚动效果,但是始终没有找到适合项目中的这种效果,故自己写这篇文章,记录一下写作过程,给大家做一个参考。先看下最终效果效果图

我这里用的是LICEcap软件录制的gif图,效果有点掉帧,哪位仁兄有比较好的录制gif的软件烦请相告,小弟在此先行谢过。

首先看下xml代码,只有两个系统控件,一个TextView和一个ProgressBar,Button只是为了方便触发进度条的效果,实际项目中可以根据需求来做。首先看下xml中的代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:layout_margin="5dp">
 <TextView
  android:layout_marginTop="50dp"
  android:id="@+id/progress_precent"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="0%"
  android:textColor="#ff00"
  android:textSize="12sp"
  android:padding="3dp"/>
 <ProgressBar
  android:id="@+id/pb_progressbar"
  style="?android:attr/progressBarStyleHorizontal"
  android:layout_width="match_parent"
  android:layout_height="5dp"
  android:max="100"
  android:progress="0"
  android:progressDrawable="@drawable/progressbar_color" />
 <Button
  android:id="@+id/btn_start"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginTop="30dp"
  android:text="start" />
</LinearLayout>

样式:progressbar_color.xml

<?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <!-- 背景 gradient是渐变,corners定义的是圆角 -->
 <item android:id="@android:id/background">
  <shape>
   <corners android:radius="5dp" />
   <solid android:color="#9a9a9a" />
  </shape>
 </item>
 <!-- 进度条 -->
 <item android:id="@android:id/progress">
  <clip>
   <shape>
    <corners android:radius="5dp" />
    <solid android:color="#E14f50" />
   </shape>
  </clip>
 </item>
 </layer-list>

在onCreate()方法中得到控件的宽度,代码如下:

 // 得到progressBar控件的宽度
  ViewTreeObserver vto2 = pbProgressbar.getViewTreeObserver();
  vto2.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
   @Override
   public void onGlobalLayout() {
    pbProgressbar.getViewTreeObserver().removeGlobalOnLayoutListener(this);
    width = pbProgressbar.getWidth();
    Log.i("TAG", "MainActivity onCreate()=="+pbProgressbar.getWidth());
   }
  });

先说下具体实现思路,再贴上最终代码

实现思路是我们需要ProgressBar达到最大值时,TextView的位置移动到最远处。要想得到progressBar的任意百分比可以移动到对应百分比的位置,咱们就需要知道每一个百分比移动的距离。说的还不够明白的话咱们看看下面的公式,可以更好的理解。

    // 进度条的最小单位,默认是1,你也可以是其他数值,我在demo中为了方便使用了1:

    进度条的最小单位 / 进度条的最大值 = 每一个百分比移动的距离/总的距离(控件的总宽度)

    可以推导出:

    每一个百分比要移动距离 = (进度条的最小单位 / 进度条的最大值)*总的距离(控件的总宽度)

因为要做移动动画效果,咱们为了避免ANR,直接开一个分线程来控制界面,主要代码如下    

 //开启分线程
    new Thread(new Runnable() {
      @Override
      public void run() {
        //每一段要移动的距离
        scrollDistance = (float) ((1.0 / pbProgressbar.getMax()) * width);
        for (int i = 1; i <= status; i++) {
          runOnUiThread(new Runnable() {
            @Override
            public void run() {
              currentStatue++;
              currentPosition += scrollDistance;
              pbProgressbar.incrementProgressBy(1);
              //做一个平移动画的效果
              progressPrecent.setTranslationX(currentPosition);
              progressPrecent.setText(currentStatue + "%");
            }
          });
          try {
            Thread.sleep(80);
          } catch (InterruptedException e) {
            e.printStackTrace();
          }
        }
      }
    }).start();

大功告成,但是当我们运行起来的时候发现,当ProgressBar达到最大值时,上面的字体超出了屏幕范围而看不到了。效果如图所示:

这给使用者造成了很大的困惑,静下心来分析一下,可以知道TextView一直在对应ProgressBar数据的右面,语言功底不太好,咱们上图看:

可以看出,当数据为0%时就在progressBar对应数据的右方,当数据为最大值时,超出屏幕显示不了就不足为其了。咱们现在如果想让progressBar是最大值时还能显示,就需要当偏移的距离加上字体的宽度和字体右面的Padding值大于progressBar宽度的时候不偏移。接着修改代码如下:

 //开启分线程
    new Thread(new Runnable() {
      @Override
      public void run() {
        //每一段要移动的距离
        scrollDistance = (float) ((1.0 / pbProgressbar.getMax()) * width);
        for (int i = 0; i < status; i++) {
          runOnUiThread(new Runnable() {
            @Override
            public void run() {
              // 控制进度条的增长进度
              pbProgressbar.incrementProgressBy(1);
              currentStatue++;
              tvPrecent.setText(currentStatue + "%");
              // 得到字体的宽度
              tvWidth = tvPrecent.getWidth();
              currentPosition += scrollDistance;
              //做一个平移动画的效果
              // 这里加入条件判断
              if (tvWidth + currentPosition <= width - tvPrecent.getPaddingRight()) {
                tvPrecent.setTranslationX(currentPosition);
              }
            }
          });
          try {
            Thread.sleep(80);
          } catch (InterruptedException e) {
            e.printStackTrace();
          }
        }
      }
    }).start();

我们运行起来,再来看下效果:

到这里咱们就完成了,有不清楚或者写错的地方欢迎留言指正,我会第一时间答复。需要源码的朋友可以去github上下载,双手奉上github地址:字体随着ProgressBar的加载而滚动 。

总结

以上所述是小编给大家介绍的Android开发之ProgressBar字体随着进度条的加载而滚动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# progressBar  # 字体加载  # 滚动  # progressBar进度条  # Android中WebView加载网页设置进度条  # Android Webview添加网页加载进度条实例详解  # Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)  # Android自定义View仿华为圆形加载进度条  # Android自定义View实现加载进度条效果  # Android自定义View基础开发之图片加载进度条  # Android自定义带加载动画效果的环状进度条  # Android自定义带进度条WebView仿微信加载过程  # Android自定义View实现圆形加载进度条  # 进度条  # 做一个  # 的是  # 在此  # 给大家  # 小编  # 加载  # 我在  # 我会  # 还能  # 我这  # 不清楚  # 要想  # 要做  # 再来  # 比较好  # 大功告成  # 为其  # 第一时间  # 可以看出 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel怎么防止CSRF攻击_Laravel CSRF保护中间件原理与实践  微信小程序 五星评分(包括半颗星评分)实例代码  Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  Laravel的辅助函数有哪些_Laravel常用Helpers函数提高开发效率  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码?  Laravel集合Collection怎么用_Laravel集合常用函数详解  如何彻底删除建站之星生成的Banner?  深圳网站制作设计招聘,关于服装设计的流行趋势,哪里的资料比较全面?  Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  高性价比服务器租赁——企业级配置与24小时运维服务  企业网站制作这些问题要关注  再谈Python中的字符串与字符编码(推荐)  制作企业网站建设方案,怎样建设一个公司网站?  如何在新浪SAE免费搭建个人博客?  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  微信小程序 scroll-view组件实现列表页实例代码  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  Laravel中的Facade(门面)到底是什么原理  如何快速使用云服务器搭建个人网站?  如何在IIS中新建站点并配置端口与IP地址?  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  JavaScript Ajax实现异步通信  浅谈Javascript中的Label语句  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  Laravel如何与Pusher实现实时通信?(WebSocket示例)  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  网站建设保证美观性,需要考虑的几点问题!  在线教育网站制作平台,山西立德教育官网?  如何用西部建站助手快速创建专业网站?  网站页面设计需要考虑到这些问题  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗?  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  Python自动化办公教程_ExcelWordPDF批量处理案例  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  独立制作一个网站多少钱,建立网站需要花多少钱?  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  猪八戒网站制作视频,开发一个猪八戒网站,大约需要多少?或者自己请程序员,需要什么程序员,多少程序员能完成?  如何确保西部建站助手FTP传输的安全性?  英语简历制作免费网站推荐,如何将简历翻译成英文?  高防服务器如何保障网站安全无虞?  简单实现Android文件上传  个人网站制作流程图片大全,个人网站如何注销?  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  如何在 React 中条件性地遍历数组并渲染元素