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字体随着进度条的加载而滚动，希望对大家有所帮助