自定义进度条ProgressBar

在实际的应用场景中我们有时会自定义进度条。

先看一下效果吧！

一、在布局中添加控件

<ProgressBar
    android:id="@+id/progressBarHorizontal"
    style="@style/InitProgressBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/tv_download_progress"
    android:layout_marginBottom="@dimen/common_10dp"
    android:layout_marginLeft="25dp"
    android:layout_marginRight="25dp"
    android:max="100"
    android:progress="0" />

二、在style中添加布局

<style name="InitProgressBar" parent="@android:style/Widget.ProgressBar.Horizontal">
    <!-- 最大高度50dp，最小高度10dp，进度值确定，Drawable样式文件引用 -->
    <item name="android:maxHeight">50dp</item>
    <item name="android:minHeight">10dp</item>
    <item name="android:indeterminateOnly">false</item>
    <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
    <item name="android:progressDrawable">@drawable/init_progressbar</item>
</style>

三、在drawable中添加样式

<?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>
            <stroke android:width="2px" android:color="@color/white" />设置边框的颜色
            <corners android:radius="10dp"/>
            <gradient
                android:angle="270"
                android:centerY="0.75"
                android:endColor="#000000"
                android:startColor="#000000"/>
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="0dp"/>
                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#CCCCCC"
                    android:startColor="#CCCCCC"/>
            </shape>
        </clip>
    </item>
 
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <!-- 圆角设置 -->
                <corners android:radius="10dp"/>
                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#FFFFFF"
                    android:startColor="#FFFFFF"/>
            </shape>
        </clip>
    </item>
</layer-list>