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();
            }
        });