笔记：Android自定义按钮涟漪效果

目标

1.创建一个类继承Button并重写onDraw方法

2.创建一个类继承Drawable,在类中实现以下目标

• 能设定颜色,透明度
• 点击画圆
• 自动淡出圆的动画效果

首先创建Button类代码如下:

public class RippleButton extends android.suppert.v7.widget.AppCompatButton {
    private RippleDrawable mRippleDrawable;
    public RippleButton(Context context){
        this(context,null);
    }
    public RippleButton(Context context,AttributeSet attrs){
    this(context,attrs,0);  
    }
    public RippleButton(Context context,AttributSet attrs,int defStyleAttr){
        super(context,attrs,defStyleAttr);
        mRippleDrawable = new RippleDrawable();
    }
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        mRippleDrawable.draw(canvas);
    }
}

创建Drawable类,实现draw方法:

public class RippleDrawable extends Drawable{
    public RippleDrawable(){

    }
    public void draw(Canvas canvas){
    }
}

布局设置:
background背景图可放不可放.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.test.android.customviewtest.MainActivity">

    <com.test.android.customviewtest.RippleButton
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_centerInParent="true"
        android:background="@drawable/ba"
        android:gravity="center"
        android:text="Ripple Button"
        android:textColor="@color/colorPrimary"
        />

</RelativeLayout>

接下来画涟漪的圆在RippleDrawable类中:

public class RippleDrawable extends Drawable{
    private int mRippleColor = 0;
    private int mAlpha = 255;
    private Paint mPaint = new Paint();
    private float mRipplePointX, mRipplePointY;//圆心坐标
    private float mRippleRadios = 0;//半径
    public RippleDrawable() {

        mPaint.setAntiAlias(true);//开启抗锯齿,抗平滑
        mPaint.setDither(true);//开启防抖动
        setRippleColor(Color.RED);//设置涟漪圆的颜色

        //滤镜,可以根据需求来,也可以不设
//        setColorFilter(new LightingColorFilter(0xFFFF0000,0x00330000));
    }
    private int mPaintAlpha = 255;
    private int mBackgroundColor;
    public void draw(Canvas canvas){
    mPaint.setAlpha(mPaintAlpha);
    canvas.drawColor(mBackgroundColor);
    canvas.drawCircle(mRipplePointX,mRipplePointY,mRippleRadios,mPaint);
    }
    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {
        mAlpha = alpha;
        onColorOrAlphaChange();
    }

    @Override
    public int getAlpha() {
        return mAlpha;
    }
    public void setRippleColor(int color){
        mRippleColor = color;
        onColorOrAlphaChange();
    }
    public void onColorOrAlphaChange(){
        mPaint.setColor = mRippleColor;
        if(mAlpha != 255){
            int pAlpha = mPaint.getAlpha();
            int realAlpha = (int)(pAlpha * (mAlpha/255f));
            mPaint.setAlpha(realAlpha);
            mPaint.getColor();
        }
        invalidateSelf();
    }
     @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        if (mPaint.getColorFilter() != colorFilter) {
            mPaint.setColorFilter(colorFilter);
            invalidateSelf();
        }
    }

    @Override
    public int getOpacity() {
        int alpha = mPaint.getAlpha();
        if (alpha == 255) {
            return PixelFormat.OPAQUE;
        } else if (alpha == 0) {
            return PixelFormat.TRANSPARENT;
        } else {
            return PixelFormat.TRANSLUCENT;
        }
    }
}

点击事件:
RippleButtion类
圆点击事件实现刷新需要3步

public class RippleButton extends android.support.v7.widget.AppCompatButton {
......
public RippleButton(Context context, AttributeSet attrs, int defStyleAttr) {
        ......
        //1.设置刷新回调
        mRippleDrawable.setCallback(this);
    }
    @Override
    protected boolean verifyDrawable(@NonNull Drawable who) {
        //2.验证drawable是否OK
        return who == mRippleDrawable || super.verifyDrawable(who);
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //3.设置drawable重绘和刷新的区域
        mRippleDrawable.setBounds(0, 0, getWidth(), getHeight());
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mRippleDrawable.onTouch(event);
        super.onTouchEvent(event);
        return true;
    }
}

RippleDrawable中要实现点击事件,进\退出动画

//用户是否抬起
    private boolean mTouchRelease;

    public void onTouch(MotionEvent event) {

        //getAction()封装了点击的详细信息,是点击抬起还是按下的操作,同时包括点击的坐标信息.
        //getActionMasked()仅仅只保留了点击的操作
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                onTouchDown(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                onTouchMove(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_UP:
                onTouchUp(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_CANCEL:
                onTouchCancel(event.getX(), event.getY());
                break;
        }
    }

    private void onTouchDown(float x, float y) {
        mDonePointX = x;
        mDonePointY = y;
        mRippleRadios = 0;
        mTouchRelease = false;
        startEnterRunnable();
//        mRunnable.run();
    }

    private void onTouchMove(float x, float y) {

    }

    private void onTouchUp(float x, float y) {
        mTouchRelease = true;
        if (mEnterDone)
            startExitRunnable();
    }

    private void onTouchCancel(float x, float y) {
        mTouchRelease = true;
        if (mEnterDone)
            startExitRunnable();
    }

    private boolean mEnterDone;

    private float mEnterProgress = 0;

    //动画查看器,用于实现从快到慢的效果
    private Interpolator mEnterInterpolator = new DecelerateInterpolator(2);


    private Runnable mRunnable = new Runnable() {
        @Override
        public void run() {
            mEnterProgress = mEnterProgress + 0.01f;
            if (mEnterProgress > 1) {
                onEnterDone();
                return;
            }

            float realProgress = mEnterInterpolator.getInterpolation(mEnterProgress);
            onEnterProgress(realProgress);
            scheduleSelf(this, SystemClock.currentThreadTimeMillis() + 16);
        }
    };

    private void onEnterDone() {
        mEnterDone = true;
        if (mTouchRelease) {
            startExitRunnable();
        }
    }

    private void onEnterProgress(float progress) {
        float maxRadius = Math.max(mCenterPointX, mCenterPointY);
        mRippleRadios = getProgresValue(0f, maxRadius, progress);
        mRipplePointX = getProgresValue(mDonePointX, mCenterPointX, progress);
        mRipplePointY = getProgresValue(mDonePointY, mCenterPointY, progress);

        int alpha = (int) getProgresValue(0, 64, progress);
        mBackgroundColor = changeColorAlpha(0x00000000, alpha);

        invalidateSelf();
    }

    //启动进入动画
    private void startEnterRunnable() {
        mPaintAlpha = 255;
        mEnterDone = false;
        mEnterProgress = 0;
        unscheduleSelf(mExitRunnable);
        unscheduleSelf(mRunnable);
        scheduleSelf(mRunnable, SystemClock.uptimeMillis());
    }

    //启动退出动画
    private void startExitRunnable() {
        mExitProgress = 0;
        unscheduleSelf(mRunnable);
        unscheduleSelf(mExitRunnable);
        scheduleSelf(mExitRunnable, SystemClock.uptimeMillis());
    }

    //退出动画进度值
    private float mExitProgress = 0;
    //动画查看器,用于实现从慢到快的效果
    private Interpolator mExitInterpolator = new AccelerateInterpolator(2);


    private Runnable mExitRunnable = new Runnable() {
        @Override
        public void run() {
            mExitProgress = mExitProgress + 0.01f;
            if (mExitProgress > 1) {
                onExitDone();
                return;
            }

            float realProgress = mExitInterpolator.getInterpolation(mExitProgress);
            onExitProgress(realProgress);
            scheduleSelf(this, SystemClock.currentThreadTimeMillis() + 16);
        }
    };

    private void onExitDone() {

    }

    /*
    退出动画刷新方法
     */
    private void onExitProgress(float progress) {
//        float maxRadius = Math.max(mCenterPointX,mCenterPointY);
//        mRippleRadios = getProgresValue(maxRadius,0f,progress);


        int alpha = (int) getProgresValue(64, 0, progress);
        mBackgroundColor = changeColorAlpha(0x00000000, alpha);
        mPaintAlpha = (int) getProgresValue(255, 0, progress);

        invalidateSelf();
    }

    private float getProgresValue(float start, float end, float progress) {
        return start + (end - start) * progress;
    }

    //按下时的点
    private float mDonePointX, mDonePointY;
    //控件的中心点
    private float mCenterPointX, mCenterPointY;

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        mCenterPointX = bounds.centerX();
        mCenterPointY = bounds.centerY();

    }

    private int changeColorAlpha(int color, int alpha) {
        int r = (color >> 16) & 0xFF;
        int g = (color >> 8) & 0xFF;
        int b = (color) & 0xFF;
        return (alpha << 24) | (r << 16) | (g << 8) | b;
    }