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>
運行後的效果：