本文记录了在Android 4.4上实现5.0水波纹特效的过程，特别是在Button等控件点击时的效果。通过重载dispatchTouchEvent获取坐标，并在dispatchDraw中绘制逐渐扩大的Circle来实现水波纹超越控件边界的视觉效果。代码示例展示了如何在一个TabLayout上实现这一特性，并提到了需要注意的长按事件混淆问题。
前言
上篇博客已经是很久以前了，这段时间的确是忙了很多，技术相关的也做的少了。近期一个项目中，需要在4.4上实现一些5.0上的特效，例如Button之类的控件点击时的水波纹效果。在blog里找到了任教主的一篇博文，受到了启发，将他的Demo改动了一些就实现了。具体在应用到自己项目中时遇到了些需求变化和其他问题，这里就相当于做一个记录。
效果演示
AS还是不怎么会用，gif的图就没有了，这里给个静态的
这里说明一下，这个截图是一个拨号盘，在拨号的时候会有水波纹效果。
对比Demo中的效果
从效果图中可以看出与其他水波纹Demo的差异之处在于这个水波纹可以突破控件自身的大小。
思路
重载dispatchTouchEvent获取相应的坐标以及绘制对象，
重载dispatchDraw，根据点击事件来绘制一个逐渐变大的Circle。
代码及说明
Java代码
public class CustomTableLayout extends TableLayout{
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Paint mBgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
/**目标控件宽度*/
private int mTargetWidth;
/**目标控件高度*/
private int mTargetHeight;
/**最小高宽*/
private int mMinBetweenWidthAndHeight;
private int mMaxBetweenWidthAndHeight;
/**水波纹最大半径*/
private int mMaxRevealRadius;
/**水波纹半径增量*/
private int mRevealRadiusGap;
/**水波纹半径*/
private int mRevealRadius = 0;
/**布局处于屏幕的坐标*/
private int[] mLocationInScreen = new int[2];
/**是否绘制水波纹*/
private boolean mShouldDoAnimation = false;
/**点击状态*/
private boolean mIsPressed = false;
/**绘制间隔*/
private int INVALIDATE_DURATION = 40;
/**点击的View*/
private View mTouchTarget;
public CustomTableLayout(Context context) {
super(context);
init();
}
public CustomTableLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
setWillNotDraw(false);
mPaint.setColor(getResources().getColor(R.color.reveal_color_2));
mBgPaint.setColor(getResources().getColor(R.color.reveal_color_2));
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
this.getLocationOnScreen(mLocationInScreen);
}
/**
* @Title: initParametersForChildNew
* @Description: 初始化各个参数
* @param: @param view
* @return: void
* @throws
*/
private void initParametersForChildNew(View view){
mTargetWidth = view.getMeasuredWidth();
mTargetHeight = view.getMeasuredHeight();
mMinBetweenWidthAndHeight = Math.min(mTargetWidth, mTargetHeight);
mMaxBetweenWidthAndHeight = Math.max(mTargetWidth, mTargetHeight);
mRevealRadius = 0;
mShouldDoAnimation = true;
mIsPressed = true;
mRevealRadiusGap = mMinBetweenWidthAndHeight / 8;
int[] location = new int[2];
view.getLocationOnScreen(location);
//突破控件大小的关键之一
mMaxRevealRadius = mMaxBetweenWidthAndHeight/4 +2*mRevealRadiusGap;
}
/**
* @Title: getTouchTarget
* @Description: 获取点击的View
* @param: @param view
* @param: @param x
* @param: @param y
* @param: @return
* @return: View
* @throws
*/
private View getTouchTarget(View view, int x, int y) {
View target = null;
ArrayList<View> TouchableViews = view.getTouchables();
for (View child : TouchableViews) {
if (isTouchPointInView(child, x, y)) {
target = child;
break;
}
}
return target;
}
/**
* @Title: isTouchPointInView
* @Description: 判断point是否是处于View中
* @param: @param view
* @param: @param x
* @param: @param y
* @param: @return
* @return: boolean
* @throws
*/
private boolean isTouchPointInView(View view, int x, int y) {
int[] location = new int[2];
view.getLocationOnScreen(location);
int left = location[0];
int top = location[1];
int right = left + view.getMeasuredWidth();
int bottom = top + view.getMeasuredHeight();
if (view.isClickable() && y >= top && y <= bottom
&& x >= left && x <= right) {
return true;
}
return false;
}
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
int x = (int) event.getRawX();
int y = (int) event.getRawY();
int action = event.getAction();
if (action == MotionEvent.ACTION_DOWN) {
View touchTarget = getTouchTarget(this, x, y);
if (touchTarget != null && touchTarget.isClickable() && touchTarget.isEnabled()) {
mTouchTarget = touchTarget;
initParametersForChildNew(touchTarget);
postInvalidateDelayed(INVALIDATE_DURATION);
}
} else if (action == MotionEvent.ACTION_UP) {
mIsPressed = false;
postInvalidateDelayed(INVALIDATE_DURATION*2);
} else if (action == MotionEvent.ACTION_CANCEL) {
mIsPressed = false;
postInvalidateDelayed(INVALIDATE_DURATION);
}
return super.dispatchTouchEvent(event);
}
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (!mShouldDoAnimation || mTargetWidth <= 0 || mTouchTarget == null) {
return;
}
if (mRevealRadius > mMaxRevealRadius) {
} else {
mRevealRadius += mRevealRadiusGap;
}
this.getLocationOnScreen(mLocationInScreen);
int[] location = new int[2];
mTouchTarget.getLocationOnScreen(location);
int left = location[0] - mLocationInScreen[0];
int top = location[1] - mLocationInScreen[1];
int right = left + mTouchTarget.getMeasuredWidth();
int bottom = top + mTouchTarget.getMeasuredHeight();
canvas.save();
canvas.clipRect(left, top-mRevealRadius, right, bottom+mRevealRadius);
canvas.drawCircle(left+mTargetWidth/2, top+mTargetHeight/2, mMaxRevealRadius, mBgPaint);
canvas.drawCircle(left+mTargetWidth/2, top+mTargetHeight/2, mRevealRadius, mPaint);
canvas.restore();
if (mRevealRadius <= mMaxRevealRadius) {
postInvalidateDelayed(INVALIDATE_DURATION, left, top-mMaxRevealRadius, right, bottom+mMaxRevealRadius);
} else if (!mIsPressed) {
mShouldDoAnimation = false;
postInvalidateDelayed(INVALIDATE_DURATION, left, top-mMaxRevealRadius, right, bottom+mMaxRevealRadius);
}
}
} 我这继承的是一个TabLayout，当然也可以继承其他的Layout实现相同效果。
由于是要做一个扩散出来的水波纹，这里的circle就的圆心就取的是死的，没有根据event来获取，需求不一致就需要重新计算canvas.drawCircle(left+mTargetWidth/2, top+mTargetHeight/2, mRevealRadius, mPaint);和postInvalidateDelayed(INVALIDATE_DURATION, left, top-mMaxRevealRadius, right, bottom+mMaxRevealRadius);
最后有几个需要提醒的地方是，dispatchTouchEvent中最好只return super.dispatchTouchEvent(event);
否则可能会出现长按事件混淆的问题。
扫一扫
6393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
