Android开发之ProgressBar字体随着进度条的加载而滚动
作者:四级五次郎 发布时间:2023-12-28 03:06:53
在网上翻阅了很多关于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字体随着进度条的加载而滚动网站的支持!
来源:https://juejin.im/post/59b0dd066fb9a024a04b3273
猜你喜欢
- 概述ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长,类似于C语言中的动态申请内存,动态增长内存。ArrayList不是
- 要点有另一种方法来完成语句映射。 它们映射的语句可以不用 XML 来配置,而可以使用 Java 注解来配置。使用注解来映射简单语句会使代码显
- webflux介绍Spring Boot 2.0spring.io 官网有句醒目的话是:BUILD ANYTHING WITH SPRING
- 这是一篇关于LIstView实现动态数据渲染的文章! 首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案前提比如我们数据
- 本文实例讲述了C#实现Excel导入sqlite的方法,是非常实用的技巧。分享给大家供大家参考。具体方法如下:首先需要引用system.da
- 在项目中,经常会遇到页面分割,最常见的系统或网站的主界面。主页面分为,上面系统简介、下面作者简介、左边系统功能菜单、右边则是菜单真正展示的界
- 一般在实际项目的开发中,会要求涉及日志记录的问题,比较常用的有Log4Net,NLog等几个,而小项目小工具的话,则无需费此大驾。而譬如串口
- 本文实例为大家分享了Java执行SQL脚本文件到数据库的具体方式,供大家参考,具体内容如下方式一:直接读取SQL脚本文件的内容,然后传递到S
- 目录一、值类型和引用类型的区别1、赋值时的区别2、内存分配的区别3、来自继承结构的区别二、总结一、值类型和引用类型的区别.NET的类型可以分
- 相信绝大多数.NET玩家和我一样,常常使用Timer这个对象,而在WPF中使用DispatcherTimer的人也是很多,Dispatche
- properties配置文件如下:human.name=Mr.Yuhuman.age=21human.gender=male如何把prope
- 我们在编程的时候,有时会使用多线程来解决问题,比如你的程序需要在后台处理一大堆数据,但还要使用户界面处于可操作状态;或者你的程序需要访问一些
- 任何简单操作的背后,都有一套相当复杂的机制。本文将以SpringBoot应用的在Docker环境下的打包部署为例,详细讲解如何使用Jenki
- 一、Java IO流1、概念在Java中,把不同的输入源 / 输出源(如:键盘、文件、网络链接等)抽象的表述为“流”(stream)通过 ”
- 本文实例为大家分享了Android实现拼图游戏的具体代码,供大家参考,具体内容如下本人是用 android studio 完成的源码pack
- 目录1. 简单认识BeanProcessorBeanProcessor的理解一个BeanProcessor的使用实例2. BeanProce
- 本文实例为大家分享了java仿windows记事本小程序的具体代码,供大家参考,具体内容如下import java.awt.Checkbox
- 本文实例讲述了Android编程实现加载等待ProgressDialog的方法。分享给大家供大家参考,具体如下:显示progressDial
- 本文实例讲述了Java泛型与数据库应用。分享给大家供大家参考,具体如下:一 点睛BaseDao定义了基本的数据库增删查改, 之后可以继承该泛
- 一、讲个事故接口安全老生常谈了过年之前做了过一款飞机大战的H5小游戏,里面无限模式-需要保存用户的积分,因为使用的Body传参,参数是可见的