Android实现伸缩弹力分布菜单效果的示例

这两天无意间看到一园友的博文实现Path2.0中绚丽的的旋转菜单，感觉效果不错，但是发现作者没有处理线程安全的问题，所以在这里我修正了下，并且改善下部分功能。今天发布这篇文章的目的是希望能在Android用户体验上提出一些相关的解决方案，方便我们在开发项目或产品时增强用户体验效果，当然也希望能起到抛砖引玉的作用。

=废话不多说，还是老规矩，先让我们看一下实现的效果图：

=在上图中，我将菜单弹出的效果设置成直线型，最终的弹出或汇总点在下面的红色按钮中。

它的实现原理是设置动画的同时并利用动画中的插入器（interpolator）来实现弹力。主要用到了OvershootInterpolator和AnticipateOvershootInterpolator，简单介绍下这两个插入器。

• OvershootInterpolator：表示向前甩一定值后再回到原来位置。
• AnticipateOvershootInterpolator：表示开始的时候向后然后向前甩一定值后返回最后的值。
• 当然还有其它的插入器，简要了解下其作用：
• AnticipateInterpolator：表示开始的时候向后然后向前甩。
• BounceInterpolator：表示动画结束的时候弹起。
• OvershootInterpolator：表示向前甩一定值后再回到原来位置。
• CycleInterpolator：表示动画循环播放特定的次数，速率改变沿着正弦曲线。
• DecelerateInterpolator：表示在动画开始的地方快然后慢。
• LinearInterpolator：表示以常量速率改变。

我们可以通过一些示例加深对这几个插入器的了解。在API Demos中有些示例，大家去可以直接研究下API Demos中的Animation部分。

先来了解下MainActivity中的代码，如下所示：

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实现伸缩弹力分布菜单效果
 * @Description: Android实现伸缩弹力分布菜单效果

 * @File: MainActivity.java

 * @Package com.spring.menu.activity

 * @Author Hanyonglu

 * @Date 2012-10-25 下午09:41:31

 * @Version V1.0
 */
public class MainActivity extends Activity {
 private boolean areMenusShowing;
 private ViewGroup menusWrapper;
 private View imageViewPlus;
 private View shrinkRelativeLayout;
 private RelativeLayout layoutMain;
 // 顺时针旋转动画
 private Animation animRotateClockwise;
 // 你试着旋转动画
 private Animation animRotateAntiClockwise;
 private Class[] intentActivity = {
   SecondActivity.class,ThreeActivity.class,FourActivity.class,
   SecondActivity.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 when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main_activity);
  
  // 初始化
  initViews();
 }
 
 // 初始化
 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-generated method stub
    showLinearMenus();
   }
  });
  
  for (int i = 0; i < menusWrapper.getChildCount(); i++) {
   menusWrapper.getChildAt(i).setOnClickListener(
     new SpringMenuLauncher(null,mainResources[i]));
  }
 }

 /**
  * 以直线型展开菜单
  */
 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;
 }

 // 分布菜单事件监听器
 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.SpringMenuLauncher.this.cls));
  }
 }

 /**
  * 展现菜单动画效果
  * @param view
  * @param runnable
  */
 private void startSpringMenuAnimations(View view) {
  areMenusShowing = 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 void onAnimationStart(Animation animation) {
    // TODO Auto-generated method stub
    
   }
  });
  
  view.startAnimation(growOut);
 }
}

在点击红色按钮时弹出最上面的菜单，点击某个菜单时变换上面的背景图片，当然也可直接进入某个Activity。所以上面定义了intentActivity和mainResources两个数组，分别代表切换的Activity和要变换的图片。大家可根据实际的需要进行设置。在进行点击红色按钮时中间的加号向右进行旋转225度变成叉号，通过如下的动画：

再次点击则向左旋转还原，将上面的android:fromDegrees和android:toDegrees替换下即可。

下面了解下另一个重要的动画类是SpringAnimation，由它来控制各个菜单的动画效果，代码如下所示：

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;

/**
 * 分布菜单加载和伸缩动画
 * @Description: 分布菜单加载和伸缩动画

 * @File: SpringAnimation.java

 * @Package com.spring.menu.animation

 * @Author Hanyonglu

 * @Date 2012-10-25 下午12:18:39

 * @Version V1.0
 */
public class SpringAnimation extends ZoomAnimation {
 private static int[] size;
 private static int xOffset = 210;
 private static int yOffset = -15;
 public static final int DURATION = 300;
 
 /**
  * 构造器
  * @param direction
  * @param duration
  * @param view
  */
 public SpringAnimation(Direction direction, long duration, View view) {
  super(direction, duration, new View[] { view });
  SpringAnimation.xOffset = SpringAnimation.size[0] / 2 - 30;
 }

 /**
  * 开始显示动画效果
  * @param viewgroup
  * @param direction
  * @param size
  */
 public static void startAnimations(ViewGroup viewgroup,
   ZoomAnimation.Direction direction, int[] size) {
  SpringAnimation.size = size;
  
  switch (direction) {
  case HIDE:
   startShrinkAnimations(viewgroup);
   break;
  case SHOW:
   startEnlargeAnimations(viewgroup);
   break;
  }
 }

 /**
  * 开始呈现菜单
  * @param viewgroup
  */
 private static void startEnlargeAnimations(ViewGroup viewgroup) {
  for (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.HIDE, DURATION, inoutimagebutton);
    animation.setStartOffset((i * 200)
      / (-1 + viewgroup.getChildCount()));
    animation.setInterpolator(new OvershootInterpolator(4F));
    inoutimagebutton.startAnimation(animation);
   }
  }
 }

 /**
  * 开始隐藏菜单
  * @param viewgroup
  */
 private static void startShrinkAnimations(ViewGroup viewgroup) {
  for (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((100 * ((-1 + viewgroup
      .getChildCount()) - i))
      / (-1 + viewgroup.getChildCount()));
    animation.setInterpolator(new AnticipateOvershootInterpolator(2F));
    inoutimagebutton.startAnimation(animation);
   }
  }
 }

 @Override
 protected void addShrinkAnimation(View[] views) {
  // TODO Auto-generated method stub
  MarginLayoutParams 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 method stub
  MarginLayoutParams mlp = (MarginLayoutParams) views[0].
    getLayoutParams();
  addAnimation(new TranslateAnimation(
    0F, xOffset + -mlp.leftMargin, 
    0F,yOffset + mlp.bottomMargin));
 }
}

该类继承自ZoomAnimation，关于ZoomAnimation代码如下：

package com.spring.menu.animation;

import android.view.View;
import android.view.animation.AnimationSet;

/**
 * 放大缩小动画类
 * @Description: 放大缩小动画类

 * @File: ZoomAnimation.java

 * @Package com.spring.menu.animation

 * @Author Hanyonglu

 * @Date 2012-10-25 下午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);
}

有时我们为了增强用户体验，我们可以将直线设置成半圆形或是半椭圆形，可以利用Bresenham算法或是其它的方案实现半圆或半椭圆的菜单，而不是简单的将菜单定位在某个地方。关于这个，有兴趣的朋友可参阅相关资料去实现它。

 另外，上面的例子并没有实现动态的设置菜单的个数。个人觉得最好能动态设置菜单的布局，这样在添加或减少菜单时比较方便。一般的过程是利用一个数组(代表图片资源)，根据数组来实现它的布局。包括上段中提到的实现半圆形展开也要进行动态的设置。本来我想去实现它，但是真的没有那么多时间，有需要的朋友可以去填充程序的SpringMenuLayout类，在这里我就不去实现它了。

package com.spring.menu.layout;

/**
 * 实现伸缩弹力分布菜单布局类
 * @Description: 实现伸缩弹力分布菜单布局类

 * @File: SpringMenuLayout.java

 * @Package com.spring.menu.layout

 * @Author Hanyonglu

 * @Date 2012-10-26 下午07:57:56

 * @Version V1.0
 */
public class SpringMenuLayout {
 // 自动生成直线型布局
 
 // 自动生成圆弧型布局
}　

以上是关于Android中实现伸缩弹力分布菜单效果的实现过程，