android 自定义水波纹点击效果Button

welcome

效果

;

技术基础思路

自定义 Button
自定义 Drawable

项目源码

点击查看详情

自定义button

其实这只是一些说法
自定义button，我们只需要将子类继承 button

public class AnimationButton extends Button { public AnimationButton(Context context) {super(context);initFunction(context, null, 0);}public AnimationButton(Context context, AttributeSet attrs) {super(context, attrs);initFunction(context, attrs, 0);}public AnimationButton(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initFunction(context, attrs, defStyleAttr);}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);} //初始化操作方法private void initFunction(Context context, AttributeSet attrs, int defStyleAttr) { //获取自定义属性if (attrs != null) {TypedArray typedArray =context.obtainStyledAttributes(attrs,R.styleable.AnimationButton);         }} @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);}//验证 drawable@Overrideprotected boolean verifyDrawable(Drawable who) {return who == mDrawable || super.verifyDrawable(who);} //触摸事件@Overridepublic boolean onTouchEvent(MotionEvent event) {return super.onTouchEvent(event);}
}

上述只是开发一个自定义View常用的思路

自定义 drawable


public class AnimationButtonDrawable extends Drawable {//默认 透明度private int mAlpha = 255;//默认画笔private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//默认颜色private int mColor = 0;//绘制的区域private int mWidth, mHeight;//波纹圆形的 圆心与半径private float mCirculX, mCirculY, mCirculRadus;private Handler mHandler = new Handler(Looper.getMainLooper());private int mBackGroundNormalColor = Color.parseColor("#ffffff");//背景颜色private int mBackGroundColor = mBackGroundNormalColor;//背景矩形private RectF mBackGroundRect;private float rx, ry;//点击圆形颜色private int mAnimationCircleColor = Color.BLUE;//点击 按钮 down 颜色private int mBackGroundDownColor = Color.GRAY;public AnimationButtonDrawable() {//设置抗锯齿this.mPaint.setAntiAlias(true);//设置防抖动this.mPaint.setDither(true);}//绘制功能@Overridepublic void draw(Canvas canvas) {}@Overridepublic int getAlpha() {return mAlpha;}//设置透明度@Overridepublic void setAlpha(int alpha) {//设置 drawable的透明度mAlpha = alpha;onColorOrAlphaChange();}//设置颜色滤镜@Overridepublic void setColorFilter(ColorFilter colorFilter) {if (mPaint.getColorFilter() != colorFilter) {mPaint.setColorFilter(colorFilter);}}//确认drawable是否有透明度@Overridepublic int getOpacity() {int alpha = mPaint.getAlpha();if (alpha == 255) {//不透明return PixelFormat.OPAQUE;} else if (alpha == 0) {//全透明return PixelFormat.TRANSPARENT;} else {//半透明return PixelFormat.TRANSLUCENT;}}public void onColorOrAlphaChange() {mPaint.setColor(mColor);//获取画笔透明度if (mAlpha != 255) {int paintAlpha = mPaint.getAlpha();int realAppha = (int) (paintAlpha * (mAlpha / 255f));mPaint.setAlpha(realAppha);}}
}

在这里，我们定义实现了一个基本的drawble AnimationButtonDrawable
一个button ，要初始化使用的变量有
有正常显示的背景颜色，
有按下的背景颜色，
当点击抬起时，绘制波纹的颜色，
绘制波纹的位置与半径
最重要的步骤是在draw方法中
通过方法
canvas.drawRoundRect(mBackGroundRect, rx, ry, mPaint);
来绘制圆角矩形背景

通过方法
canvas.drawCircle(mCirculX, mCirculY, mCirculRadus, mPaint);
来绘制点击后抬起的圆角矩形

通过设置模式来解决边框圆角被覆盖问题
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));

完整的draw方法

//绘制功能
@Override
public void draw(Canvas canvas) { //绘制区域int canvasWidth = canvas.getWidth();int canvasHeight = canvas.getHeight();//新建图层int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG);mPaint.setColor(mBackGroundColor);//绘制背景 圆角矩形if (mBackGroundRect != null) {  canvas.drawRoundRect(mBackGroundRect, rx, ry, mPaint);}//设置图层重叠模式mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));mPaint.setColor(mAnimationCircleColor);//绘制圆形波纹canvas.drawCircle(mCirculX, mCirculY, mCirculRadus, mPaint);//最后将画笔去除XfermodemPaint.setXfermode(null);canvas.restoreToCount(layerId);
}

button 与 drawable结合

在button中，当button创建的时候，我们创建drawable,

mDrawable = new AnimationButtonDrawable();

然后在button的ondraw方法中,使用drawable的draw方法，这样就通过 canvas 画布将两者关联起来了

@Override
protected void onDraw(Canvas canvas) {mDrawable.draw(canvas);super.onDraw(canvas);
}

设置点击时的button背景颜色

在button中的onTouchEvent方法，监听事件的发生，并将事件传入到drawable中


@Override
public boolean onTouchEvent(MotionEvent event) {//设置事件mDrawable.setTouchEvent(event);return super.onTouchEvent(event);
}

在drawable中的setTouchEvent方法中进行事件处理


public void setTouchEvent(MotionEvent event) {//刷新invalidateSelf();//判断点击操作switch (event.getActionMasked()) {case MotionEvent.ACTION_DOWN:onTouchDown(event.getX(), event.getY());break;case MotionEvent.ACTION_MOVE:onTouchMove(event.getX(), event.getY());break;case MotionEvent.ACTION_UP:onTouchUp(event.getX(), event.getY());break;case MotionEvent.ACTION_CANCEL:onTouchCancel(event.getX(), event.getY());break;}
}

在ontouchDown方法，我们更新绘制圆角矩形的颜色为按下时的颜色，并在onTouchUp方法中恢复我们正常情况下显示的背景颜色，就可以达到button点击选择器的风格

在ontouchDown方法中，我们可以开启一个异步任务，在一定的时间内不断的绘制不同半径的圆叠加在之前绘制好的矩形背景上面，就可以在视觉方面达到一种波纹效果，

在这里绘制不大小的圆形，是通过不断改变绘制半径来达到这个效果的

private Runnable mRunnable = new Runnable() {@Overridepublic void run() {invalidateSelf();if (mCirculRadus <= mWidth) {isRun = true;mCirculRadus += 18;mHandler.postDelayed(mRunnable, 2);} else {isRun = false;mCirculX = 0;mCirculY = 0;mCirculRadus = 0;}}
};

android 自定义水波纹点击效果Button相关推荐

Android自定义水波纹动画Layout
Android自定义水波纹动画Layout 源码是双11的时候就写好了,但是我觉得当天发不太好,所以推迟了几天,没想到过了双11女友就变成了前女友,桑心.唉不说了,来看看代码吧. 展示效果 Hi前辈 ...
Android 水波纹点击效果(Ripple Effect)
本文介绍的是Android5.0中其中一个炫酷的效果,点击水波纹扩散效果(Ripple Effect). 以下介绍的实现方式都是调用Android5.0的新API,并非自定义实现,所以只支持在Andr ...
android l 效果,[原]Android L中水波纹点击效果的实现
博主参加了2014 CSDN博客之星评选,帮我投一票吧. 前言前段时间android L(android 5.0)出来了,界面上做了一些改动,主要是添加了若干动画和一些新的控件,相信大家对view的 ...
Android L中水波纹点击效果的实现
博主参加了2014 CSDN博客之星评选,帮我投一票吧. 点击给我投票前言前段时间android L(android 5.0)出来了,界面上做了一些改动,主要是添加了若干动画和一些新的控件,相信大 ...
android自定义水波纹,Android自定义View——实现水波纹效果类似剩余流量球(示例代码)...
最近突然手痒就想搞个贝塞尔曲线做个水波纹效果玩玩,终于功夫不负有心人最后实现了想要的效果,一起来看下吧: 效果图镇楼一:先一步一步来分解一下实现的过程需要绘制一个正弦曲线(sin)或者余弦曲线(c ...
水波纹点击效果的实现
前段时间Android L(android 5.0)出来了,界面上做了一些改动,主要是添加了若干动画和一些新的控件,相信大家对view的点击效果-水波纹很有印象吧,点击一个view,然后一个水波纹就会 ...
android自定义水波纹,android 自定义view－水波纹进度球
android 进阶之路-自定义view-水波纹进度球如果你是老司机,一看标题就会就return吧,嘻嘻. 在我们的日常开发中自定义控件还是用的挺多的,设计师或者产品为了更好的漂亮,美观,交互都会做 ...
css 点击效果_使用CSS实现逼真的水波纹点击效果
这篇文章特别介绍如何使用CSS来完成水波纹的效果. div的层层叠叠虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往 ...
Android实现水波纹外扩效果
微信曾经推出了一个查找附近好友的功能,大致功能是这样的:屏幕上有一个按钮,长按按钮的时候,会有一圈圈水波纹的动画向外扩散,松手后,动画结束. 现在简单来实现这样的一个动画功能: 思路: 主要用到了下面 ...