ProgressBar

ProgressBar可用於資料儲存或下載期間的回饋反應，或是當使用者必須知道當前進度時，都可以透過ProgressBar來達成簡易的反饋，舉一個常見且我覺得相近的例子，下載檔案時會看見一條進度條與當前的%數，這一類就可使用ProgressBar來實現。

ProgressBar有兩種基礎型態，分別為長條型與環形。本篇前半段將介紹兩種型態的基礎使用方法。

這是ProgressBar基本屬性架構：

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="50"/>

android:max="100" 用於設定整條ProgressBar的最大值
android:progress="50" 用於設定初始化時ProgressBar的值

ProgressBar操控基礎型態主要透過「style="?android:attr/progressBarStyleHorizontal"」去做切換，常見的型態如下：

長條圖：
?android:attr/progressBarStyleHorizontal

@android:style/Widget.ProgressBar.Horizontal

環形圖:
(放在一起的表示只有大小不同)
?android:attr/progressBarStyleLarge
?android:attr/progressBarStyleSmall

(放在一起的表示只有大小不同)
@android:style/Widget.ProgressBar.Large
@android:style/Widget.ProgressBar.Small
@android:style/Widget.ProgressBar.Inverse

ProgressBar 客製化

ProgressBar客製化分為長條型與環形兩種分別介紹，兩種在XML上的設定與綁定有點不相同。
首先先介紹長條形的設定，它與SeekBar的設定類似，只是少了圖示的設定，詳細操作如下：
先在Drawable建立一個XML檔，這邊為了方便解說將檔名設定為ProgressBar_style.xml，第一次使用的朋友也可以先這樣設定。接下來附上基本的XML檔:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    //ProgressBar的背景
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#4F4F4F"/>
        </shape>
    </item>

    //主要進度條的背景
    <item android:id="@android:id/progress" >
        <clip>
            <shape>
                <gradient
                    android:angle="45"
                    android:centerX="35%"
                    android:centerColor="#47A891"
                    android:startColor="#E8E8E8"
                    android:endColor="#000000"
                    android:type="linear"
                    />
            </shape>
        </clip>
    </item>

    //次要進度條的背景
    <item android:id="@android:id/secondaryProgress" >
        <clip>
            <shape>
                <gradient
                    android:angle="45"
                    android:centerX="35%"
                    android:centerColor="#47A891"
                    android:startColor="#E8E8E8"
                    android:endColor="#000000"
                    android:type="linear"
                    />
            </shape>
        </clip>

    </item>

</layer-list>

這邊主要用於設定背景(background)、主ProgressBar進度條(progress)、次級ProgressBar進度條(secondaryProgress)的客製化效果，需特別注意到item標籤後方接的android:id=""裡面所對應的ID原則上不做更動，避免發生錯誤。此外我們在設定客製化時有用到gradient等標籤，關於這個標籤的詳細用法可以到我介紹Buotton樣式文章處，那邊會有許多資訊。

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/processbar_style"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

progressbar_style.xml設定完成後，我們到View的XML檔找到ProgressBar，並使用「android:progressDrawable=“@drawable/progressbar_style”」將我們設定的客製化XML與ProgressBar綁定。

接下來介紹環形的客製化，詳細操作如下：
先在Drawable建立一個XML檔，這邊為了方便解說將檔名設定為progressbar_color.xml，第一次使用的朋友也可以先這樣設定。接下來附上基本的XML檔:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="720" >
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false" >
        <gradient
            android:centerColor="#35D0FF"
            android:centerY="0.50"
            android:endColor="#FB0303"
            android:startColor="#FFFFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

其中 「android:toDegrees="720"」，裡面的數字代表環形在特定間內會跑幾圈，數字越大循環越快。

<ProgressBar
        android:id="@+id/progressBar7"
        style="@android:style/Widget.ProgressBar.Inverse"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:indeterminateDrawable="@drawable/progressbar_color"
        android:layout_marginTop="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar6"
        />

progressbar_color.xml設定完成後，我們到View的XML檔找到ProgressBar，並使用「android:indeterminateDrawable="@drawable/progressbar_color"」將我們設定的客製化XML與ProgressBar綁定。