使用颜色渐变图片自定义条形ProgressBar

使用颜色渐变图片自定义条形ProgressBar

用过系统原生的ProgressBar的开发者都知道, 其造型是极其丑陋的, 做个demo都会嫌弃.所以通常情况下,我们需要自定义, 在实际项目中, 有UI设计师给我们出好设计图或者给好颜色值, 然后我们来替换掉原生的即可, 在一般情况下能很容易满足需求, 网上大部分博客也有介绍详细步骤, 很简单.
但是, 如果UI设计师给我们的是颜色渐变的图片资源, 这种情况下, 一般是直接给普通的png, 而不会去制作成NinePatch--也就是可以自适应宽度高度的图片, 而在界面布局里, ProgressBar的宽度高度又不一定能完全与所给的图片大小一直(由于手机型号众多, 设计师不可能给每种分辨率手机切一套图), 所以这种情况就会出现图片拉伸的情况, 这个时候用上面的简单的自定义ProgressBar的方法就不能实现需求了.原因和解决方案在下面将进行详细介绍：

• 通常的自定义条形ProgressBar方法介绍
• 使用常规方法来实现用渐变图片自定义ProgressBar的问题
• 解决方法
• 一些思考

---

通常的自定义条形ProgressBar方法介绍

一般情况下, 我们如果要在布局文件里使用原生的ProgressBar, 要加上相应的style.如下:

style=android:Widget.ProgressBar.Horizontal

而我们知道修改原生控件样式的一种高效的方法就是直接继承其Style,并更改我们需要修改的地方即可.这里也一样, 我们通过继承android:Widget.ProgressBar.Horizontal样式来实现条形ProgressBar自定义. 现在我们追踪该style的代码里看看.

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

其中,

<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>

便是我们需要修改的地方, 当然这里指的是修改progressDrawable的样式, 如果修改高度宽度找到相应的属性修改即可. 继续跟进android:drawable/progress_horizontal, 看看其样式是什么.

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

我们可以看到, 这里使用的是layer-list的配置资源, 其最后构造出来的是一个LayerDrawable, 顾名思义, 就是有层次感的