自定义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:gravityandroid: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);
    }
}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,658评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,482评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,213评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,395评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,487评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,523评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,525评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,300评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,753评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,905评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,541评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2 352

推荐阅读更多精彩内容