Android开发之ProgressBar字体随着进度条的加载而滚动
在网上翻阅了很多关于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字体随着进度条的加载而滚动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对ZaLou.Cn网站的支持!
- TensorFlow深度学习笔记 文本与序列的深度模型
- 究竟哪里安全?加拿大VS中国治安大数据起底!意料之中还是之外?
- muduo网络库学习之EventLoop(四):EventLoopThread 类、EventLoopThreadPool 类
- 从小程序游戏开放可以看出,微信已经开始转移小程序战场了
- 17年AI在游戏中完胜人类,AlphaGo的下一个目标是什么?DeepMind有一个45年超越人类计划
- PHP常用的正则表达式
- ASP.NET Core管道深度剖析(3):管道是如何处理HTTP请求的?
- 浅析负载均衡的6种算法,Ngnix的5种算法
- 字符串的学习
- 【Scikit-Learn 中文文档】内核岭回归 - 监督学习 - 用户指南 | ApacheCN
- 可视化(番外篇)——在Eclipse RCP中玩转OpenGL
- 养良好C语言编程风格,编优质C语言代码,这才是C语言的开始
- IBM让《星球大战》中的各种黑科技变成现实
- 学习SVM(二) 如何理解支持向量机的最大分类间隔
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- Android 天气APP(十)继续优化、下拉刷新页面天气数据
- Activity 活动跳转(Java&Kotlin)
- Android 天气APP(九)细节优化、必应每日一图
- Android CheckBox修改选中颜色并去除选中时的水波纹效果
- 绘制带回归线的散点图
- Java&Android像素px、dip转换工具类
- Android WIFI是否连接,网络状态监测工具类
- Kotlin学习日志(五)类与对象
- Android 应用横屏运行
- Android 修改EditView输入框的光标颜色
- Android控件显示、隐藏时,增加动画效果
- Android 自定义样式Shape
- 倒计时工具类
- Android 折叠式布局
- 如何探测内网存活主机