Android Custom ViewGroup To achieve a gorgeous copy of the fake pay a _android radar pulse effect

Last spring Festival when Alipay implementation of the collection of Fuwa activities really can not fire, but also to the Spring Festival Gala can be a national participation in a set of Fuwa activities, set Zie can be divided into two billion large red envelopes, but unfortunately no dedicated fu ... At the time at home there was nothing to write a swish plug, as long as a swish of the time point of the plug-in can be automatically clicked on the click of a thump to the red envelopes, just pure practice this part of the technical code is not public, follow-up plan to write a piece on the plug-in this article, pull away (*^__^*) ... We know there's a radar-spread animation effect in Alipay's swish page, the feeling of animation was very good, so secretly tried to achieve a similar effect, and later found in the GitHub of the Great God also wrote a similar effect, so read the code of Great God found that our core ideas are the same, but the details are different, Then I choose the good person and from it, the two code to integrate a bit ... The effect after consolidation is as follows:

Start to explain the implementation before we first analyze the pay treasure of the swish effect, after entering the pay Bao Xiu a screen click on a swish button, the first appearance of a circle in the continuous amplification operation, the circle to enlarge the operation of the same time its transparency is also from large to small to change, Then the circle does not disappear before the new circle will also be the same animation operation ... By observing we find that these circles are followed by a fixed time interval in order to perform magnification and transparency gradient animation operation, so to achieve the same effect, first of all have a viewgroup, and then give this viewgroup add a fixed number of child view, Finally, this effect can be achieved by having these child view zoom and transparency gradient animations. Clear the outline of the process, to achieve a good run.

Define our ViewGroup first, because the viewgroup simply adds a fixed number of child view and then lets the child view perform a series of animations, so you can inherit framelayout directly, as shown in the following code:

public class Radarlayout extends Framelayout {public 
radarlayout (context) { 
super (context); 
} 
Public Radarlayout (context, AttributeSet attrs) { 
Super (context, attrs); 
} 
Public Radarlayout (context, AttributeSet attrs, int defstyleattr) { 
Super (context, attrs, defstyleattr); 
} 
}

We're going to get our own swish. The effect control is named Radarlayout,radar as radar, radarlayout means to scan continuously. Through the previous analysis we know that Radarlayout is made up of a fixed number of child view, so the radarlayout needs to have attributes that represent the number of child view and the property can be accessed and modified by the outside, because the execution animation of the child view is both a scaling and a transparency gradient. So radarlayout need to use animation set to assemble each animation, because the animation execution time need to know the execution times so radarlayout need to have the property that represents the execution time and the property can be accessed by the outside to modify, because Radarlayout animation effect is a child view to execute, The screen is a circle, so you need to define the child view and draw it on the screen, and the painting needs to have a brush on the screens, the brush needs to have color, but also need to know where the painting, so you can define our Radarlayout definition as follows:

public class Radarlayout extends Framelayout {public static final int INFINITE = 0; 
private static final int default_count = 4; 
private static final int default_color = COLOR.RGB (0, 116, 193); 
private static final int default_duration = 7000; 
private static final int default_repeat = INFINITE; 
private static final int default_stroke_width = 2; 
private int mcount; 
private int mduration; 
private int mrepeat; 
Private Animatorset Manimatorset; 
Private Paint Mpaint; 
private int mcolor; 
private float Mradius; 
private float Mcenterx; 
private float mcentery; 
private int mstrokewidth; 
Private Boolean misstarted; 
Private Boolean musering; 
Public Radarlayout {Super (context); 
Initglobalparams (); 
Public Radarlayout (context, AttributeSet attrs) {Super (context, attrs); 
Initglobalparams (); 
Public Radarlayout (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr); 
Initglobalparams (); } private void INITglobalparams () {mcolor = Default_color; 
Mcount = Default_count; 
Mduration = default_duration; 
Mrepeat = Default_repeat; 
Musering = false; 
Mstrokewidth = dip2px (default_stroke_width); 
Build (); 
Public synchronized void Start () {if (Manimatorset = = NULL | | misstarted) {return; 
} manimatorset.start (); 
Public synchronized void Stop () {if (Manimatorset = = NULL | |!misstarted) {return; 
} manimatorset.end (); 
Public synchronized Boolean isstarted () {return (Manimatorset!= null && misstarted); 
public int GetCount () {return mcount; 
public int getduration () {return mduration;  
public void SetCount (int count) {if (count < 0) {throw new IllegalArgumentException (' count cannot be negative '); 
} if (Count!= mcount) {mcount = count; 
Reset (); 
Invalidate (); } public void setduration (int millis) {if (Millis < 0) {throw new IllegalArgumentException ("Duration cannot is 
Negative "); } if (Millis!= mduration) {mduration = mIllis; 
Reset (); 
Invalidate (); 
} public void SetColor (int color) {if (Mcolor!= color) {mcolor = color; 
Reset (); 
Invalidate (); 
} public void Setusering (Boolean usering) {if (musering!= usering) {musering = usering; 
Reset (); 
Invalidate (); @Override public void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (Widthmeasurespec, H 
EIGHTMEASURESPEC); 
int width = getmeasuredwidth ()-Getpaddingleft ()-getpaddingright (); 
int height = getmeasuredheight ()-Getpaddingtop ()-Getpaddingbottom (); 
Determine the circle point coordinate and radius Mcenterx = width * 0.5f; 
Mcentery = height * 0.5f; 
Mradius = math.min (width, height) * 0.5f; 
private void Clear () {stop (); 
Removeallviews (); 
private void Build () {layoutparams params = new Layoutparams (match_parent, match_parent); int repeatcount = (Mrepeat = = INFINITE)? 
ObjectAnimator.INFINITE:mRepeat; 
list<animator> animators = new arraylist<animator> (); for (int index = 0; index < mcount;dex++) {Radarview Radarview = new Radarview (GetContext ()); 
Radarview.setscalex (0); 
Radarview.setscaley (0); 
Radarview.setalpha (1); 
AddView (Radarview, index, params); 
Computation interval Long delay = index * MDURATION/MCOUNT; 
Property Animation Animators.add (Create (Radarview, "ScaleX", RepeatCount, Delay, 0, 1)); 
Animators.add (Create (Radarview, "ScaleY", RepeatCount, Delay, 0, 1)); 
Animators.add (Create (Radarview, "Alpha", RepeatCount, delay, 1, 0)); 
} Manimatorset = new Animatorset (); 
Manimatorset.playtogether (animators); 
Manimatorset.setinterpolator (New Linearinterpolator ()); 
Manimatorset.setduration (mduration); 
Manimatorset.addlistener (Manimatorlistener); Private Objectanimator Create (View target, String PropertyName, int repeatcount, long delay, float from, float to) {O 
Bjectanimator animator = Objectanimator.offloat (target, PropertyName, from, to); 
Animator.setrepeatcount (repeatcount); 
Animator.setrepeatmode (Objectanimator.restart); 
Animator.setstartdelay (delay); Return animaTor 
private void Reset () {Boolean isstarted = isstarted (); 
Clear (); 
Build (); 
if (isstarted) {start (); 
} private class Radarview extends View {public Radarview (context) {super); 
} @Override protected void OnDraw (Canvas Canvas) {if (null = = Mpaint) {mpaint = new Paint (); 
Mpaint.setcolor (Mcolor); 
Mpaint.setantialias (TRUE); Note the use of style, "STROKE: Draw the Ring" "FILL: Draw Round" Mpaint.setstyle (musering? 
Style.STROKE:Style.FILL); 
Mpaint.setstrokewidth (musering mstrokewidth:0); 
//Draw circle or ring canvas.drawcircle (Mcenterx, Mcentery, musering Mradius-mstrokewidth:mradius, mpaint); 
} private int dip2px (float dpvalue) {final float scale = getresources (). Getdisplaymetrics (). density; 
return (int) (Dpvalue * scale + 0.5f); Private final Animator.animatorlistener Manimatorlistener = new Animator.animatorlistener () {@Override public void O 
Nanimationstart (animator animator) {misstarted = true; @Override public void Onanimationend (animator AniMator) {misstarted = false; 
@Override public void Onanimationcancel (animator animator) {misstarted = false; 
@Override public void Onanimationrepeat (animator animator) {}}; }

Our radarlayout has been completed, the code is very simple, believe that the small partners understand, need to pay attention to the meaning of attribute musering, when the muserring is true to indicate the use of circular radar pulses, otherwise use a circular radar pulse. The second is the use of attribute animation, if you do not understand, please check, here will not be a lot of introduction. Next, write our activity_main.xml layout file, as follows:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android: paddingbottom= "@dimen/activity_vertical_margin" android:paddingleft= "@dimen/activity_horizontal_margin" Android: paddingright= "@dimen/activity_horizontal_margin" android:paddingtop= "@dimen/activity_vertical_margin" tools: context= "Com.llew.wb.MainActivity" > <view android:id= "@+id/holder" android:layout_width= "@dimen/activity_ Horizontal_margin "android:layout_height=" 10DP "android:layout_centerhorizontal=" true "/> < Com.llew.wb.RadarLayout android:id= "@+id/radarlayout1" android:layout_width= "Match_parent" android:layout_height= 
"150DP" android:layout_toleftof= "@id/holder" android:background= "#bbaacc" > </com.llew.wb.RadarLayout> <com.llew.wb.radarlayout android:id= "@+id/radarlayout2" android:layout_width= "Match_parent" Android:layout_ Height= "150DP" android:layout_torightof= "@id/holder" android:background= "#bbaacc" > </com.llew.wb.RadarLayout> <com.llew.wb.radarlayout android:id= "@+id/radarlayout3" android:layout_width= "Match_parent" Android:layout_ height= "150DP" android:layout_below= "@id/radarlayout1" android:layout_margintop= "@dimen/activity_horizontal_ 
Margin "android:layout_toleftof=" "@id/holder" android:background= "#bbaacc" > </com.llew.wb.RadarLayout> <com.llew.wb.radarlayout android:id= "@+id/radarlayout4" android:layout_width= "Match_parent" Android:layout_ height= "150DP" android:layout_below= "@id/radarlayout1" android:layout_margintop= "@dimen/activity_horizontal_ 
Margin "android:layout_torightof=" "@id/holder" android:background= "#bbaacc" > </com.llew.wb.RadarLayout> <button android:layout_width= "100DP" android:layout_height= "Wrap_content" android:layout_alignparentbottom= " True ' android:layout_centerhorizontal= ' true ' android:layout_marginbottom= ' 20DP ' Android:onclick= "Start" android:text= "Starting"/> </RelativeLayout> 

In the Activity_main.xml layout we added 4 radarlayout to compare their differences and then write our mainactivity code as follows:

public class Mainactivity extends activity { 
private radarlayout layout1; 
Private Radarlayout Layout2; 
Private Radarlayout layout3; 
Private Radarlayout Layout4; 
@Override 
protected void onCreate (Bundle savedinstancestate) { 
super.oncreate (savedinstancestate); 
Setcontentview (r.layout.activity_main); 
LAYOUT1 = (radarlayout) Findviewbyid (R.ID.RADARLAYOUT1); 
Layout2 = (radarlayout) Findviewbyid (R.ID.RADARLAYOUT2); 
Layout2.setusering (true); 
Layout2.setcount (2); 
LAYOUT3 = (radarlayout) Findviewbyid (R.ID.RADARLAYOUT3); 
Layout3.setusering (false); 
Layout3.setcolor (color.red); 
Layout4 = (radarlayout) Findviewbyid (R.ID.RADARLAYOUT4); 
Layout4.setcount (7); 
Layout4.setcolor (Color.Blue); 
Layout4.setusering (true); 
public void Start (view view) { 
layout1.start (); 
Layout2.start (); 
Layout3.start (); 
Layout4.start (); 
} 

In Mainactivity we set the LAYOUT1 as the default effect, Layout2 set the loop effect and set the number to 2; Layout3 set to use a circle and set the color of the circle to red, layout3 we set up the use of ring, Set the ring number to 7 and set the color to blue. When we click on the Start button, we open each radarlayout animation, the effect is as follows:

The operating effect looks good, basically realize the imitation payment of the performance of the radar pulse, the main principle is to take advantage of the properties of animation and the properties of the animation set up a play can be. It is to be noted that if you want to use the Nineoldandroids of the famous animated compatible Library of Jake Wharton in the low version compatible attribute animations, finally thank you for watching (*^__^*) ...

The above is a small set to introduce the Android custom ViewGroup to achieve gorgeous imitation pay Bao Xiu a radar pulse effect, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!