Android中 如何让水平进度条(ProgressBar)从左往右变化

今天尝试做个类似街霸中的游戏场景，头部需要显示PK双方的血条。为了达到一个对称的效果，右边的血条要从左往右减少。
展现血条首先想到的是使用ProgressBar，但是发现都是从右往左减少。google了下，没发现有资料介绍如何配置来实现从左到右变化的效果。万幸的是，我们可以看到源码。那么自己动手，丰衣足食.

 

一、失败的尝试
首先想到的是使用Matrix来做镜像处理。
将ProgressBar中的源码copy出来，建一个自己的进度条MyProgressBar。
当然，这中间要处理很多错误信息。需要定义自己的进度条可配置的属性，样式等等。
修改ProgressBar中的onDraw方法:

// modified start Matrix m = new Matrix(); m.setScale(-1,1); m.postTranslate(d.getMinimumWidth() + getPaddingLeft(),getPaddingTop()); canvas.setMatrix(m); // modified end d.draw(canvas);

跑起来后发现progressBar中存在MinWidth和MaxWidth，不同
情况下会影响布局。无奈下只能跟代码了。

二、成功的尝试
这次跟进了

d.draw(canvas);

这行代码，发现progressBar在构造的时候使用了ClipDrawable. 阅读下文档发下如下介绍：
android:clipOrientation         The orientation for the clip.
android:gravity         Specifies where to clip within the drawable.
翻译过来就是：
android:clipOrientation  定义裁剪的方向（水平方向裁剪还是垂直方向裁剪）
android:gravity      指定drawable中可裁剪的部分
尝试修改了下progressBar的Drawable配置文件：
<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 android:gravity="right"> <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 android:gravity="right"> <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>
同时定义进度条的样式：
<?xml version="1.0" encoding="utf-8"?> <resources> <mce:style name="myProgressBarStyle"><!-- <item name="indeterminateOnly">false</item> <item name="progressDrawable">@drawable/progress_horizental</item> <item name="minHeight">12dip</item> <item name="maxHeight">12dip</item> <item name="minWidth">100dip</item> <item name="maxWidth">150dip</item> --></mce:style><style name="myProgressBarStyle" mce_bogus="1"> <item name="indeterminateOnly">false</item> <item name="progressDrawable">@drawable/progress_horizental</item> <item name="minHeight">12dip</item> <item name="maxHeight">12dip</item> <item name="minWidth">100dip</item> <item name="maxWidth">150dip</item> </style> </resources>
运行后的效果：