打造精美的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开发者美化应用程序的用户界面。