Android中按钮的水波纹点击效果的实现

关于按钮水波纹的点击效果，这个是我在http://blog.csdn.net/singwhatiwanna/article/details/42614953这篇文章读到的。写得真心不错，我只是站在巨人的肩上而已。

我加了一些注释，以至于我们更好的理解这篇不错的文章

下面是主要源代码：

public class RevealLayout extends LinearLayout implements Runnable
{

private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
// 被点击的控件的宽高
private int mTargetWidth;
private int mTargetHeight;
// 在被选中的控件长宽中的最大值和最小值
private int mMinBetweenWidthAndHeight;
private int mMaxBetweenWidthAndHeight;

// mMaxRadius为绘制的水波纹圆圈最大的半径
private int mMaxRevealRadius;
// mRevealRadiusGap为每次重新绘制半径增加的值
private int mRevealRadiusGap;
// mRevealRadius为初始的数值
private int mRevealRadius = 0;
// 用户点击处的坐标
private float mCenterX;
private float mCenterY;
// 获取自定义控件MyRevealLayout 在屏幕上的位置
private int[] mLocationInScreen = new int[2];
// 是否执行动画
private boolean mShouldDoAnimation = false;
// 是否被按下
private boolean mIsPressed = false;
// 重新绘制的时间 单位毫秒
private int INVALIDATE_DURATION = 50;
// mTouchTarget指的是用户点击的那个view
private View mTouchTarget;
// 松手的事件分发线程
private DispatchUpTouchEventRunnable mDispatchUpTouchEventRunnable = new DispatchUpTouchEventRunnable();

public RevealLayout(Context context)
{
super(context);
init();
}

public RevealLayout(Context context, AttributeSet attrs)
{
super(context, attrs);
init();
}

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public RevealLayout(Context context, AttributeSet attrs, int defStyleAttr)
{
super(context, attrs, defStyleAttr);
init();
}

private void init()
{
setWillNotDraw(false);
mPaint.setColor(getResources().getColor(R.color.reveal_color));
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b)
{
super.onLayout(changed, l, t, r, b);
this.getLocationOnScreen(mLocationInScreen);
}

private void initParametersForChild(MotionEvent event, View view)
{
mCenterX = event.getX();
mCenterY = event.getY();
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);
int left = location[0] - mLocationInScreen[0];
int transformedCenterX = (int) mCenterX - left;
mMaxRevealRadius = Math.max(transformedCenterX, mTargetWidth - transformedCenterX);
}

/**
* 绘制水波
*/
protected void dispatchDraw(Canvas canvas)
{
super.dispatchDraw(canvas);
if (!mShouldDoAnimation || mTargetWidth <= 0 || mTouchTarget == null)
{
return;
}

if (mRevealRadius > mMinBetweenWidthAndHeight / 2)
{
mRevealRadius += mRevealRadiusGap * 4;
} else
{
mRevealRadius += mRevealRadiusGap;
}
this.getLocationOnScreen(mLocationInScreen);
int[] location = new int[2];
mTouchTarget.getLocationOnScreen(location);
// 获得要绘制View的left, top, right, bottom值
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, right, bottom);
canvas.drawCircle(mCenterX, mCenterY, mRevealRadius, mPaint);
canvas.restore();

if (mRevealRadius <= mMaxRevealRadius)
{
postInvalidateDelayed(INVALIDATE_DURATION, left, top, right, bottom);
} else if (!mIsPressed)
{
mShouldDoAnimation = false;
postInvalidateDelayed(INVALIDATE_DURATION, left, top, right, bottom);
}
}

@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;
initParametersForChild(event, touchTarget);
// 刷新界面，延迟执行时间
postInvalidateDelayed(INVALIDATE_DURATION);
}
} else if (action == MotionEvent.ACTION_UP)
{
mIsPressed = false;
postInvalidateDelayed(INVALIDATE_DURATION);
mDispatchUpTouchEventRunnable.event = event;
postDelayed(mDispatchUpTouchEventRunnable, 40);
return true;
} else if (action == MotionEvent.ACTION_CANCEL)
{
mIsPressed = false;
postInvalidateDelayed(INVALIDATE_DURATION);
}

return super.dispatchTouchEvent(event);
}

/**
* 遍历view树找到用户所点击的那个view
*
* @param view
* @param x
* @param y
* @return
*/
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;
}

/**
* 判断事件的xy是否落在view的上下左右四个角之内
*
* @param view
* @param x
* @param y
* @return
*/
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 performClick()
{
postDelayed(this, 400);
return true;
}

@Override
public void run()
{
super.performClick();
}

private class DispatchUpTouchEventRunnable implements Runnable
{
public MotionEvent event;

@Override
public void run()
{
if (mTouchTarget == null || !mTouchTarget.isEnabled())
{
return;
}

if (isTouchPointInView(mTouchTarget, (int) event.getRawX(), (int) event.getRawY()))
{
// 使用代码主动去调用控件的点击事件（模拟人手去触摸控件）
mTouchTarget.performClick();
}
}
};

}

注：

在Android中实现view的更新有中方法，一种是invalidate，另一种是postInvalidate，

其中：前者是在UI线程自身中使用，而后者在非UI线程中使用。

当invalidate方法被调用的时候，会告诉系统，当前的view发生改变，应该尽可能快的来进行重绘。并且运行在UI线程

当postInvalidate方法被调用的时候，将会发送消息到主线程，当主线程的消息队列轮询到当前消息的时候，这个方法才会被调用，

刷新界面并不能保证马上刷新。只是尽可能快的进行刷新。尤其是在postInvalidate方法中，这种情况会出现几率更大。

当我们想要使用这种效果时候，只需要将我的控件包裹在这个布局下面即可，如下：

<包名.RevealLayout
android:id="@+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<Button
android:id="@+id/button1"
android:layout_width="200dp"
android:layout_height="40dp"
android:enabled="true"
android:text="Button" />
</包名.RevealLayout>

这样我们就可以实现按钮的水波纹效果了