Android ripple spread effect of imitation payment po-A-function to achieve ripple spread effects _android

This year's Spring Festival party did not see the fun, was paid to add an episode of treasure, friends are in that number of time to stop a thump, wow, I'm a professional blessing, impossible, haha. So what is the function of the performance based on how the program code is implemented? The following cloud-Habitat Community Small series to share this tutorial to help you learn the Android ripple spread effect of the imitation payment of the ripple effects of the performance of the spread of the ripples, the specific content as follows:

Let's look at this effect first.

This is my only add on the effect, to tell the truth, only now are only semi-finished products, Mesa are not on, blame their own technology can not, and too lazy
PS: This view is also my imitation of the effect of others, reference to the people's thinking to write, not pure hand, sin sin, online should also be able to find a lot of such effects, I just joined some of their own needs in the inside

Me a new project--whew

Roundimageview

This previously talked about the online particles, the head into a circle, here is not much to say, direct the code bar!

Package com.lgl.whew;
/** * Round head * Created by LGL on 2016/1/12.
* * Import Android.content.Context;
Import Android.content.res.TypedArray;
Import Android.graphics.Bitmap;
Import Android.graphics.Canvas;
Import Android.graphics.Paint;
Import Android.graphics.PorterDuff;
Import Android.graphics.PorterDuffXfermode;
Import Android.graphics.Rect;
Import android.graphics.drawable.BitmapDrawable;
Import android.graphics.drawable.Drawable;
Import android.graphics.drawable.NinePatchDrawable;
Import Android.util.AttributeSet;
Import Android.widget.ImageView;
/** * Round ImageView, you can set up to two different widths and different colors of a round border.  * * Set the color in the XML layout file, the custom attribute configuration parameter is specified */public class Roundimageview extends ImageView {private int mborderthickness = 0; private
Context Mcontext;
private int defaultcolor = 0xFFFFFFFF;
If only one of them has a value, draw only a circular border private int mborderoutsidecolor = 0;
private int mborderinsidecolor = 0;
control defaults to long, wide private int defaultwidth = 0;
private int defaultheight = 0; Public Roundimageview {Super (context);
Mcontext = context; Public Roundimageview (context, AttributeSet attrs) {Super (context, attrs); mcontext = context; Setcustomattribu
TES (ATTRS); Public Roundimageview (context, AttributeSet attrs, int defstyle) {Super (context, attrs, defstyle); mcontext = C
Ontext;
Setcustomattributes (ATTRS);
} private void Setcustomattributes (AttributeSet attrs) {TypedArray a = Mcontext.obtainstyledattributes (Attrs,
R.styleable.roundedimageview);
mborderthickness = a.getdimensionpixelsize (r.styleable.roundedimageview_border_thickness, 0);
Mborderoutsidecolor = A. GetColor (R.styleable.roundedimageview_border_outside_color, DefaultColor);
Mborderinsidecolor = A.getcolor (R.styleable.roundedimageview_border_inside_color, DefaultColor);  @Override protected void OnDraw (Canvas Canvas) {drawable drawable = getdrawable (); if (drawable = null) {return;} if (getwidth () = 0 | | getheight () = 0)
{return;}
This.measure (0, 0); if (drawable.getclass () = = Ninepatchdrawable.class) returN
Bitmap B = ((bitmapdrawable) drawable). Getbitmap ();
Bitmap Bitmap = B.copy (Bitmap.Config.ARGB_8888, true); if (DefaultWidth = = 0) {defaultwidth = GetWidth ();} if (DefaultHeight = = 0) {defaultheight = GetHeight ();} int radius
= 0; if (mborderinsidecolor!= defaultcolor && mborderoutsidecolor!= defaultcolor) {//define draw two border, outer circle border and inner circle radius = ( DefaultWidth < DefaultHeight?
Defaultwidth:defaultheight)/2-2 * mborderthickness;
Draw Inner Circle Drawcircleborder (canvas, Radius + MBORDERTHICKNESS/2, mborderinsidecolor);
Draw Outer Circle Drawcircleborder (canvas, radius + mborderthickness + MBORDERTHICKNESS/2, mborderoutsidecolor); else if (mborderinsidecolor!= defaultcolor && mborderoutsidecolor = = DefaultColor) {//define draw a border radius = (defaul Twidth < DefaultHeight?
defaultwidth:defaultheight)/2-mborderthickness;
Drawcircleborder (canvas, Radius + MBORDERTHICKNESS/2, mborderinsidecolor); else if (Mborderinsidecolor = DefaultColor && mborderoutsidecolor!=DefaultColor) {//definition draw a border radius = (DefaultWidth < defaultheight? defaultwidth:defaultheight)/2-mborderthickness
;
Drawcircleborder (canvas, Radius + MBORDERTHICKNESS/2, mborderoutsidecolor);
else {//no border radius = (DefaultWidth < DefaultHeight defaultwidth:defaultheight)/2;}
Bitmap Roundbitmap = Getcroppedroundbitmap (Bitmap, RADIUS);
Canvas.drawbitmap (Roundbitmap, DEFAULTWIDTH/2-radius, DEFAULTHEIGHT/2-radius, NULL); /** * Get cropped circular picture/public Bitmap Getcroppedroundbitmap (Bitmap bmp, int radius) {Bitmap scaledsrcbmp; int diameter = RA
Dius * 2;
In order to prevent the wide-height inequality, resulting in a circular picture deformation, so the intercept rectangle in the middle position of the largest square picture int bmpwidth = Bmp.getwidth ();
int bmpheight = Bmp.getheight ();
int squarewidth = 0, squareheight = 0;
int x = 0, y = 0;
Bitmap Squarebitmap; if (Bmpheight > Bmpwidth) {//tall to wide squarewidth = Squareheight = bmpwidth; x = 0; y = (bmpheight-bmpwidth)/2;//Intercept positive
Square Picture Squarebitmap = Bitmap.createbitmap (bmp, X, Y, Squarewidth, squareheight); else if (Bmpheight < BMPWidth) {//wider than high squarewidth = Squareheight = bmpheight; x = (bmpwidth-bmpheight)/2; y = 0; squarebitmap = Bitmap.crea
Tebitmap (BMP, X, Y, Squarewidth, squareheight); else {squarebitmap = bmp;} if (Squarebitmap.getwidth ()!= diameter | | squarebitmap.getheight ()!= diameter) {scaledSr
Cbmp = Bitmap.createscaledbitmap (squarebitmap, diameter, diameter, true);
else {scaledsrcbmp = Squarebitmap;}
Bitmap output = Bitmap.createbitmap (Scaledsrcbmp.getwidth (), Scaledsrcbmp.getheight (), Bitmap.Config.ARGB_8888);
Canvas Canvas = new Canvas (output);
Paint Paint = new Paint ();
Rect Rect = new Rect (0, 0, scaledsrcbmp.getwidth (), Scaledsrcbmp.getheight ());
Paint.setantialias (TRUE);
Paint.setfilterbitmap (TRUE);
Paint.setdither (TRUE);
Canvas.drawargb (0, 0, 0, 0);
Canvas.drawcircle (Scaledsrcbmp.getwidth ()/2, Scaledsrcbmp.getheight ()/2, Scaledsrcbmp.getwidth ()/2, paint);
Paint.setxfermode (New Porterduffxfermode (PorterDuff.Mode.SRC_IN)); Canvas.drawbitmap (scaledsrcbmp, rect, rect, paint);
BMP = NULL;
Squarebitmap = null;
Scaledsrcbmp = null;
return output; 
/** * Edge Draw Circle/private void Drawcircleborder (Canvas Canvas, int radius, int color) {Paint Paint = new Paint ();//* antialiasing//
Paint.setantialias (TRUE);
Paint.setfilterbitmap (TRUE);
Paint.setdither (TRUE);
Paint.setcolor (color);
/* Set paint style for STROKE: Hollow */Paint.setstyle (Paint.Style.STROKE);
/* Set the frame width of paint/paint.setstrokewidth (mborderthickness);
Canvas.drawcircle (DEFAULTWIDTH/2, DEFAULTHEIGHT/2, radius, paint); }
}

It is worth noting here that to use this must customize some attributes, we create a new attr.xml under the values

<?xml version= "1.0" encoding= "Utf-8"?>
<resources>
<declare-styleable name= " Roundedimageview ">
<attr name=" border_thickness format= "Dimension"/> <attr name=
"Border_ Inside_color "format=" color "/> <attr name=" Border_outside_color "format="
Color "></attr>
</declare-styleable>
</resources>

Then introduce namespaces into the XML file

Xmlns:imagecontrol=http://schemas.android.com/apk/res-auto

Let's just watch Layout_mian.xml.

Layout_mian.xml

Just a few layouts.

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
xmlns:imagecontrol=" Http://schemas.android.com/apk/res-auto "
android:layout_width=" Match_ Parent "
android:layout_height=" match_parent "
android:orientation=" vertical ">
<relativelayout
android:layout_width= "match_parent"
android:layout_height= "wrap_content" >
< Com.lgl.whew.WhewView
android:id= "@+id/wv"
android:layout_width= "match_parent"
android:layout_ height= "Match_parent"/>
<com.lgl.whew.roundimageview
android:id= "@+id/my_photo"
android: Layout_width= "100DP"
android:layout_height= "100DP"
android:layout_centerinparent= "true"
Android : src= "@drawable/myphoto"
imagecontrol:border_inside_color= "#bc0978"
Imagecontrol:border_outside_ Color= "#ba3456"
imagecontrol:border_thickness= "1DP"/>
</RelativeLayout>
</ Linearlayout>

So you can use the circular picture, and we'll see the ripple drawing.

Whewview

Package com.lgl.whew;
Import java.util.ArrayList;
Import java.util.List;
Import Android.content.Context;
Import Android.graphics.Canvas;
Import Android.graphics.Color;
Import Android.graphics.Paint;
Import Android.util.AttributeSet;
Import Android.view.View;  /** * Imitate a thump * * * @author LGL * */public class Whewview extends View {private Paint Paint; private int maxwidth = 255;//
Whether to run private Boolean isstarting = false;
Private list<string> alphalist = new arraylist<string> ();
Private list<string> startwidthlist = new arraylist<string> (); Public Whewview (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);//TODO Auto
-generated constructor stub init (); Public Whewview (context, AttributeSet attrs) {Super (context, attrs);//TODO auto-generated constructor stub in
It ();  } public Whewview {super (context);//TODO auto-generated constructor stub init ();} private void Init () {paint = new paint ();
Set the color of the blog Paint.setcolor (0X0059CCF5);
Alphalist.add ("255"); the opacity Startwidthlist.add ("0") of the center; @Override public void OnDraw (Canvas Canvas) {Super.ondraw (Canvas); SetBackgroundColor (color.transparent);//color: Fully transparent/ /Draw concentric for (int i = 0; i < alphalist.size (); i++) {int alpha = Integer.parseint (Alphalist.get (i));//circle radius int Star
Twidth = Integer.parseint (Startwidthlist.get (i));
Paint.setalpha (Alpha);
This radius determines how much of the diffusion area you want Canvas.drawcircle (GetWidth ()/2, GetHeight ()/2, Startwidth +, paint); 
Concentric Circle Diffusion if (isstarting && Alpha > 0 && startwidth < maxwidth) {Alphalist.set (I, (alpha-1) + "");
Startwidthlist.set (i, (startwidth + 1) + "");} if (isstarting && Integer. parseint (Startwidthlist.get (Startwidthlist.size ()-1)) = = MAXWIDTH/5) {alphalist.ad
D ("255");
Startwidthlist.add ("0"); The number of concentric circles is up to 10, and the outermost circle if (isstarting && startwidthlist.size () = = 0) is deleted; Alphalist.remov
E (0);
//Refresh interface invalidate (); }//Execute animation public void Start () {isstarting = true;}/Stop animation public void Stop () {isstarting = false;}//Judge is not executing public boolean I Sstarting () {return isstarting;}}

Here we see that there are a few ways outside, a start animation, a stop animation, a detection is running

Mainactivity

Here is our demand, I decompile the Alipay apk, and did not find his swish sound, just under his raw directory to find a random, we now need such a demand
Click the picture to perform an animation and ring every five minutes
Click the picture again, stop the animation, stop the sound
Let's start with a new raw folder and copy the sound.

Package com.lgl.whew;
Import android.app.Activity;
Import Android.media.AudioManager;
Import Android.media.SoundPool;
Import Android.os.Bundle;
Import Android.os.Handler;
Import Android.view.View;
Import Android.view.View.OnClickListener; public class Mainactivity extends activity {private Whewview WV; private Roundimageview My_photo; private static final
t Nou = 1;
Declare a soundpool private Soundpool sp;
Define an integer with load (); To set SUONDIDF private int music; Private Handler Handler = new Handler () {public void Handlemessage (Android.os.Message msg) {if (Msg.what = = Nou) {//every
10s rings once handler.sendemptymessagedelayed (Nou, 5000);
Sp.play (music, 1, 1, 0, 0, 1);
}
}
}; @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (
R.layout.activity_main);
Initview (); private void Initview () {///The first parameter is the maximum number of simultaneous playback streams, the second data stream type, and the third is the sound quality SP = new Soundpool (5, Audiomanager.stream_system); /Put your sound material into the Res/raw, the 2nd parameter is the resource file, and the 3rd is the music priority musical = Sp.loAD (This, r.raw.hongbao_gq, 1);
WV = (Whewview) Findviewbyid (R.ID.WV);
My_photo = (Roundimageview) Findviewbyid (R.id.my_photo); My_photo.setonclicklistener (New Onclicklistener () {@Override public void OnClick (View v) {if (wv.isstarting ()) {//
If the animation is running, stop, or continue to execute wv.stop ();
End Process Handler.removemessages (Nou);
}else{//Execute animation wv.start (); Handler.sendemptymessage (Nou);}
}); }
}

Believe that the logic here is not difficult, right, we end the activity is also to destroy the process, otherwise ... You know

@Override
protected void OnDestroy () {
//TODO auto-generated method Stub
Super.ondestroy ();
Handler.removemessages (Nou);
}

We run, want to listen to the effect can download demo run a bit, we do a simple demo here