Android custom component series [14]-Android5.0 button ripple effect, androidandroid5.0

Android custom component series [14]-Android5.0 button ripple effect, androidandroid5.0

Today, instructor Ren published an article about the ripple effect pressed by the button in Android5.0 to achieve the "Implementation of Water ripple click effect in Android L". Out of curiosity, I downloaded the source code and checked the effect, there is a Nexus mobile phone at hand. I checked the actual results and found that some of them are slightly different from the actual results, refer to instructor Ren's blog to implement a simple code to overwrite the View component and paste all the code. If you have any questions or better ways, please point out, thank you again for this blog.

Reprint please explain the source: http://blog.csdn.net/dawanganban

By the way, please pull the ticket here. If you think this article is helpful to you, please vote for sunshine Xiaoqiang:Click to vote

Major changes include:

1. There will be two changes when the finger is pressed. One is to generate a dark background on the button, and then a diffuse water wave.

2. There is a difference between a long press and a click. When a long press is made, the water waves slowly spread. If a click is made, it will spread quickly.

Demo effect (the animation effect is not properly recorded because no Android simulator is installed)

For the implementation process, refer to the instructor's blog and the code comments (the comments are very detailed and it is not difficult to understand)

MyButton. java

Package com. example. myreveallayout; import android. content. context; import android. graphics. canvas; import android. graphics. paint; import android. OS. systemClock; import android. util. attributeSet; import android. view. motionEvent; import android. view. view; import android. view. viewConfiguration;/*** Android 5.0 Button click effect * Description: You can replace the View with a Button, ImageButton, and other components. * @ Author sunshine little strong http://blog.csdn.net/dawanganban **/public class MyButton extends View {private static final int INVALIDATE_DURATION = 20; // interval of each refresh private static int DIFFUSE_GAP = 10; // increment private static int TAP_TIMEOUT of the diffusion radius; // determine the time for clicking and holding the private int viewWidth; // control width and height private int viewHeight; private int pointX; // control origin coordinate (upper left corner) private int pointY; private int maxRadio; // maximum radius of the diffusion private int shaderRadio; Private Paint bottomPaint; // brush private Paint colorPaint; private boolean isPushButton; // record whether the button is pressed public MyButton (Context context, AttributeSet attrs) {super (context, attrs ); initPaint (); TAP_TIMEOUT = ViewConfiguration. getLongPressTimeout ();}/*** initialize the Paint brush resource */private void initPaint () {colorPaint = new Paint (); bottomPaint = new Paint (); colorPaint. setColor (getResources (). getColor (R. color. reveal_color )); BottomPaint. setColor (getResources (). getColor (R. color. bottom_color);} @ Overrideprotected void onSizeChanged (int w, int h, int oldw, int oldh) {super. onSizeChanged (w, h, oldw, oldh); this. viewWidth = w; this. viewHeight = h;} private int eventX; private int eventY; private long downTime = 0; @ Overridepublic boolean onTouchEvent (MotionEvent event) {switch (event. getAction () {case MotionEvent. ACTION_DOWN :/ /You only need to take the time if (downTime = 0) {downTime = SystemClock. elapsedRealtime ();} eventX = (int) event. getX (); eventY = (int) event. getY (); // calculate the maximum radius of countMaxRadio (); isPushButton = true; postInvalidateDelayed (INVALIDATE_DURATION); break; case MotionEvent. ACTION_UP: case MotionEvent. ACTION_CANCEL: if (SystemClock. elapsedRealtime ()-downTime <TAP_TIMEOUT) {DIFFUSE_GAP = 30; postInvalidate () ;}else {clearData () ;}break;} return True;}/*** calculate the maximum radius at this time */private void countMaxRadio () {if (viewWidth> viewHeight) {if (eventX <viewWidth/2) {maxRadio = viewWidth-eventX;} else {maxRadio = viewWidth/2 + eventX ;}} else {if (eventY <viewHeight/2) {maxRadio = viewHeight-eventY ;} else {maxRadio = viewHeight/2 + eventY ;}}/*** clear changed data (initialization data) */private void clearData () {downTime = 0; DIFFUSE_GAP = 10; isPushButton = false; shaderRadio = 0; postInvalidate () ;}@ Overrideprotected void dispatchDraw (Canvas canvas) {super. dispatchDraw (canvas); if (! IsPushButton) return; // If the button is not pressed, return // draw the entire canvas background after the button is pressed. drawRect (pointX, pointY, pointX + viewWidth, pointY + viewHeight, bottomPaint); canvas. save (); // draw a canvas with a diffuse circular background. clipRect (pointX, pointY, pointX + viewWidth, pointY + viewHeight); canvas. drawCircle (eventX, eventY, shaderRadio, colorPaint); canvas. restore (); // until the radius is equal to the maximum radius if (shaderRadio <maxRadio) {postInvalidateDelayed (INVALIDATE_DURATION, pointX, pointY, pointX + viewWidth, pointY + viewHeight ); shaderRadio + = DIFFUSE_GAP;} else {clearData ();}}}

For full source code download, click the dancing villain in the lower right corner to download the package in group sharing.