自定义ProgressBar颜色 精致才能超越

由于APP异步进行耗时操作
免不得用到ProgressBar，但是系统样式比较单一
出于新颖美观，大都自定义ProgressBar

别人都是继承View, 自己绘制

这里我给出系统的样式，但是可以自定义颜色和角度和弧度

说到系统的，我们首先根据源码，看看系统是怎么定义的

style

    <style name="Widget.ProgressBar.Horizontal">
        <item name="indeterminateOnly">false</item>
        <item name="progressDrawable">@drawable/progress_horizontal</item>
        <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
        <item name="minHeight">20dip</item>
        <item name="maxHeight">20dip</item>
        <item name="mirrorForRtl">true</item>
    </style>

android:indeterminateOnly :表示进度值是否确定，true表示不确定，false表示确定
android:progressDrawable: 表示进度显示layerDrawable
android:indeterminateDrawable:设置绘制不显示进度的进度条的Drawable对象

这里去看下系统是怎么定义progressDrawable的

<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/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
</layer-list>

看到这里大家应该都明白了

所以要想展示自己希望的颜色，我们应该在res下创建drawable文件夹，新建文件drawable/progressbar_color.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 背景  gradient是渐变,corners定义的是圆角 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp" />

            <solid android:color="#ffffff" />
        </shape>
    </item>
    <!-- 第二条进度条颜色 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="10dip" />

                <gradient
                    android:angle="90.0"
                    android:centerColor="#ac6079"
                    android:centerY="0.45"
                    android:endColor="#6c213a"
                    android:startColor="#e71a5e" />
            </shape>
        </clip>
    </item>
    <!-- 进度条 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dip" />

                <solid android:color="#FF8080" />
            </shape>
        </clip>
    </item>

</layer-list>

这里的引用方式有很多中，我这里给出两种给大家瞅瞅

第一种

然后在布局中引用就可以了。
activity_main.xml

<ProgressBar 
        android:id="@+id/my_progress"
        android:layout_width="match_parent"
        android:layout_height="12dp"
        android:max="100"
        android:progress="40"
        android:secondaryProgress="70"
        style="?android:attr/progressBarStyleHorizontal"
        android:progressDrawable="@drawable/progressbar_color"/>

第二种

首先自定义style

<style name="ProgressBar_Mini" parent="@android:style/Widget.ProgressBar.Horizontal">
        <item name="android:maxHeight">50dip</item>
        <item name="android:minHeight">8dip</item>
        <item name="android:indeterminateOnly">false</item>
        <item name="android:indeterminateDrawable">@android:drawable/progressbar_color</item>
        <item name="android:progressDrawable">@drawable/progressbar_mini</item>
    </style>

在布局中引用

 <ProgressBar
        android:id="@+id/progress"
        style="@style/ProgressBar_Mini"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:progress="50" />