Android Ripple 按钮水波纹效果(二)优化

发现了不同之处没?点击中间的时候是看不出什么区别,但是点击两边的时候,就很明显了,我们自定义的效果,波纹向两边同速度的扩散,所以就会出现,如果点击点不在中心的时候,距离短的一边波纹先到达,而距离长的一边后到达,不能同时到达边缘!而系统自带的则不存在这种情况,所以这是一个优化点;另一个优化点是:我们自定义的效果,在波纹全部覆盖以后,按钮的选中效果没了。

有两处需要优化的 
1、实现不管是否点击中间点都能实现波纹同步到达边缘 
2、当手指未松开时,选中效果不消失

实现: 
第二点好实现,我们主要讲一下第一点, 
第一点我们观察系统的效果,看似两边速度不一致导致的,其实我们知道实现原理的话,很容易想到,它是不断改变圆的圆心来实现,我们上一篇中的实现方法是圆形固定,就是在我们手指按下的位置,而不断改变半径来实现, 
很明显,这里也需要改变半径来实现,我记得我们上一篇中半径的最大值是需要计算,而这种效果是不需要计算的,因为其最大值是固定的,就是按钮对角线的一半! 
确定了半径的最大值,我们还需要确定圆心X、Y的偏移量,相当于步长吧,其圆心从按下的点到按钮正中间的时间因该是和半径从0到最大值的时间保持一致,所以我们可以通过一下代码来获取圆心的偏移量和最大半径。

/*最大半径*/mRadius = (float) Math.sqrt(mRect.width() / 2 * mRect.width() / 2 + mRect.height() / 2 * mRect.height() / 2);/*半径的偏移量*/mStepRadius = mRadius / mCycle;/*圆心X的偏移量*/mStepOriginX = (mRect.width() / 2 - mInitX) / mCycle;/*圆心Y的偏移量*/mStepOriginY = (mRect.height() / 2 - mInitY) / mCycle;12345678

全部实现代码

package eyeclip.myapplication;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Rect;import android.support.v4.view.MotionEventCompat;import android.support.v4.view.ViewCompat;import android.util.AttributeSet;import android.view.MotionEvent;import android.widget.LinearLayout;/**
 * Created by moon.zhong on 2015/4/27.
 */public class RippleLinearLayout extends LinearLayout {

    /*起始点*/
    private int mInitX;    private int mInitY;    private float mCurrentX;    private float mCurrentY;    /*高度和宽度*/
    private int mWidth;    private int mHeight;    /*绘制的半径*/
    private float mRadius;    private float mStepRadius;    private float mStepOriginX;    private float mStepOriginY;    private float mDrawRadius;    private boolean mDrawFinish;    private final int DURATION = 150;    private final int FREQUENCY = 10;    private float mCycle;    private final Rect mRect = new Rect();    private boolean mPressUp = false;    private Paint mRevealPaint = new Paint(Paint.ANTI_ALIAS_FLAG);    public RippleLinearLayout(Context context) {        super(context);
        initView(context);
    }    public RippleLinearLayout(Context context, AttributeSet attrs) {        super(context, attrs);
        initView(context);
    }    public RippleLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);
        initView(context);
    }    private void initView(Context context) {
        mRevealPaint.setColor(0x25000000);
        mCycle = DURATION / FREQUENCY;        final float density = getResources().getDisplayMetrics().density ;
        mCycle = (density*mCycle);
        mDrawFinish = true;

    }    @Override
    protected void onDraw(Canvas canvas) {        if (mDrawFinish) {            super.onDraw(canvas);            return;
        }
        canvas.drawColor(0x15000000);        super.onDraw(canvas);        if (mStepRadius == 0) {            return;
        }
        mDrawRadius = mDrawRadius + mStepRadius;
        mCurrentX = mCurrentX + mStepOriginX;
        mCurrentY = mCurrentY + mStepOriginY;        if (mDrawRadius > mRadius) {
            mDrawRadius = 0;
            canvas.drawCircle(mRect.width() / 2, mRect.height() / 2, mRadius, mRevealPaint);
            mDrawFinish = true;            if (mPressUp)
                invalidate();            return;
        }

        canvas.drawCircle(mCurrentX, mCurrentY, mDrawRadius, mRevealPaint);
        ViewCompat.postInvalidateOnAnimation(this);
    }    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mRect.set(0, 0, getMeasuredWidth(), getMeasuredHeight());
    }    private void updateDrawData() {//        int radiusLeftTop = (int) Math.sqrt((mRect.left - mInitX) * (mRect.left - mInitX) +//                (mRect.top - mInitY) * (mRect.top - mInitY));//        int radiusRightTop = (int) Math.sqrt((mRect.right - mInitX) * (mRect.right - mInitX) +//                (mRect.top - mInitY) * (mRect.top - mInitY));//        int radiusLeftBottom = (int) Math.sqrt((mRect.left - mInitX) * (mRect.left - mInitX) +//                (mRect.bottom - mInitY) * (mRect.bottom - mInitY));//        int radiusRightBottom = (int) Math.sqrt((mRect.right - mInitX) * (mRect.right - mInitX) +//                (mRect.bottom - mInitY) * (mRect.bottom - mInitY));//        mRadius = getMax(radiusLeftTop, radiusRightTop, radiusLeftBottom, radiusRightBottom);
        /*最大半径*/
        mRadius = (float) Math.sqrt(mRect.width() / 2 * mRect.width() / 2 + mRect.height() / 2 * mRect.height() / 2);
        ;        /*半径的偏移量*/
        mStepRadius = mRadius / mCycle;        /*圆心X的偏移量*/
        mStepOriginX = (mRect.width() / 2 - mInitX) / mCycle;        /*圆心Y的偏移量*/
        mStepOriginY = (mRect.height() / 2 - mInitY) / mCycle;

        mCurrentX = mInitX;
        mCurrentY = mInitY;
    }    @Override
    public boolean onTouchEvent(MotionEvent event) {        final int action = MotionEventCompat.getActionMasked(event);        switch (action) {            case MotionEvent.ACTION_DOWN: {
                mPressUp = false;
                mDrawFinish = false;                int index = MotionEventCompat.getActionIndex(event);                int eventId = MotionEventCompat.getPointerId(event, index);                if (eventId != -1) {
                    mInitX = (int) MotionEventCompat.getX(event, index);
                    mInitY = (int) MotionEventCompat.getY(event, index);
                    updateDrawData();
                    invalidate();
                }                break;
            }            case MotionEvent.ACTION_CANCEL:            case MotionEvent.ACTION_UP:
                mStepRadius = (int) (5 * mStepRadius);
                mStepOriginX = (int) (5 * mStepOriginX);
                mStepOriginY = (int) (5 * mStepOriginY);
                mPressUp = true;
                invalidate();                break;
        }        return super.onTouchEvent(event);
    }    private int getMax(int... radius) {        if (radius.length == 0) {            return 0;
        }        int max = radius[0];        for (int m : radius) {            if (m > max) {
                max = m;
            }
        }        return max;
    }    @Override
    public boolean performClick() {

        postDelayed(new Runnable() {            @Override
            public void run() {
                RippleLinearLayout.super.performClick();
            }
        }, 150);        return true;

    }
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183

效果图对比 
这里写图片描述

这篇主要是对上一篇的内容进行优化,当然你觉得不优化也行!

demo下载


发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。