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>

运行后的效果：