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，这样就动起来了，有兴趣的可以试下。