Android中图片的裁剪和徐徐展开控件ClipDrawable

ClipDrawable代表从其他位图上截取一个“图片片段”，在XML文件中用<clip.../>元素定义ClipDrawable对象，可可指定如下三个属性：

android:drawable：指定截取的源Drawable对象
android:clipOrientation：指定截取的方向，可设置为水平截取或垂直截取
android:gravity：指定截取时的对齐方式

  使用ClipDrawable对象时可以调用setLevel(int level)方法来设置截取的区域大小（最大为10000），当level为0时，截取的图片片段为空；当level为10000时，截取整张图片。

       通过以上说明，我们发现，可以使用ClipDrawable的这种性质控制截取图片的区域大小，让程序不断调用setLevel方法并改变level的值，达到让图片慢慢展开的效果。

下面是一个demo例子，showDrawable()和clip()两种方法分别表示图片徐徐展开和裁剪：

1.drawable中的clip：

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

2.主函数的xml：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.wls.clipdrawabledemo.MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="开始展示图片"
        android:onClick="btnClick"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="裁剪图片"
        android:onClick="btnClick"/>
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/drawable_clip"/>
</LinearLayout>

3.主函数Mainactivity：

public class MainActivity extends AppCompatActivity {

    private ImageView mImageView;
    private ClipDrawable mDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        mImageView = (ImageView) findViewById(R.id.image);
        mDrawable = (ClipDrawable) mImageView.getDrawable();
    }
    public void btnClick(View view){
        switch (view.getId()){
            case R.id.button1:
                showDrawable();
                break;
            case R.id.button2:
                clip();
                break;
        }

    }

    /**
     * 图片的展开
     * 其中 mDrawable.setLevel(mDrawable.getLevel() + 200)和timer中的时间相互配合
     * 可以控制图片的展开速度和时间
     *
     */
    private void showDrawable(){
        final Handler handler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                if(msg.what == 1){
                    mDrawable.setLevel(mDrawable.getLevel() + 200);
                }
            }
        };

        final Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                Message msg = new Message();
                msg.what = 1;
                handler.sendMessage(msg);
                if(mDrawable.getLevel() >= 10000){
                    timer.cancel();
                }
            }
        },0,100);
    }

    /**
     * 图片的裁剪
     */
    private void clip(){
        mDrawable.setLevel(5000);
    }
}

4.效果展示：

           

裁剪的效果：