打造精美的Android進度條樣式

Android進度條是Android應用程序中常見的用戶界面元素。可以用於顯示應用程序中的加載和進度。本文主要介紹如何打造精美的Android進度條樣式，包括自定義進度條樣式、實現圓形進度條、動畫效果等內容。

一、自定義進度條樣式

Android提供了默認的進度條樣式，但是我們可以自定義進度條樣式，使得應用程序的UI更加個性化。自定義進度條樣式需要創建一個XML文件來定義進度條的顏色、形狀和其他屬性。以下是一個簡單的自定義進度條樣式：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="#ff9d9e9d"
                android:centerColor="#ff5a5d5a"
                android:centerY="0.75"
                android:endColor="#ff747674"
                android:angle="270"
            />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="#ff0000ff"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff00ff00"
                    android:angle="270"
                />
            </shape>
        </clip>
    </item>
</layer-list>

下面是代碼解析：

• layer-list：定義一個圖層列表，在這個例子中，我們定義了兩個圖層：背景和進度。
• background圖層：定義進度條的背景，包括圓角矩形和漸變背景顏色。
• progress圖層：定義進度條的進度，包括圓角矩形、漸變顏色和clip(剪裁)，使進度條顏色只顯示在圖形內部。

使用自定義進度條樣式需要在布局文件中設置android:progressDrawable屬性為自定義進度條樣式：

<ProgressBar
    android:id="@+id/progress_bar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/custom_progressbar"
    android:max="100"
    android:progress="50" />

二、實現圓形進度條

除了水平顯示的進度條，Android還支持顯示圓形進度條，稱為環形ProgressBar。下面是一個簡單的圓形進度條的實現：

<ProgressBar
    android:id="@+id/circular_progress_bar"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:visibility="visible"
    android:indeterminateBehavior="cycle"
    android:indeterminate="true"
    android:indeterminateDrawable="@drawable/circle_progress"
/>

下面是代碼解析：

• progressBarStyleLarge：使用大號環形ProgressBar樣式。
• indeterminate：設置進度條為不確定模式。可以通過代碼設置max屬性和progress屬性來確定進度條的進度。
• indeterminateDrawable：設置進度條樣式為自定義繪製的圓形進度條，使用XML文件circle_progress.xml自定義繪製。

接下來是自定義繪製圓形進度條circle_progress.xml的代碼：

<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="700"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:toDegrees="360" >

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thickness="8dp"
        android:useLevel="true">
        <gradient
            android:centerColor="#FF00CC"
            android:centerY="0.50"
            android:endColor="#FF6699"
            android:startColor="#FF9933"
            android:type="sweep" />
    </shape>
</rotate>

代碼解析：

• rotate：定義一個旋轉動畫，在700毫秒內旋轉360度。
• innerRadiusRatio：定義內部半徑相對於環形半徑的比率。
• thickness：定義環形的粗細。
• useLevel：設置為true，表示進度以level的形式設置。

三、動畫效果

除了上面提到的圓形進度條，我們還可以通過動畫效果來改善進度條的體驗。這裡介紹兩種動畫效果：水平進度條增量動畫和環形進度條縮放動畫。

水平進度條增量動畫：

在增加進度時，使用屬性動畫逐漸增加進度條的長度。以下是代碼實現：

private fun animateProgressBar(progressBar: ProgressBar, progressTo: Int) {
    val progressBarWidth = progressBar.width
    val animation = ObjectAnimator.ofInt(progressBar, "progress", progressTo)
    animation.duration = 3000
    animation.interpolator = DecelerateInterpolator()
    animation.addUpdateListener { valueAnimator ->
        val progress = valueAnimator.animatedValue as Int
        val progressWidth = progress * progressBarWidth / progressBar.max
        progressBar.progressDrawable
            .setSize(
                progressWidth,
                progressBar.height
            )
    }
    animation.start()
}

在代碼中我們使用了ObjectAnimator、DecelerateInterpolator來實現進度條增量動畫，並使用addUpdateListener()方法動態設置ProgressBar的長度。

環形進度條縮放動畫：

在增加進度時，用動畫效果縮放ProgressBar。以下是代碼實現：

private fun animateCircularProgressBar(
    progressBar: ProgressBar,
    progressTo: Int,
    duration: Long
) {
    val animation = ScaleAnimation(
        1f,
        progressTo.toFloat() / progressBar.max,
        1f,
        progressTo.toFloat() / progressBar.max,
        progressBar.width / 2f,
        progressBar.height / 2f
    )
    animation.duration = duration
    animation.interpolator = DecelerateInterpolator()
    animation.fillAfter = true
    progressBar.startAnimation(animation)
}

在代碼中我們通過使用ScaleAnimation、DecelerateInterpolator來實現進度條縮放動畫。

小結

本文主要介紹了幾種打造精美的Android進度條樣式的方法，包括自定義進度條樣式、實現圓形進度條和動畫效果。希望這些技巧可以幫助Android開發者美化應用程序的用戶界面。