Android实现控件点击波纹扩散效果

最新推荐文章于 2021-05-28 17:21:04 发布

lxn_李小牛

最新推荐文章于 2021-05-28 17:21:04 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Small_Lee/article/details/70159732

本文介绍了一种自定义Android按钮视图的方法，通过继承AppCompatImageButton并实现触摸事件及绘图逻辑，来达到视觉反馈效果。文章详细展示了如何设置触摸响应、绘制背景变化以及扩散圆效果，并解释了关键参数的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

这里写图片描述

代码

public class MyButton extends android.support.v7.widget.AppCompatImageButton {
    private static final String TAG = "MyButton";
    public static final int INVALIDATE_DURATION = 15;
//    每次扩散半径
    public static int DIFUSE_GAP = 10;
//    系统判定为长按事件的时间
    private int longPressTimeout;
    private Paint colofrPaint;
    //背景颜色
    private Paint bgPaint;
//    按下的时间
    private long downTime = 0;
    private int eventX;
    private int eventY;
    private boolean isPushButton;
//    当前半径
    private int shaderRadio;
//    最大半径
    private int maxRadio;
    private int viewwidth;
    private int viewheight;
    public MyButton(Context context) {
        this(context,null);
    }

    public MyButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
//        系统判定长按的时间
        longPressTimeout = ViewConfiguration.getLongPressTimeout();//500
        Log.d(TAG, "MyButton: "+longPressTimeout);
    }
    public void initPaint(){
        colofrPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        colofrPaint.setColor(getResources().getColor(R.color.bottom_color));
        bgPaint.setColor(getResources().getColor(R.color.reveal_color));
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if(downTime==0) {
                    downTime = SystemClock.elapsedRealtime();
                }
                eventX = (int) event.getX();
                eventY = (int) event.getY();
                countMaxRatio();
                isPushButton = true;
                Log.d(TAG, "onTouchEvent: "+maxRadio);
                postInvalidateDelayed(INVALIDATE_DURATION);
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                //判断是否是长按
                if (SystemClock.elapsedRealtime() - downTime < longPressTimeout) {
                    DIFUSE_GAP = 30;
                    postInvalidate();
                } else {
                    clearData();
                }
                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        if(!isPushButton)return;
        //绘制按下后的背景
        canvas.drawRect(0,0,viewwidth,viewheight,bgPaint);
        canvas.save();
        //绘制扩散圆背景
        canvas.clipRect(0,0,viewwidth,viewheight);
        Log.d(TAG, "dispatchDraw: "+shaderRadio);
        canvas.drawCircle(eventX,eventY,shaderRadio,colofrPaint);
        canvas.restore();
        if(shaderRadio<maxRadio) {
            postInvalidateDelayed(INVALIDATE_DURATION,0,0,viewwidth,viewheight);
            shaderRadio += DIFUSE_GAP;
        } else{
            clearData();
        }
    }
    //计算最大半径
    public void countMaxRatio(){
        if (viewwidth>viewheight) {
            if(eventX<viewwidth/2){
                maxRadio =  viewwidth - eventX;
            } else{
                maxRadio = eventX;
            }
        }else{
            if (eventY < viewheight/2){
                maxRadio = viewheight - eventY;
            }else{
                maxRadio = viewheight/2+eventY;
            }
        }
    }
    public void clearData(){
        downTime = 0;
        DIFUSE_GAP = 10;
        isPushButton = false;
        shaderRadio = 0;
        postInvalidate();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        viewwidth = w;
        viewheight = h;
    }
}