android 5.0 水波纹 实现
1. 定义一个普通圆角背景的xml;
rounded_corners.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="4dp" />
</shape>
2.水波纹效果的xml ripple_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FF21272B">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:drawable="@drawable/rounded_corners" />
</ripple>
3 在布局xml中使用它
<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/ripple_bg" android:text="@string/hello_world" />
这个只能在5.0版本之上的手机中使用，5.0之下的只能自己绘制，听说
而大家想兼容低系统版本的话,就需要新建v21(即Android5.0)的Resource Directory.
还没做出基本的低版本解决方案来
/**************************************** 分割线 下面是低于5.0的使用方法***********************************************/
以上的水波纹特效只能5.0及以上版本使用，但是如果低于这个版本使用这么漂亮的特效的话就得自己写咯
注：水波纹核心文件不是我写的，也是我从GitHub上搬运的，作者已经不记得了。。。再次感谢作者（我自己看的话应该不会有侵权）
以下为RippleView核心View代码，我们xml布局文件就是用的这个view
RippleView.java
public class RippleView extends RelativeLayout { private int WIDTH; private int HEIGHT; private int frameRate = 10; private int rippleDuration = 400; private int rippleAlpha = 90; private Handler canvasHandler; private float radiusMax = 0; private boolean animationRunning = false; private int timer = 0; private int timerEmpty = 0; private int durationEmpty = -1; private float x = -1; private float y = -1; private int zoomDuration; private float zoomScale; private ScaleAnimation scaleAnimation; private Boolean hasToZoom; private Boolean isCentered; private Integer rippleType; private Paint paint; private Bitmap originBitmap; private int rippleColor; private int ripplePadding; private GestureDetector gestureDetector; private final Runnable runnable = new Runnable() { @Override public void run() { invalidate(); } }; private OnRippleCompleteListener onCompletionListener; public RippleView(Context context) { super(context); } public RippleView(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs); } public RippleView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(context, attrs); } /** * Method that initializes all fields and sets listeners * * @param context Context used to create this view * @param attrs Attribute used to initialize fields */ private void init(final Context context, final AttributeSet attrs) { if (isInEditMode()) return; final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RippleView); rippleColor = typedArray.getColor(R.styleable.RippleView_rv_color, getResources().getColor(R.color.rippelColor)); rippleType = typedArray.getInt(R.styleable.RippleView_rv_type, 0); hasToZoom = typedArray.getBoolean(R.styleable.RippleView_rv_zoom, false); isCentered = typedArray.getBoolean(R.styleable.RippleView_rv_centered, false); rippleDuration = typedArray.getInteger(R.styleable.RippleView_rv_rippleDuration, rippleDuration); frameRate = typedArray.getInteger(R.styleable.RippleView_rv_framerate, frameRate); rippleAlpha = typedArray.getInteger(R.styleable.RippleView_rv_alpha, rippleAlpha); ripplePadding = typedArray.getDimensionPixelSize(R.styleable.RippleView_rv_ripplePadding, 0); canvasHandler = new Handler(); zoomScale = typedArray.getFloat(R.styleable.RippleView_rv_zoomScale, 1.03f); zoomDuration = typedArray.getInt(R.styleable.RippleView_rv_zoomDuration, 200); typedArray.recycle(); paint = new Paint(); paint.setAntiAlias(true); paint.setStyle(Paint.Style.FILL); paint.setColor(rippleColor); paint.setAlpha(rippleAlpha); this.setWillNotDraw(false); gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() { @Override public void onLongPress(MotionEvent event) { super.onLongPress(event); animateRipple(event); sendClickEvent(true); } @Override public boolean onSingleTapConfirmed(MotionEvent e) { return true; } @Override public boolean onSingleTapUp(MotionEvent e) { return true; } }); this.setDrawingCacheEnabled(true); this.setClickable(true); } @Override public void draw(Canvas canvas) { super.draw(canvas); if (animationRunning) { canvas.save(); if (rippleDuration <= timer * frameRate) { animationRunning = false; timer = 0; durationEmpty = -1; timerEmpty = 0; // There is problem on Android M where canvas.restore() seems to be called automatically // For now, don't call canvas.restore() manually on Android M (API 23) if(Build.VERSION.SDK_INT != 23) { canvas.restore(); } invalidate(); if (onCompletionListener != null) onCompletionListener.onComplete(this); return; } else canvasHandler.postDelayed(runnable, frameRate); if (timer == 0) canvas.save(); canvas.drawCircle(x, y, (radiusMax * (((float) timer * frameRate) / rippleDuration)), paint); paint.setColor(Color.parseColor("#ffff4444")); if (rippleType == 1 && originBitmap != null && (((float) timer * frameRate) / rippleDuration) > 0.4f) { if (durationEmpty == -1) durationEmpty = rippleDuration - timer * frameRate; timerEmpty++; final Bitmap tmpBitmap = getCircleBitmap((int) ((radiusMax) * (((float) timerEmpty * frameRate) / (durationEmpty)))); canvas.drawBitmap(tmpBitmap, 0, 0, paint); tmpBitmap.recycle(); } paint.setColor(rippleColor); if (rippleType == 1) { if ((((float) timer * frameRate) / rippleDuration) > 0.6f) paint.setAlpha((int) (rippleAlpha - ((rippleAlpha) * (((float) timerEmpty * frameRate) / (durationEmpty))))); else paint.setAlpha(rippleAlpha); } else paint.setAlpha((int) (rippleAlpha - ((rippleAlpha) * (((float) timer * frameRate) / rippleDuration)))); timer++; } } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); WIDTH = w; HEIGHT = h; scaleAnimation = new ScaleAnimation(1.0f, zoomScale, 1.0f, zoomScale, w / 2, h / 2); scaleAnimation.setDuration(zoomDuration); scaleAnimation.setRepeatMode(Animation.REVERSE); scaleAnimation.setRepeatCount(1); } /** * Launch Ripple animation for the current view with a MotionEvent * * @param event MotionEvent registered by the Ripple gesture listener */ public void animateRipple(MotionEvent event) { createAnimation(event.getX(), event.getY()); } /** * Launch Ripple animation for the current view centered at x and y position * * @param x Horizontal position of the ripple center * @param y Vertical position of the ripple center */ public void animateRipple(final float x, final float y) { createAnimation(x, y); } /** * Create Ripple animation centered at x, y * * @param x Horizontal position of the ripple center * @param y Vertical position of the ripple center */ private void createAnimation(final float x, final float y) { if (this.isEnabled() && !animationRunning) { if (hasToZoom) this.startAnimation(scaleAnimation); radiusMax = Math.max(WIDTH, HEIGHT); if (rippleType != 2) radiusMax /= 2; radiusMax -= ripplePadding; if (isCentered || rippleType == 1) { this.x = getMeasuredWidth() / 2; this.y = getMeasuredHeight() / 2; } else { this.x = x; this.y = y; } animationRunning = true; if (rippleType == 1 && originBitmap == null) originBitmap = getDrawingCache(true); invalidate(); } } @Override public boolean onTouchEvent(MotionEvent event) { if (gestureDetector.onTouchEvent(event)) { animateRipple(event); sendClickEvent(false); } return super.onTouchEvent(event); } @Override public boolean onInterceptTouchEvent(MotionEvent event) { this.onTouchEvent(event); return super.onInterceptTouchEvent(event); } /** * Send a click event if parent view is a Listview instance * * @param isLongClick Is the event a long click ? */ private void sendClickEvent(final Boolean isLongClick) { if (getParent() instanceof AdapterView) { final AdapterView adapterView = (AdapterView) getParent(); final int position = adapterView.getPositionForView(this); final long id = adapterView.getItemIdAtPosition(position); if (isLongClick) { if (adapterView.getOnItemLongClickListener() != null) adapterView.getOnItemLongClickListener().onItemLongClick(adapterView, this, position, id); } else { if (adapterView.getOnItemClickListener() != null) adapterView.getOnItemClickListener().onItemClick(adapterView, this, position, id); } } } private Bitmap getCircleBitmap(final int radius) { final Bitmap output = Bitmap.createBitmap(originBitmap.getWidth(), originBitmap.getHeight(), Bitmap.Config.ARGB_8888); final Canvas canvas = new Canvas(output); final Paint paint = new Paint(); final Rect rect = new Rect((int)(x - radius), (int)(y - radius), (int)(x + radius), (int)(y + radius)); paint.setAntiAlias(true); canvas.drawARGB(0, 0, 0, 0); canvas.drawCircle(x, y, radius, paint); //paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(originBitmap, rect, rect, paint); return output; } /** * Set Ripple color, default is #FFFFFF * * @param rippleColor New color resource */ public void setRippleColor(int rippleColor) { this.rippleColor = getResources().getColor(rippleColor); } public int getRippleColor() { return rippleColor; } public RippleType getRippleType() { return RippleType.values()[rippleType]; } /** * Set Ripple type, default is RippleType.SIMPLE * * @param rippleType New Ripple type for next animation */ public void setRippleType(final RippleType rippleType) { this.rippleType = rippleType.ordinal(); } public Boolean isCentered() { return isCentered; } /** * Set if ripple animation has to be centered in its parent view or not, default is False * * @param isCentered */ public void setCentered(final Boolean isCentered) { this.isCentered = isCentered; } public int getRipplePadding() { return ripplePadding; } /** * Set Ripple padding if you want to avoid some graphic glitch * * @param ripplePadding New Ripple padding in pixel, default is 0px */ public void setRipplePadding(int ripplePadding) { this.ripplePadding = ripplePadding; } public Boolean isZooming() { return hasToZoom; } /** * At the end of Ripple effect, the child views has to zoom * * @param hasToZoom Do the child views have to zoom ? default is False */ public void setZooming(Boolean hasToZoom) { this.hasToZoom = hasToZoom; } public float getZoomScale() { return zoomScale; } /** * Scale of the end animation * * @param zoomScale Value of scale animation, default is 1.03f */ public void setZoomScale(float zoomScale) { this.zoomScale = zoomScale; } public int getZoomDuration() { return zoomDuration; } /** * Duration of the ending animation in ms * * @param zoomDuration Duration, default is 200ms */ public void setZoomDuration(int zoomDuration) { this.zoomDuration = zoomDuration; } public int getRippleDuration() { return rippleDuration; } /** * Duration of the Ripple animation in ms * * @param rippleDuration Duration, default is 400ms */ public void setRippleDuration(int rippleDuration) { this.rippleDuration = rippleDuration; } public int getFrameRate() { return frameRate; } /** * Set framerate for Ripple animation * * @param frameRate New framerate value, default is 10 */ public void setFrameRate(int frameRate) { this.frameRate = frameRate; } public int getRippleAlpha() { return rippleAlpha; } /** * Set alpha for ripple effect color * * @param rippleAlpha Alpha value between 0 and 255, default is 90 */ public void setRippleAlpha(int rippleAlpha) { this.rippleAlpha = rippleAlpha; } public void setOnRippleCompleteListener(OnRippleCompleteListener listener) { this.onCompletionListener = listener; } /** * Defines a callback called at the end of the Ripple effect */ public interface OnRippleCompleteListener { void onComplete(RippleView rippleView); } public enum RippleType { SIMPLE(0), DOUBLE(1), RECTANGLE(2); int type; RippleType(int type) { this.type = type; } } }
还有他所依赖的attrs.xml 文件
arrrs.xml所依赖的 colors.xml里的资源（可以根据自己需要修改）
colors.xml
<resources> <color name="rippelColor">#FFFFFF</color> </resources>
至此已经所需要的主要文件完成了，但是当时我自己测的时候遇到了问题，在eclipse会出错，有个类没找到；但是在android studio的时候这个类可以找到
就是 package android.graphics 这个包下的 PorterDuff 这个类 主要功能：主要用于图形合成时的图像过渡模式（好高大上，萌新瑟瑟发抖）
这个类在eclipse v4包不存在，我android studio用的是23的版本，里面有所以没有出错。
具体用法解释 引用 简书作者 http://www.jianshu.com/p/d11892bbe055 这篇文章，感谢作者大大~~~
然后我就没管它就把它注释了。。。（总体效果没变，不知道哪里会不一样）
