使用颜色渐变图片自定义条形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, 顾名思义, 就是有层次感的