如何自定义安卓进度条？从入门到精通！

2024-05-23 18:31:56

自定义安卓进度条：根据进度动态更改颜色和形状

前言

进度条是安卓应用程序中常用的元素，它可以指示正在进行的任务的进度。虽然安卓平台提供了标准的进度条控件，但有时我们需要自定义这些控件以满足特定的设计要求。本文将指导您如何自定义安卓进度条，使其具有棕色轮廓、圆角，以及根据进度动态更改内部部分的颜色。

解决问题

要自定义安卓进度条，我们需要创建一个自定义 Drawable，它将绘制进度条的外观。此 Drawable 将由两个层组成：一个用于背景的图层和一个用于进度的图层。

背景图层

背景图层负责绘制进度条的轮廓。我们需要使用 shape 元素来创建具有棕色轮廓和圆角的矩形。

<shape>
    <solid android:color="#FF000000" />
    <stroke
        android:width="10dp"
        android:color="#614328" />
    <corners android:radius="50dp" />
</shape>

进度图层

进度图层负责绘制进度条内部部分。我们需要使用 clip 元素来剪切一个具有圆角的矩形，并使用 solid 元素为其填充颜色。颜色将根据进度动态设置。

<clip>
    <shape>
        <solid android:color="?android:colorAccent" />
        <corners android:radius="30dp" />
    </shape>
</clip>

整合自定义Drawable

一旦创建了自定义 Drawable，就可以将其应用到进度条控件。

<ProgressBar
    android:id="@+id/PBfullness"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="130dp"
    android:layout_height="60dp"
    android:max="100"
    android:progress="100"
    android:layout_marginTop="9dp"
    android:layout_marginLeft="110dp"
    android:progressDrawable="@drawable/custom_progress_bar" />

代码示例

以下是完整的 Drawable 和进度条代码：

custom_progress_bar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#FF000000" />
            <stroke
                android:width="10dp"
                android:color="#614328" />
            <corners android:radius="50dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="?android:colorAccent" />
                <corners android:radius="30dp" />
            </shape>
        </clip>
    </item>
</layer-list>

screen.xml

<ProgressBar
    android:id="@+id/PBfullness"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="130dp"
    android:layout_height="60dp"
    android:max="100"
    android:progress="100"
    android:layout_marginTop="9dp"
    android:layout_marginLeft="110dp"
    android:progressDrawable="@drawable/custom_progress_bar" />