自定义ClipDrawable的使用

最近要实现一个类似扫描的效果，效果如下图，嗯哼～然后要怎么做呢？

withclip.gif

首先明确一下需求，效果是要图中的高光部分从底部到顶部移动,高光部分不能超出圆形背景。

图是矩形的，高光部分只在中间这一部分，我的第一个想法就是使用位移动画呗。仔细一想，不对啊。背景是圆的，而移动的图片是矩形，那矩形的图在移动的过程中肯定是有一部分超出圆形。如下图

withoutclip.gif

要不让UI改图，改成圆形的。不过仔细一想又不对啊，移动的时候，那还是有超出圆形背景的地方。哎呀，这就纠结了。如果移动的高光图片能自己适应圆形的范围那就好了，不过还真的可以实现这种效果，万能的搜索给了我答案，那就是 ClipDrawable。当然现在需要的效果就要自定义ClipDrawable了。

ClipDrawable简介

源码中对于ClipDrawable的简介，直译就是一种可以根据当前的等级（level）来裁剪另一个Drawable的Drawable。

A Drawable that clips another Drawable based on this Drawable's current level value. 

选项	作用
top,bottom,left,right	top:将内部Drawable放在容器的顶部，不改变它的大小，如果为竖直裁剪，从底部开始裁剪。接下来的属性值类似，只不过是位置和裁剪方向对应变化。bottom放在底部，如果竖直裁剪，从顶部开始裁剪；left放在左边，right放在右边，如果是水平裁剪，left从右边开始，right从左边开始。注意，这四个都是不改变内部的Drawable的大小。
center, center_vertical,center_horizontal	同样这三个属性值不改变内部Drawable的大小，center是将内部的Drawable在容器水平和竖直居中，如果竖直裁剪，从上下开始同时裁剪，如果水平裁剪，从左右开始同时裁剪；center_vertical是将内部的Drawable在容器中竖直居中，如果竖直裁剪，从上下开始同时裁剪；center_horizontal是将内部的Drawable放在容器水平居中，如果水平裁剪，从左右开始同时裁剪。
fill, fill_vertical, fill_horizontal	fill是内部的Drawable在水平和竖直方向上同时填充容器，fill_vertical是竖直方向向上填充容器，fill_horizontal是水平方向向上填充容器，fill_vertical和fill_horizontal如果是裁剪方向与填充方向一致的话，不管设置多少level都没有效果，只在设置0的时候，全部裁剪，fill的话，不管裁剪方向如何，都只在level为0的时候全部裁剪
clip_vertical, clip_horizontal	附加选项，较少使用，表示竖直或水平方向的裁剪

ClipDrawable有两个比较关键的属性android:gravity和android:clipOrientation。clipOrientation表示的裁剪的方向，有水平和竖直两个方向。gravity是主要表示内部Drawable的位置，它需要和clipOrientation配合使用才能实现我们想要的效果。gravity的选项比较多，下面简单说一下，它们的作用：

选项	作用
top,bottom,left,right	top:将内部Drawable放在容器的顶部，不改变它的大小，如果为竖直裁剪，从底部开始裁剪。接下来的属性值类似，只不过是位置和裁剪方向对应变化。bottom放在底部，如果竖直裁剪，从顶部开始裁剪；left放在左边，right放在右边，如果是水平裁剪，left从右边开始，right从左边开始。注意，这四个都是不改变内部的Drawable的大小。
center, center_vertical,center_horizontal	同样这三个属性值不改变内部Drawable的大小，center是将内部的Drawable在容器水平和竖直居中，如果竖直裁剪，从上下开始同时裁剪，如果水平裁剪，从左右开始同时裁剪；center_vertical是将内部的Drawable在容器中竖直居中，如果竖直裁剪，从上下开始同时裁剪；center_horizontal是将内部的Drawable放在容器水平居中，如果水平裁剪，从左右开始同时裁剪。
fill, fill_vertical, fill_horizontal	fill是内部的Drawable在水平和竖直方向上同时填充容器，fill_vertical是竖直方向向上填充容器，fill_horizontal是水平方向向上填充容器，fill_vertical和fill_horizontal如果是裁剪方向与填充方向一致的话，不管设置多少level都没有效果，只在设置0的时候，全部裁剪，fill的话，不管裁剪方向如何，都只在level为0的时候全部裁剪
clip_vertical, clip_horizontal	附加选项，较少使用，表示竖直或水平方向的裁剪

上面提到过的level是有范围的，level的范围是0～10000，在ClipDrawable中，0表示的完全裁剪，即整个Drawable都不可见，10000表示不裁剪。比如我们设置level为2000，那么会有80%的区域被裁剪掉了。这个看ClipDrawable源码中的draw方法就明白了。MAX_LEVEL就是值是10000

int w = bounds.width();
final int iw = 0; //mState.mDrawable.getIntrinsicWidth();
if ((mState.mOrientation & HORIZONTAL) != 0) {
        w -= (w - iw) * (MAX_LEVEL - level) / MAX_LEVEL;
    }

int h = bounds.height();
final int ih = 0; //mState.mDrawable.getIntrinsicHeight();
if ((mState.mOrientation & VERTICAL) != 0) {
      h -= (h - ih) * (MAX_LEVEL - level) / MAX_LEVEL;
    }

ClipDrawable使用

第一种方式，先在xml文件中定义一个ClipDrawable，ClipDrawable对应的标签为<clip\>
在XML文件中，

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

然后将它设置给ImageView，可以作为src，也可以作为background

<ImageView
    android:id="@+id/clip_img"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/clip_drawable"/>

最后在代码中给ClipDrawable设置等级

ImageView imageView = (ImageView)findViewById(R.id.clip_img);
ClipDrawable  clipDrawable = (ClipDrawable)imageView.getDrawable();
clipDrawable.setLevel(2000);

第二种方式，我们可以完全在代码中设置ClipDrawable,这种方式比较适合自定义的Drawable，因为自定义的Drawable无法在xml文件中使用。
首先在ClipDrawable的构造方法中传入三个参数，分别是需要被裁剪的Drawable，gravity和裁剪的方向orientation
得到ClipDrawable的对象，接着把它设置给IamgeView,最后设置等级level

ClipDrawable clipDrawable = new ClipDrawable(ContextCompat.getDrawable(context, R.drawable.iamge1),
Gravity.BOTTOM, ClipDrawable.VERTICAL);
ImageView imageView = (ImageView)findViewById(R.id.clip_img);
imageView.setImageDrawable(clipDrawable);

自定义ClipDrawable

上面只是ClipDrawable的简单介绍，使用是很简单的，但是要实现一些特定的效果的话，自定义Drawable就很必要了。

下面就来实现文章开头的例子，
继承ClipDrawable,主要是重写draw(Canvas)方法

    Path mRoundPath = new Path();
    @Override
    public void draw(Canvas canvas) {
        //首先得到Drawable的大小，在这里Drawable的大小就是图片的大小
        Rect bounds = getBounds();
        int width = bounds.width();
        int height = bounds.height();

        //这里Path对象是为了把图片裁剪成圆形，这样图片在每一次setLevel后，都能在圆形背景的范围中
        mRoundPath.reset();
        mRoundPath.addCircle(width/2, height/2, width/ 2, Path.Direction.CW);
        canvas.save();
        canvas.clipPath(mRoundPath);
        //得到当前的level，移动画布，实现向上移动的效果。
        int level = getLevel();
//裁剪的同时，不断移动画布，刚开始把高光的图标向下移动height/2,这样就看不到高光部分了，因为图是刚开始是在圆圈的中间
        canvas.translate(0,  height/2 - (level / 10000f) * (3*height/2 ));
        //记得要调用父类的draw方法，里面是真正实现裁剪的实现，看源码可知Drawable高度和宽度的变化是在里面改变的，即裁剪宽度或高度。
        //上面的mRoundPath裁剪是让内部的Drawable在移动的过程始终是在背景图片的范围内，即裁剪Drawable为圆形
        super.draw(canvas);
        canvas.restore();
    }

从super.draw(canvas)进入到源码中，可以看到如下代码

 @Override
    public void draw(Canvas canvas) {
        final Drawable dr = getDrawable();
        if (dr.getLevel() == 0) {
            return;
        }

        final Rect r = mTmpRect;
        final Rect bounds = getBounds();
        final int level = getLevel();//这里就是得到设置的level

        int w = bounds.width();//drawable的实际宽度
        final int iw = 0; //mState.mDrawable.getIntrinsicWidth();
        if ((mState.mOrientation & HORIZONTAL) != 0) {
//根据level的值计算得到裁剪后的宽度
            w -= (w - iw) * (MAX_LEVEL - level) / MAX_LEVEL;
        }

        int h = bounds.height();//drawable的实际高度
        final int ih = 0; //mState.mDrawable.getIntrinsicHeight();
        if ((mState.mOrientation & VERTICAL) != 0) {
//根据level的值计算得到裁剪后的高度
            h -= (h - ih) * (MAX_LEVEL - level) / MAX_LEVEL;
        }

        final int layoutDirection = getLayoutDirection();
        Gravity.apply(mState.mGravity, w, h, bounds, r, layoutDirection);

        if (w > 0 && h > 0) {
            canvas.save();
            canvas.clipRect(r);//这里就是裁剪的地方
            dr.draw(canvas);//然后就画在画布上，显示出裁剪后的图片了
            canvas.restore();
        }
    }

最后

最后贴出MainActivity的代码，利用一个Runnable实现level的更新

public class MainActivity extends AppCompatActivity {

    private ImageView mImage;
    private ClipDrawable mClip;

    private int mTime = 0;
    int mClipLevel = 0;
    private Runnable mClipRunnable = new Runnable() {
        @Override
        public void run() {
            if(mTime == 1){
                return;
            }

            if(mClipLevel >= 10000){
                mTime++;
            }

            mClipLevel += 100;
            mClip.setLevel(mClipLevel);
            mImage.postDelayed(mClipRunnable, 50);
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btnAgain = findViewById(R.id.btn_again);
        btnAgain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mImage.removeCallbacks(mClipRunnable);
                mTime = 0;
                mClipLevel = 0;
                mImage.post(mClipRunnable);
            }
        });
        mImage = findViewById(R.id.iv_image);
        mClip = new RoundClipDrawable(ContextCompat.getDrawable(this, R.drawable.clip_src),
                Gravity.BOTTOM,ClipDrawable.VERTICAL);
        mImage.setImageDrawable(mClip);
        mImage.postDelayed(mClipRunnable, 500);
    }
}