字體隨着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的加載而滾動 ，若是以爲對你有幫助，歡迎star和fork。