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

来源：互联网发布：51单片机支持24v电源吗编辑：程序博客网时间：2024/05/02 00:52

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

这里写图片描述

按照支付宝上中间是一个图片，点击之后波纹向外扩散。
我们从自定义控件入手：
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();            }        });

0 0