最近要实现一个类似扫描的效果,效果如下图,嗯哼~然后要怎么做呢?
首先明确一下需求,效果是要图中的高光部分从底部到顶部移动,高光部分不能超出圆形背景。
图是矩形的,高光部分只在中间这一部分,我的第一个想法就是使用位移动画呗。仔细一想,不对啊。背景是圆的,而移动的图片是矩形,那矩形的图在移动的过程中肯定是有一部分超出圆形。如下图
要不让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);
}
}