android 加号控件,android 模仿 弹性菜单

本文介绍下在Android中实现伸缩弹力分布菜单效果。关于这种菜单效果在IPhone中比较常见，效果比较酷。那么在Android中实现只是一种简单的模仿。

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

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

 

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

它的实现原理是设置动画的同时并利用动画中的插入器(interpolator)来实现弹力。主要用到了OvershootInterpolator和AnticipateOvershootInterpolator，简单介绍下这两个插入器。OvershootInterpolator：表示向前甩一定值后再回到原来位置。

AnticipateOvershootInterpolator：表示开始的时候向后然后向前甩一定值后返回最后的值。

当然还有其它的插入器，简要了解下其作用：AnticipateInterpolator：表示开始的时候向后然后向前甩。

BounceInterpolator：表示动画结束的时候弹起。

OvershootInterpolator：表示向前甩一定值后再回到原来位置。

CycleInterpolator：表示动画循环播放特定的次数，速率改变沿着正弦曲线。

DecelerateInterpolator：表示在动画开始的地方快然后慢。

LinearInterpolator：表示以常量速率改变。

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

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

packagecom.spring.menu.activity;importcom.spring.menu.R;importcom.spring.menu.animation.SpringAnimation;importcom.spring.menu.animation.EnlargeAnimationOut;importcom.spring.menu.animation.ShrinkAnimationOut;importcom.spring.menu.animation.ZoomAnimation;importcom.spring.menu.utility.DeviceUtility;importandroid.app.Activity;importandroid.os.Bundle;importandroid.view.View;importandroid.view.ViewGroup;importandroid.view.View.OnClickListener;importandroid.view.animation.Animation;importandroid.view.animation.AnimationUtils;importandroid.view.animation.AnticipateInterpolator;importandroid.widget.RelativeLayout;/*** Android实现伸缩弹力分布菜单效果 * @Description: Android实现伸缩弹力分布菜单效果 * @File: MainActivity.java * @Package com.spring.menu.activity * @Author Hanyonglu * @Date 2021年06月03日 下午09:41:31 * @Version V1.0*/public class MainActivity extendsActivity {private booleanareMenusShowing;privateViewGroup menusWrapper;privateView imageViewPlus;privateView shrinkRelativeLayout;privateRelativeLayout layoutMain;//顺时针旋转动画 privateAnimation animRotateClockwise;//你试着旋转动画 privateAnimation 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.*/@Overridepublic voidonCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState); setContentView(R.layout.main_activity);//初始化initViews(); }//初始化 private voidinitViews(){ 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(newOnClickListener() {public voidonClick(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 voidshowLinearMenus() {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 implementsOnClickListener {private final Class>cls;private intresource;private SpringMenuLauncher(Class> c,intresource) {this.cls =c;this.resource =resource; }public voidonClick(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));} }/*** 展现菜单动画效果 *@paramview *@paramrunnable*/ private voidstartSpringMenuAnimations(View view) { areMenusShowing= true; Animation shrinkOut1= new ShrinkAnimationOut(300); Animation growOut= new EnlargeAnimationOut(300); shrinkOut1.setInterpolator(new AnticipateInterpolator(2.0F)); shrinkOut1.setAnimationListener(newAnimation.AnimationListener() {public voidonAnimationEnd(Animation animation) {//TODO Auto-generated method stub MainActivity.this.imageViewPlus.clearAnimation(); }public voidonAnimationRepeat(Animation animation) {//TODO Auto-generated method stub}public voidonAnimationStart(Animation animation) {//TODO Auto-generated method stub} }); view.startAnimation(growOut); }}

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

<?xml version="1.0" encoding="UTF-8"?>

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

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

packagecom.spring.menu.animation;importcom.spring.menu.control.ImageButtonExtend;importandroid.view.View;importandroid.view.ViewGroup;importandroid.view.ViewGroup.MarginLayoutParams;importandroid.view.animation.AnticipateInterpolator;importandroid.view.animation.AnticipateOvershootInterpolator;importandroid.view.animation.OvershootInterpolator;importandroid.view.animation.TranslateAnimation;/*** 分布菜单加载和伸缩动画 * @Description: 分布菜单加载和伸缩动画 * @File: SpringAnimation.java * @Package com.spring.menu.animation * @Author Hanyonglu * @Date 2021年06月03日 下午12:18:39 * @Version V1.0*/public class SpringAnimation extendsZoomAnimation {private static int[] size;private static int xOffset = 210;private static int yOffset = -15;public static final int DURATION = 300;/*** 构造器 *@paramdirection *@paramduration *@paramview*/ public SpringAnimation(Direction direction, longduration, View view) {super(direction, duration, newView[] { view }); SpringAnimation.xOffset= SpringAnimation.size[0] / 2 - 30; }/*** 开始显示动画效果 *@paramviewgroup *@paramdirection *@paramsize*/ public static voidstartAnimations(ViewGroup viewgroup, ZoomAnimation.Direction direction,int[] size) { SpringAnimation.size=size;switch(direction) {caseHIDE: startShrinkAnimations(viewgroup);break;caseSHOW: startEnlargeAnimations(viewgroup);break; } }/*** 开始呈现菜单 *@paramviewgroup*/ private static voidstartEnlargeAnimations(ViewGroup viewgroup) {for (int i = 0; i < viewgroup.getChildCount(); i++) {if (viewgroup.getChildAt(i) instanceofImageButtonExtend) { ImageButtonExtend inoutimagebutton=(ImageButtonExtend) viewgroup .getChildAt(i); SpringAnimation animation= newSpringAnimation( ZoomAnimation.Direction.HIDE, DURATION, inoutimagebutton); animation.setStartOffset((i* 200)/ (-1 +viewgroup.getChildCount())); animation.setInterpolator(newOvershootInterpolator(4F)); inoutimagebutton.startAnimation(animation); } } }/*** 开始隐藏菜单 *@paramviewgroup*/ private static voidstartShrinkAnimations(ViewGroup viewgroup) {for (int i = 0; i < viewgroup.getChildCount(); i++) {if (viewgroup.getChildAt(i) instanceofImageButtonExtend) { ImageButtonExtend inoutimagebutton=(ImageButtonExtend) viewgroup .getChildAt(i); SpringAnimation animation= newSpringAnimation( ZoomAnimation.Direction.SHOW, DURATION, inoutimagebutton); animation.setStartOffset((100 * ((-1 +viewgroup .getChildCount())-i))/ (-1 +viewgroup.getChildCount())); animation.setInterpolator(newAnticipateOvershootInterpolator(2F)); inoutimagebutton.startAnimation(animation); } } } @Overrideprotected voidaddShrinkAnimation(View[] views) {//TODO Auto-generated method stub MarginLayoutParams mlp = (MarginLayoutParams) views[0]. getLayoutParams(); addAnimation(newTranslateAnimation( xOffset+ -mlp.leftMargin, 0F,yOffset+mlp.bottomMargin, 0F)); } @Overrideprotected voidaddEnlargeAnimation(View[] views) {//TODO Auto-generated method stub MarginLayoutParams mlp = (MarginLayoutParams) views[0]. getLayoutParams(); addAnimation(newTranslateAnimation( 0F, xOffset+ -mlp.leftMargin, 0F,yOffset+mlp.bottomMargin)); }}

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

packagecom.spring.menu.animation;importandroid.view.View;importandroid.view.animation.AnimationSet;/*** 放大缩小动画类 * @Description: 放大缩小动画类 * @File: ZoomAnimation.java * @Package com.spring.menu.animation * @Author Hanyonglu * @Date 2021年06月03日 下午11:37:52 * @Version V1.0*/public abstract class ZoomAnimation extendsAnimationSet {publicDirection direction;public enumDirection { HIDE, SHOW; }public ZoomAnimation(Direction direction, longduration, View[] views) {super(true);this.direction =direction;switch (this.direction) {caseHIDE: addShrinkAnimation(views);break;caseSHOW: addEnlargeAnimation(views);break; } setDuration(duration); }protected abstract voidaddShrinkAnimation(View[] views);protected abstract voidaddEnlargeAnimation(View[] views);}

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

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

packagecom.spring.menu.layout;/*** 实现伸缩弹力分布菜单布局类 * @Description: 实现伸缩弹力分布菜单布局类 * @File: SpringMenuLayout.java * @Package com.spring.menu.layout * @Author Hanyonglu * @Date 2021年06月03日 下午07:57:56 * @Version V1.0*/public classSpringMenuLayout {//自动生成直线型布局//自动生成圆弧型布局}

以上是关于Android中实现伸缩弹力分布菜单效果的实现过程，由于本篇不算是原创性的文章，所以关于代码没有过多的讲解，具体的代码讲解可参考原创文章：http://www.cnblogs.com/mudoot/archive/2021年06月03日/path_composer_menu.html，同时也非常感谢原创作者提供的资料。