執行耗時任務時，轉不停的進度條跟比烏龜慢到終點的水平進度條，都是令人煩躁的東西，BUT!你想想看App在該有東西轉圈圈的時候如果沒有它，App畫面彷彿按下時間暫停器，用戶表示:???
含辛茹苦生出來的App...下一步就是被用戶卸載了吧?

什麼都要求效率、速度的現代人需要看到螢幕有東西在動在跑，好讓他們知道雖然要等，但是有進度喔，不是出錯~ 不要刪我>.<
設置進度條也不難，轉動什麼的都幫你做好了，耶~ 繼續當爽咖~

預設長這樣，會自動瞎轉個不停

常用屬性

• android:visibility 可指定的值有下列三種

  • visible : 默認值，元件可見。
  • invisible : 元件不可見，但仍在原地佔著一樣大小的位置。
  • gone : 元件不可見也不占位，已經飛太遠~飛出視線範圍之外了。

• android:max 進度條的最大值

• android:min 進度條的最小值，0~max之間

• android:progress 目前進度，0~max之間

• 改變進度條樣式:

  • 有small、large、horizontal等樣式可挑選。
    

• android:scaleY 改變進度條的厚度，而不會改變元件高度，給個float值，水平進度條可以變粗變細，環形的話會Y軸方向上下伸縮成橢圓形。

• android:scaleX 用法同上scaleY，朝X軸方向左右伸縮。

• android:indeterminate 不確定何時跑完的不確定模式，true的話就像預設的進度環，轉個不停，在水平進度條使用false的話progress就不會自動一跑再跑。

• android:rotation 旋轉，可填正負float值，環形進度條預設的起點和終點是在3點鐘方向，若想調整起、終點為12點鐘方向的話就可以設定android:rotation = "-90"或"270"。

• progressDrawable 自訂取代預設的progressBar的圖檔，給圖檔路徑。比如:可使用Drawable物件設定想要的樣子，存成.xml檔放在res/drawable，這邊就先不跳這個坑，文件給你先XD。Drawble Resource官方文件。如何建立新的Drawble Resource檔放在文章最後補充。

• android:secondaryProgress 次進度條，0~max之間(下面示意圖較淺的綠色部分)，若小於progress時不會顯示。常在影片緩衝的進度看到它。
  

官方文件

範例

應用方式很多可以自己玩玩看，這邊給個幾個Demo

預設樣式

    <ProgressBar
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:indeterminate="true"
        android:max="100"
        android:progress="0"
        android:visibility="visible" />

水平進度條

style找到horizontal設下去~就變這樣

 <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:indeterminate="true"
        android:max="100"
        android:progress="0"
        android:visibility="visible" />

Material 水平進度條

使用Material輕鬆完成漂亮進度條

<com.google.android.material.progressindicator.LinearProgressIndicator
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:indeterminate="true" />

png圖檔

圖檔取自網路免費png圖庫

 <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:indeterminate="true"
        android:indeterminateDrawable="@drawable/image_progress_bar"
        android:visibility="visible" />

• android:indeterminateDrawable="@drawable/image_progress_bar"的設定

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/loading_blue"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080.0" />

drawable resource

自己手工做一個，可透過kotlin程式碼動態控制，使進度條與數值配合同步從0跑到100的效果，抑或也可以做倒數計時器

  <!--為了顯示文字在環中，使用一層FrameLayout-->
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">
        
        <!--環中央的數值-->
        <TextView
            android:id="@+id/textStatus"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="0"
            android:textColor="@color/teal_200"
            android:textSize="22sp" />
        
        <!--外圈進度條-->
        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/circular_progress_grey"
            android:indeterminate="false"
            android:max="100"
            android:progress="100"
            android:progressDrawable="@drawable/circular_progress_bar"
            android:rotation="270" />
    </FrameLayout>

• 環形進度條是由兩個圖層檔案疊起來，上層亮綠色，背景灰色兩個檔案。
  • android:background="@drawable/circular_progress_grey"
    這個是環形背景色，設為進度條的background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:shape="ring"
        android:innerRadiusRatio="2.7"
        android:thicknessRatio="50.0"
        android:useLevel="false">
        <solid android:color="#838282"/>
    </shape>
</item>
</layer-list>

• android:progressDrawable="@drawable/circular_progress_bar"
  這個檔案是環形上層的亮綠色"@color/teal_200"，可自訂，設為進度條的progressDrawable，來替代預設樣式。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadiusRatio="2.7"
            android:shape="ring"
            android:thicknessRatio="40.0"
            android:useLevel="true"
            >
            <solid android:color="@color/teal_200"/>
        </shape>
    </item>
</layer-list>

運行起來是醬

補充:建立新的drawable resource

有興趣了解上面那些元素是什麼的話，可以研究Drawble Resource官方文件。
以防有人不清楚如何建新的檔還是補充一下

• 滑鼠右鍵 -> New -> Drawable Resource File
  
• 鍵入檔案名稱及跟根元素(可以之後修改) -> OK
  

大家 明天見~