大綱

• Simple Using
• Linear progress indicators
• Circular progress indicators
• Anatomy
• Key attributes
• Style

Simple Using

determinate progress

<!-- Linear progress indicator -->
<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
<!-- Circular progress indicator -->
<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

indeterminate progress

<!-- Linear progress indicator -->
<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true" />
<!-- Circular progress indicator -->
<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true" />

Switching from indeterminate to determinate

通過以編程方式設置進度，讓 indeterminate 可以順利過渡到 determinate indictor

binding.indeterminateCircularProgress.isIndeterminate = false
binding.indeterminateCircularProgress.setProgressCompat(50,true)

這邊要注意的是，如果要讓用戶看起來是順暢的切換，必須透過 setProgress 方法的參數中，將 animated 設為 true，系統就會幫助我們做出動畫，並轉到指定的數值位置

Showing/hiding the Progress Indicator

默認情況下，indictor 在沒有動畫的情況下顯示或隱藏。可以通過 app:showAnimationBehavior（或 setShowAnimationBehavior 方法）和 app:hideAnimationBehavior（或 setHideAnimationBehavior 方法）更改動畫行為

The modes of behaviors are :

• none (default) : 通過 show、hide 或 setVisibility 方法切換顯示與隱藏
• outward : 對於 linear type，通過從 baseline（或bottom）展開顯示，並通過折疊到 Top 邊緣來隱藏View；對於 Circular type，通過從內邊緣展開來顯示並通過折疊到外邊緣來隱藏
• inward : 對於 linear type ，通過從 top 邊緣展開顯示，並通過折疊到baseline 來隱藏；對於Circular type ，通過從外邊緣展開來顯示並通過折疊到內邊緣來隱藏

當動畫行為不是設定為 none 的時候，元件顯現會隨著動畫結束而改變，使用setVisibilityAfterHide 方法，去控制元件的可見狀態，就如同改變 **Visibiltiy.INVISIBLE (default) or Visibility.GONE

Rounded corners

可以透過app:trackCornerRadius 或setTrackCornerRadius 來改變形狀的圓角

<com.google.android.material.progressindicator.LinearProgressIndicator
        ...
        app:trackCornerRadius="10dp"
        ...
        />

Linear progress indicators

determinate type

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

indeterminate type

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true" />

Multi-color indeterminate animation type

除了上述我們常見的類型，還有這種多顏色類似跑馬燈的型態。在實作上，我們可以透過兩個屬性來設置，分別為

app:indeterminateAnimationType : 設置動畫類型 disjoint 或 contiguous
app:indicatorColor : 用來設置跑馬燈的顏色，**要傳入一個 array color **

array color

<integer-array name="progress_colors">
        <item>@color/red</item>
        <item>@color/lightYellow</item>
        <item>@color/darkGreen</item>
</integer-array>

• disjoint : 動畫重複循環，每個顏色都會一段一段的出現

<!-- Multi-color indeterminate disjoint Linear progress indicator -->
    <com.google.android.material.progressindicator.LinearProgressIndicator
        ...
        android:indeterminate="true"
        app:indeterminateAnimationType="disjoint"
        app:indicatorColor="@array/progress_colors"
        ...
        />

• contiguous : 動畫重複循環，多個顏色會連續出現

使用 contigous 至少需要 3 種顏色。否則，將拋出 IllegalArgumentException

<com.google.android.material.progressindicator.LinearProgressIndicator
        ...
        android:indeterminate="true"
        app:indeterminateAnimationType="contingous"
        app:indicatorColor="@array/progress_colors"
        ...
        />

Circular progress indicators

determinate type

<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

indeterminate type

<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true" />

Anatomy

1. Track
2. Indicator

Key attributes

Common attributes

linear 與 circular 共同屬性上，幾乎都是關於 track ，還有顯示與消失的動畫設置

Linear type specific attributes

Circular type specific attributes

Style

Circular progress indicator 可以透過 Style 來切換大小，如果是自行修改的話，不論 size 或是 thickness (厚度) 都要自行調整。除了必要，建議還是用 Material Design 幫我們包好的

Custom Style

由於 linear 能變化的不多，這邊就拿 circular 來當範例，改動了顏色跟厚度

<style name="Widget.App.CircularProgressIndicator" parent="Widget.MaterialComponents.CircularProgressIndicator">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.CircularProgressIndicator</item>
        <item name="trackThickness">20dp</item>
</style>

<style name="ThemeOverlay.App.CircularProgressIndicator" parent="">
        <item name="colorPrimary">@color/lightBlue</item>
</style>

成品

小結

實作上也是 Material Design 幫我們包好了，使用上不會太困難，也沒有過多的屬性要去控制。

重點應放在，我們如何去應用在情境中，例如在下載檔案中透過 determinate 告知用戶目前的狀況與進度，或是在刷新畫面中透過 indeterminate 告知用戶在執行刷新，又或是在網路中斷或進程異常的狀態下從不確定的狀態 （indeterminat）轉換到 (determinate) 讓用戶知道系統有在持續處理事件中。

如何去配合設計師的 UI/UX 並與 App 中的資料請求邏輯做結合，才是我們要認真看待的

若對實作還是有點不懂的，這邊提供我的 Github 方便大家參考