Android自定义控件-仿咻一咻特效

先上特效，我们从特效上分析实现逻辑：

按照支付宝上中间是一个图片，点击之后波纹向外扩散。
我们从自定义控件入手：
1.自定义控件中间画圆
2.半径不断增加，不断的重绘圆（此时效果应该是，一个圆不断的向外扩散）
3.重绘圆期间定时添加一个圆，同理，不断增加该圆的半径
4.重绘每个圆之前，我们不断改变画笔的透明度实现不断变浅直至透明（此时效果基本实现）
优化
按照第三个步揍，我们可以添加一个半径集合，当圆的半径超过屏幕一般，集合通过迭代器移除该半径，控制集合的长度，防止内存溢出。
代码：

package com.zkr.cn.slidinglayout;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

/**
 * @Description: ---------支付宝咻一咻
 * @author: ---------------LF
 * @date: -----------------2016/11/14 17:06
 */
public class XiuXiuView extends View {

    //自定义控件的宽高，中间图像的宽高
    private int width,height,mBitmapWidth,mBitmapHeight;
    private Bitmap btnBitmap;
    private Paint mPaint;
    //每个圆的起始半径
    private int radius;

    private long current= System.currentTimeMillis();
    private List<Integer> radiusList=new ArrayList<>();

    public static long INTERVAL_NARMAL=300;
    public static long INTERVAL_LONG=500;
    public static long INTERVAL_SHORT=120;

    private long intervalTime=INTERVAL_NARMAL;

    /**
     * 设置两波纹间隔时间（即波纹密度）
     * @param intervalTime  INTERVAL_NARMAL，INTERVAL_LONG，INTERVAL_SHORT
     */
    public void setIntervalTime(long intervalTime) {
        this.intervalTime = intervalTime;
    }

    private Handler mHandler=new Handler();
    private Runnable runnable=new Runnable() {
        @Override
        public void run() {
            invalidate();
            if(System.currentTimeMillis()-current>intervalTime){
                radiusList.add(mBitmapWidth/2);
                current=System.currentTimeMillis();
            }
            //每个圆圈半径不断增加向外扩展
            for (int i=0;i<radiusList.size();i++){
                radiusList.set(i,radiusList.get(i)+4);
            }
            //性能优化
            Iterator iterator=radiusList.iterator();
            while (iterator.hasNext()){
                Integer integer= (Integer) iterator.next();
                if(integer>=width/2){
                    iterator.remove();
                }
            }
            mHandler.postDelayed(runnable,16);
        }
    };

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

    private void init() {
        btnBitmap= BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher);
        mBitmapWidth=btnBitmap.getWidth();
        mBitmapHeight=btnBitmap.getHeight();

        radius=mBitmapWidth/2;
        radiusList.add(radius);

        mPaint=new Paint();
        mPaint.setColor(getResources().getColor(R.color.xiuxiu));
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        width=canvas.getWidth();
        height=canvas.getHeight();

        for (int i=0;i<radiusList.size();i++){
            /**
             * 定义透明度从半透明到透明不断降低，半透明：125
             * 当前圆半径/屏幕宽度一般=当前圆半径扩展的比率
             * 当前圆半径扩展的比率*125=半透明的比率值（此值是逐渐变大，即从透明到不透明）
             */
            mPaint.setAlpha(125-125*radiusList.get(i)/(width/2));
            canvas.drawCircle(width/2,height/2,radiusList.get(i),mPaint);
        }

        canvas.drawBitmap(btnBitmap,(width-mBitmapWidth)/2,(height-mBitmapHeight)/2,null);
        super.onDraw(canvas);
    }

    public void start(){
        mHandler.postDelayed(runnable,16);
    }
}

我们在XiuXiuView中添加了一个属性setIntervalTime，此属性用来设置波纹密度。Activity代码：

        xv= (XiuXiuView) findViewById(R.id.xv);
        xv.setIntervalTime(XiuXiuView.INTERVAL_NARMAL);
        xv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                xv.start();
            }
        });