天天看点

Android自定义view水波纹效果案例

想必做安卓的小伙伴都知道,在一个项目中或多或少的会使用到自定义view,因为原生框架始终满足不了UI-UE的需求,入不了他们的法眼。下面简单写一个自定义view。以水波纹效果为例

需求是写一个水波纹的效果,类似于pc上的点击效果。

需求分析:点击效果剖析:圆(实心、空心都可)+透明度越来越低+半径越来越大

理清需求以后就很好实现了,下面上代码:

/**
 * 半径越来越大--圆环锯齿等于半径的1/3----透明度越来越低
 * Created by Administrator on 2017/12/25.
 */
public class WaterView extends View{

    private Paint paint;
    private float x = 0;
    private float y = 0;
    private float radio=30;
    private float stroke=20;
    private int alpha=255;
    public WaterView(Context context) {
        super(context);
    }

    public WaterView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    private void initPaint(){
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(radio/3);
        paint.setAlpha(alpha);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (x==0 && y==0){
            return;
        }
        canvas.drawCircle(x,y,radio,paint);//参数:坐标+半径
    }

    Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            initPaint();
            alpha=alpha-20;//透明度降低
            radio=radio+10;//半径增大
            if (alpha <= 20){
                alpha=0;
                paint.setAlpha(alpha);
            }else {
                sendEmptyMessageDelayed(0,40);
            }
            invalidate();//强制重绘
        }
    };

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                radio=30;
                stroke=20;
                alpha=255;
                x = event.getX();
                y = event.getY();
                //利用handler机制,设置画笔属性,在很短的时间内重新绘制,达到波纹效果
                handler.sendEmptyMessage(0);
                break;
        }
        return true;
    }
}
           

XML中直接引用即可

<com.example.administrator.mycustomview.MyView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
           

水波纹持续放大

另外一些背景的点击效果也可以使用这种自定义,像cardview等一些做的比较好的控件都自带了点击的水波纹效果。代码逻辑很清晰。

源码地址,以modul导入即可

继续阅读