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

前言

劳动节快乐！！！O(∩_∩)O
虽然现在不是一个值得庆祝的时间，因为美好的白天已经过去了，再过不久大家就要回到公司或者课堂了。/(ㄒ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(firstRadiusfirstRadius) 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

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

基本图示

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