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 stubshowLinearMenus（）; }}）;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 stubMainActivity.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度变成叉号，通过如下的动画：

<?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="200" android:fromDegrees="0.0" android:toDegrees="225.0" android:pivotX="50.0%" android:pivotY="50.0%" android:fillAfter="true" android:fillEnabled="true"/>

再次点击则向左旋转还原，将上面的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 stubMarginLayoutParams 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 stubMarginLayoutParams 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中实现伸缩弹力分布菜单效果的实现过程，