Android Clip用法——自定義進度條

網上純色的漸變色的進度條已經很多了，近來UI需要一個類遊戲的進度條，這個，

這個用純色做實在難以實現，那就用裁剪圖片實現吧，需要這麼幾步。

定義進度條樣式：

    <style name="myprogressbar">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@drawable/progressbar_layer
        </item>
        <item name="android:indeterminateDrawable">
            @android:drawable/progress_indeterminate_horizontal
        </item>
        <item name="android:minHeight">23dip</item>
        <item name="android:maxHeight">30dip</item>
    </style>

indeterminateOnly表示進度值是否確定，true表示不確定（這時候是波浪的動畫），false表示確定，對於我們的需求來說只是確定的所以是false；
indeterminateDrawable指定波浪動畫的anim文件，如果上面一個屬性值是false，那麼這個的作用就不大了；
progressDrawable是展示確定值的進度條，這是我們想要的；
然後就是定義我們的drawable文件，res/drawable/progressbar_layer：

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <bitmap android:src="@drawable/temp_empty" />
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="1dip" />
                <gradient
                    android:angle="270"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:startColor="#80ffd300" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <bitmap android:src="@drawable/temp_fill" />
        </clip>
    </item>

</layer-list>

注意上面三組item的id的設定，要照上面定義，第一組item是定義進度條的背景色；第二組的item是用漸變色定義的二級進度條；第三組item是一級進度條，第一第二組item是我們需要的分別是兩張圖片，圖片使用<clip>限制的。
最後是使用，

<ProgressBar
    android:id="@+id/progress_sound_correct"
    style="@style/mprogressbar"
    android:layout_width="283dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="11dp"
    android:max="100"
    android:progress="30"/>

對應的效果

另外：
ClipDrawable，這個Drawable類的用法可能更加直觀一些。
定義res/drawable/clip_img.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@drawable/ic_launcher"
    android:gravity="left"/>

clipOrientation表示裁剪是橫向的還是豎向的；
drawable是裁剪的對象；
gravity表示裁剪那一部分，左、右、還是中間；
引用drawable

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_clip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/clip_img" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv_clip"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_launcher" />
</RelativeLayout>

設置裁剪比例

ImageView ivClip = (ImageView) findViewById(R.id.iv_clip);
        ClipDrawable clipDrawable = (ClipDrawable) ivClip.getDrawable();
        clipDrawable.setLevel(40 * 100);

setLevel的取值是0～10000，表示被裁剪出來的部分所佔比例，如果值是10000那就是被裁剪對象完全展示

下面一個是原圖，上面是被裁剪過的，顯示左邊40%。
這種辦法也可以做進度條，只需要給佈局文件加上一個合適的背景，再配上被裁剪的圖片，那就是進度條；要是想讓進度條有動效可以加個計時器在固定時間內勻速的設置增量，把設置後的值setLevel，這樣就動起來了，有興趣的可以試下。