在網上翻閱了很多關於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的載入而滾動 ，如果覺得對你有幫助，歡迎star和fork。