自定义进度条ProgressBar的实现

       官方提供的进度条样式比较丑陋，下面我们进行自定义样式。我们以粗水平长条进度条@android:style/Widget.ProgressBar.Horizontal为例来进行说明。首先我们超链接查看@android:style/Widget.ProgressBar.Horizontal的内容如下所示：

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

下面主要是来重点说一下android:progressDrawable以及android:indeterminateDrawable这两个属性。那这个Drawable在ProgressBar中是如何使用的呢？我们来查看一下@android:drawable/progress_horizontal的源码，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<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>

        从这里我们可以看到系统使用的是图层方式，以覆盖的方式进行的。所以如果需要其他的样式的话，改变系统默认的值即可，或者参考一下系统自带的样式设置就行了。我自己定义一个样式ProgressBar_Mini，继承自@android:style/Widget.ProgressBar.Horizontal，如下所示：

 <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/progress_indeterminate_horizontal</item>
        <item name="android:progressDrawable">@drawable/progressbar_mini</item>
    </style>

@drawable/progressbar_mini是我自己定义的，如下所示：

<?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="0dip" />
            <gradient
                    android:startColor="#FF303537"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.5"
                    android:endColor="#FF303537"
                    android:angle="270"
            />
        </shape>
    </item>    
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="0dip" />
                <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="0dip" />
                <gradient
                        android:startColor="#ff45c01a"
                        android:centerColor="#ffffb600"                         
                        android:centerY="0.5"
                        android:endColor="#ff45c01a"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
</layer-list>

实际的效果如下图所示：

知道了怎么修改progressBar的样式，以后就可以随心所欲的修改了！