An example of the effect of an Android scalable stretch distribution Menu _android

These two days accidentally saw a park friend blog to achieve Path2.0 in the gorgeous rotating menu, feel good, but found that the author does not deal with thread safety issues, so here I fixed, and improve the next part of the function. The purpose of this article today is to provide some solutions to the Android user experience that will help us to enhance the user experience when developing projects or products, and of course we want to play a role.

= Nonsense not to say, or the old rules, first let us look at the implementation of the picture:

= In the above illustration, I set the effect of the menu popup to a straight line type, and the final popup or summary point is in the red button below.

Its implementation is to set the animation and the use of the insertion of the animation (interpolator) to achieve elasticity. The main use of Overshootinterpolator and Anticipateovershootinterpolator, a brief introduction to these two inserts.

• Overshootinterpolator: means to forward a certain value and then back to the original position.
• Anticipateovershootinterpolator: Indicates that the last value is returned after a certain value is thrown backwards and forwards at the beginning.
• Of course, there are other inserts that briefly understand the role:
• Anticipateinterpolator: It means to start backwards and then forward.
• Bounceinterpolator: Indicates that the animation is at the end of the play.
• Overshootinterpolator: means to forward a certain value and then back to the original position.
• Cycleinterpolator: Indicates that the animation loop plays a specific number of times, and the rate changes along the sine curve.
• Decelerateinterpolator: The place where the animation starts is quick and slow.
• Linearinterpolator: Represents a constant rate change.

We can deepen our understanding of these inserts through a few examples. In the API demos, there are some examples where you can directly study the animation part of the API demos.

Let's take a look at the code in the next mainactivity, as follows:

Package com.spring.menu.activity;
Import COM.SPRING.MENU.R;
Import com.spring.menu.animation.SpringAnimation;
Import Com.spring.menu.animation.EnlargeAnimationOut;
Import Com.spring.menu.animation.ShrinkAnimationOut;
Import com.spring.menu.animation.ZoomAnimation;

Import com.spring.menu.utility.DeviceUtility;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.view.View.OnClickListener;
Import android.view.animation.Animation;
Import Android.view.animation.AnimationUtils;
Import Android.view.animation.AnticipateInterpolator;

Import Android.widget.RelativeLayout; /** * Android Scalable Stretch Distribution Menu effect * @Description: Android to achieve telescopic stretch distribution Menu effect * @File: Mainactivity.java * @Package com.spring.menu. Activity * @Author Hanyonglu * @Date 2012-10-25 pm 09:41:31 * @Version V1.0 * * public class Mainactivity extends ACT
 ivity {private Boolean aremenusshowing;
 Private ViewGroup Menuswrapper;
 Private View Imageviewplus; PriVate View shrinkrelativelayout;
 Private Relativelayout Layoutmain;
 Rotate clockwise animation private Animation animrotateclockwise;
 You try to rotate the animation private Animation animrotateanticlockwise; Private class<?>[] Intentactivity = {Secondactivity.class,threeactivity.class,fouractivity.class, SecondActiv
 Ity.class,threeactivity.class,fouractivity.class}; Private int[] Mainresources = {r.drawable.bg_main_1,r.drawable.bg_main_2, r.drawable.bg_main_3,r.drawable.bg_main_4

 , r.drawable.bg_main_1,r.drawable.bg_main_4}; /** called the activity is a.
  * * @Override public void onCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
  
  Setcontentview (r.layout.main_activity);
 Initialization of Initviews ();
  }//Initialize private void Initviews () {imageviewplus = Findviewbyid (R.id.imageview_plus);
  Menuswrapper = (viewgroup) Findviewbyid (r.id.menus_wrapper);
  Shrinkrelativelayout = Findviewbyid (R.id.relativelayout_shrink); Layoutmain = (relativelayout) fiNdviewbyid (r.id.layout_content);
  Animrotateclockwise = Animationutils.loadanimation (this,r.anim.rotate_clockwise);

  Animrotateanticlockwise = Animationutils.loadanimation (this,r.anim.rotate_anticlockwise); Shrinkrelativelayout.setonclicklistener (New Onclicklistener () {public void OnClick (View v) {//TODO Auto-generat
   Ed method Stub Showlinearmenus ();
  
  }
  }); for (int i = 0; i < Menuswrapper.getchildcount (); i++) {Menuswrapper.getchildat (i). Setonclicklistener (New SPR
  Ingmenulauncher (Null,mainresources[i]));
  
  }/** * In line expansion menu */private void Showlinearmenus () {int[] size = Deviceutility.getscreensize (this);
   if (!aremenusshowing) {springanimation.startanimations (This.menuswrapper, ZoomAnimation.Direction.SHOW, size);
  This.imageViewPlus.startAnimation (this.animrotateclockwise);
   else {springanimation.startanimations (this.menuswrapper, ZoomAnimation.Direction.HIDE, size); This.imageviewplus.sTartanimation (this.animrotateanticlockwise);
 } aremenusshowing =!aremenusshowing;
  }//Distribute menu event listener private class Springmenulauncher implements Onclicklistener {private final class<?> cls;

  private int resource;
   Private Springmenulauncher (class<?> c,int Resource) {this.cls = C;
  This.resource = resource; public void OnClick (View v) {//TODO auto-generated Method stub MainActivity.this.startSpringMenuAnimations (v)
   ;
   
Layoutmain.setbackgroundresource (Resource); MainActivity.this.startActivity (//New Intent (//Mainactivity.this,//Mainactivity.springmenulaunc
  HER.THIS.CLS)); /** * Show Menu animation effect * @param view * @param runnable/private void startspringmenuanimations (view view) {AR
  Emenusshowing = true;
  Animation shrinkOut1 = new Shrinkanimationout (300);
  Animation growout = new Enlargeanimationout (300);
  Shrinkout1.setinterpolator (New Anticipateinterpolator (2.0F)); Shrinkout1.setanimationlistEner (New Animation.animationlistener () {public void Onanimationend (Animation Animation) {//TODO auto-generated
   Method stub MainActivity.this.imageViewPlus.clearAnimation (); public void Onanimationrepeat (Animation Animation) {//TODO auto-generated method stub} public Voi
  
  D Onanimationstart (Animation Animation) {//TODO auto-generated Method stub}});
 View.startanimation (growout);

 }
}

When you click on the red button, the top menu pops up, and when you click on a menu, you change the background picture, but you can also go directly to an activity. So the intentactivity and mainresources two arrays are defined, representing the toggle activity and the image to be transformed respectively. We can set it according to the actual needs. When the red button is clicked, the middle of the plus sign rotates 225 degrees to the fork, passing the following animation:

<?xml version= "1.0" encoding= "UTF-8"?> <rotate xmlns:android=
 "http://schemas.android.com/apk/" Res/android " 
 android:interpolator=" @android: Anim/linear_interpolator "
 android:duration=
 " android:fromdegrees= "0.0"
 android:todegrees= "225.0" android:pivotx= "50.0%"
 android:pivoty= "50%"
 android:fillafter= "true"
 android:fillenabled= "true"/>

Click again to rotate left to restore, the above android:fromdegrees and Android:todegrees replaced.

Here's another important animation class is springanimation, which controls the animation effects of each menu, as shown in the following code:

Package com.spring.menu.animation;

Import Com.spring.menu.control.ImageButtonExtend;
Import Android.view.View;
Import Android.view.ViewGroup;
Import Android.view.ViewGroup.MarginLayoutParams;
Import Android.view.animation.AnticipateInterpolator;
Import Android.view.animation.AnticipateOvershootInterpolator;
Import Android.view.animation.OvershootInterpolator;

Import android.view.animation.TranslateAnimation;  /** * Distributed menu loading and scaling animation * @Description: Distributing menu loading and scaling animation * @File: Springanimation.java * @Package com.spring.menu.animation * @Author Hanyonglu * @Date 2012-10-25 pm 12:18:39 * @Version V1.0 * * public class Springanimation extends Zoomanimatio
 n {private static int[] size;
 private static int xoffset = 210;
 private static int yoffset =-15;
 
 public static final int DURATION = 300; /** * Builder * @param direction * @param duration * @param view/Public springanimation (direction direction, Lon G duration, view view) {super (direction, duration, new view[] {view});
 Springanimation.xoffset = springanimation.size[0]/2-30; /** * starts to show animation effect * @param viewgroup * @param direction * @param size/public static void Startanimations (Vi
  
  Ewgroup ViewGroup, Zoomanimation.direction Direction, int[] size) {springanimation.size = size;
   switch (direction) {case hide:startshrinkanimations (viewgroup);
  Break
   Case Show:startenlargeanimations (ViewGroup);
  Break }/** * Starts rendering menu * @param viewgroup * * * private static void Startenlargeanimations (ViewGroup viewgroup) {for ( int i = 0; I < Viewgroup.getchildcount (); i++) {if (Viewgroup.getchildat (i) instanceof imagebuttonextend) {imagebuttonextend Inoutimagebutton = (ImageButto
    NextEnd) ViewGroup. Getchildat (i);
    springanimation animation = new Springanimation (ZoomAnimation.Direction.HIDE, DURATION, Inoutimagebutton);
    Animation.setstartoffset ((I *)/( -1 + viewgroup.getchildcount ()); Animation.setinterpolator (New Overshootinterpolator (4F));
   Inoutimagebutton.startanimation (animation); }}/** * Start hiding menu * @param viewgroup * * private static void Startshrinkanimations (ViewGroup viewgroup) {fo
    R (int i = 0; i < Viewgroup.getchildcount (); i++) {if (Viewgroup.getchildat (i) instanceof Imagebuttonextend) {
    Imagebuttonextend Inoutimagebutton = (imagebuttonextend) viewgroup. Getchildat (i);
    springanimation animation = new Springanimation (ZoomAnimation.Direction.SHOW, DURATION, Inoutimagebutton); Animation.setstartoffset (( -1 + viewgroup. Getchildcount ())-i)/( -1 + viewgroup.getchildcount ())
    );
    Animation.setinterpolator (New Anticipateovershootinterpolator (2F));
   Inoutimagebutton.startanimation (animation); }} @Override protected void Addshrinkanimation (view[] views) {//TODO auto-generated a stub marginlayou
    Tparams MLP = (marginlayoutparams) views[0].
  Getlayoutparams (); Addanimation (New TrAnslateanimation (Xoffset +-mlp.leftmargin, 0f,yoffset + mlp.bottommargin, 0F)); @Override protected void addenlargeanimation (view[] views) {//TODO auto-generated a stub marginlayoutparam
    s MLP = (marginlayoutparams) views[0].
  Getlayoutparams ();
 Addanimation (New Translateanimation (0F, Xoffset +-mlp.leftmargin, 0f,yoffset + mlp.bottommargin));

 }
}

The class inherits from Zoomanimation, and the Zoomanimation code is as follows:

Package com.spring.menu.animation;

Import Android.view.View;
Import Android.view.animation.AnimationSet;

/**
 * Zoom in and zoom out animation class
 * @Description: Zoom in and Zoom out animation class

 * @File: Zoomanimation.java

 * @Package Com.spring.menu.animation *

 @Author hanyonglu

 * @Date 2012-10-25 afternoon 11:37:52

 * @Version V1.0
 * * Public
abstract class Zoomanimation extends Animationset {public
 Direction Direction;

 public enum Direction {
  HIDE, show;
 }

 Public Zoomanimation (Direction Direction, long Duration, view[] views) {
  super (true);
  This.direction = direction;
  
  Switch (this.direction) {case
  HIDE:
   addshrinkanimation (views);
   break;
  Case Show:
   addenlargeanimation (views);
   break;
  
  Setduration (duration);
 }

 protected abstract void Addshrinkanimation (view[] views);
 
 protected abstract void Addenlargeanimation (view[] views);
}

Sometimes in order to enhance the user experience, we can set the line into a semicircle or a half oval, you can use the Bresenham algorithm or other schemes to implement a semicircle or half-ellipse menu, rather than simply positioning the menu somewhere. For this, interested friends can refer to the relevant information to achieve it.

In addition, the above example does not implement a dynamic set of menu number. Personally think it is best to dynamically set the layout of the menu, so it is more convenient to add or reduce the menu. The general process is to use an array (representing the image resource) to implement its layout according to the array. Including the implementation of the semicircular expansion mentioned in the previous paragraph will also be dynamically set. Originally I want to achieve it, but really do not have so much time, the need of friends can fill the program of the Springmenulayout class, here I do not implement it.

Package com.spring.menu.layout;

/**
 * Scalable elasticity Distribution Menu Layout class
 * @Description: Scalable Elastic Distribution Menu Layout class

 * @File: Springmenulayout.java

 * @Package Com.spring.menu.layout *

 @Author hanyonglu

 * @Date 2012-10-26 afternoon 07:57:56

 * @Version V1.0
* * public class Springmenulayout {
 //automatically generate straight line layout
 
 //Arc-shaped layout automatically

The above is about the realization of the effect of flexible stretch distribution menu in Android,