Android自定义View——扩散波浪按钮

前言

劳动节快乐！！！O(∩_∩)O(本文写于2017年劳动节假期的最后一天。)
虽然现在不是一个值得庆祝的时间，因为美好的白天已经过去了，再过不久大家就要回到公司或者课堂了。/(ㄒoㄒ)/~~
想做一个随即匹配按钮，同学建议是做一个像波浪一样向外扩散的按钮，同学在网上找了一个效果图，看上去挺简单的，就自己做了一个，下面是效果图：

我觉得用在只需要一个大按钮的界面里面，是挺合适的。
下面就来分享一下思路与代码。

分析动画

1. 中间一个圆是不动的，里面有一个文字区域
2. 外面的扩散的圆圈透明度是变化的，从里面向外面越来越透明。
3. 最开始是只有一条波纹的，慢慢才变成了3条。

思路

1. 先画中间的不动的圆圈。
2. 绘制文字区域。
3. 绘制周围的圆圈，但是半径要慢慢变大，如果有波纹超出了区域，那么绘制到里面，形成一条新的波纹。
4. 不断重复上述过程。

代码

为了节省空间，我省去了初始化代码、onMeasure()函数的代码、还有一些很容易懂的成员变量，大家有需要可以在这里查看完整的源代码。

/**
 * Created by ICELEE on 5/1/2017.
 */

public class WaveButton extends View {

    private static final String TAG = "ICE";
    private Paint mPaint;
    private int mRadius;//里面圆圈的半径
    private int mWidth;//控件的宽度
    private int mStrokeWidth;//波浪的宽度
    private int mFillColor;//圆圈填充颜色  
    private int mCircleStrokeColor;//圆圈边缘颜色
    private int gapSize;//波浪之间的距离
    private int firstRadius;//第一个圆圈的半径
    private int numberOfCircle;//显示波浪的数量
    private int mLineColor;//波浪线的颜色
    private boolean isFirstTime = true;//是否是第一次开启动画
    private OnClickListener mClickListener;//点击事件监听器
    private float mDownX,mDownY;//手指按下的坐标

    //省略了前面两个少参数的构造函数 源码里面是用前面两个调用这个
    public WaveButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context){
        //省略了各个成员变量的初始化过程
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //省略了测量的代码  在源码里面有简单的测量
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(mWidth/2,mWidth/2);//平移

        //画中间的圆
        mPaint.setAlpha(255);
        mPaint.setColor(mFillColor);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(0,0,mRadius,mPaint);
        //画圆的边
        mPaint.setStrokeWidth(mStrokeWidth);
        mPaint.setColor(mCircleStrokeColor);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(0,0,mRadius,mPaint);
        //画文字
        Rect rect = new Rect();//文字的区域
        mTextPaint.getTextBounds(mText,0,mText.length(),rect);
        int height = rect.height();
        int width = rect.width();
        canvas.drawText(mText,-width/2,height/2,mTextPaint);

        //画周围的波浪
        firstRadius += 3;//每次刷新半径增加3像素
        firstRadius %= (mWidth/2);//控制在控件的范围中
        if(firstRadius<mRadius) isFirstTime =false;
        firstRadius = checkRadius(firstRadius);//检查半径的范围
        mPaint.setColor(mLineColor);
        mPaint.setStyle(Paint.Style.STROKE);

        //画波浪
        for (int i = 0; i < numberOfCircle; i++) {
            int radius = (firstRadius + i*gapSize ) % (mWidth/2);
            if(isFirstTime && radius>firstRadius) continue;
            radius = checkRadius(radius);//检查半径的范围
            //用半径来计算透明度  半径越大  越透明
            double x = (mWidth/2 -radius)*1.0 /(mWidth/2 - mRadius);
            mPaint.setAlpha((int) (255*x));
            canvas.drawCircle(0,0,radius,mPaint);
        }

    }

    //检查波浪的半径  如果小于圆圈，那么加上圆圈的半径
    private int checkRadius(int radius) {
        if(radius<mRadius){
            return radius+mRadius + gapSize;
        }
        return radius;
    }

    //dp转像素
    public int dip2px(float dpValue) {
        final float scale = mContext.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    //不断重绘  展示出波浪效果
    public void startAnimation(){
        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                postInvalidate();
            }
        },0,50);

    }

    @Override
    public void setOnClickListener(OnClickListener l) {
        mClickListener = l;
    }

    //设置只有点击圆圈才有点击效果 点击波浪不能触发点击效果
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){

            case MotionEvent.ACTION_DOWN:
                mDownX = event.getX();
                mDownY = event.getY();
                return checkIsInCircle((int)mDownX,(int)mDownY);

            case MotionEvent.ACTION_UP:
                int upX = (int) event.getX(),upY = (int) event.getY();
                if(checkIsInCircle(upX,upY) && mClickListener!=null){
                    mClickListener.onClick(this);//触发点击事件
                }
                break;

        }
        return true;
    }

    /**
     * 检查点x,y是否落在圆圈内
     * @param x
     * @param y
     * @return
     */
    private boolean checkIsInCircle(int x, int y){

        int centerX = (getRight() + getLeft())/2;
        int centerY = (getTop() + getBottom())/2;
        return  Math.pow(x-centerX,2)+Math.pow(y-centerY,2) < Math.pow(mRadius,2);
    }
}

懂了思路其实挺容易就能写出这个，主要是如何让波浪动起来。这里再画个图解释解释：

我们要把波浪的半径radius模上mWidth/2，如果模后的值小于mRadius，也就是radius超出了边界，那么我们再加上mRadius就相当于又出来了一条新的波浪。

后记

这算是一个小demo，还有很多需要完善的地方，就当做是简单记录一下代码与思路吧。