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

标签: android 弹力 分布 | 发表时间:2012-10-26 20:55 | 作者:HarHar
出处:http://www.cnblogs.com/hanyonglu/

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

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

 

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

     

 

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

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

  • OvershootInterpolator:表示向前甩一定值后再回到原来位置。
  • AnticipateOvershootInterpolator:表示开始的时候向后然后向前甩一定值后返回最后的值。

  当然还有其它的插入器,简要了解下其作用:

  • AnticipateInterpolator:表示开始的时候向后然后向前甩。
  • BounceInterpolator:表示动画结束的时候弹起。
  • OvershootInterpolator:表示向前甩一定值后再回到原来位置。
  • CycleInterpolator:表示动画循环播放特定的次数,速率改变沿着正弦曲线。
  • DecelerateInterpolator:表示在动画开始的地方快然后慢。
  • LinearInterpolator:表示以常量速率改变。

  我们可以通过一些示例加深对这几个插入器的了解。

  具体可查看官方文档: http://developer.android.com/reference/android/view/animation/package-summary.htm l,这里不再详述。

 

  先来了解下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变成叉号,通过如下的动画:

<?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 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中实现伸缩弹力分布菜单效果的实现过程,由于本篇不算是原创性的文章,所以关于代码没有过多的讲解,具体的代码讲解可参考原创文章: http://www.cnblogs.com/mudoot/archive/2012/01/19/path_composer_menu.html ,同时也非常感谢原创作者提供的资料。

 

  示例下载:很抱歉,网速慢,没上传成功,明天上传。^_^

  最后,希望转载的朋友能够尊重作者的劳动成果,加上转载地址: http://www.cnblogs.com/hanyonglu/archive/2012/10/26/2741759.html 谢谢。

 

  完毕。^_^

本文链接

相关 [android 弹力 分布] 推荐:

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

- - 博客园_HarHar
  本文介绍下在Android中实现伸缩弹力分布菜单效果. 关于这种菜单效果在IPhone中比较常见,效果比较酷. 那么在Android中实现只是一种简单的模仿.   这两天无意间看到一园友的博文 实现Path2.0中绚丽的的旋转菜单,感觉效果不错,但是发现作者没有处理线程安全的问题,所以在这里我修正了下,并且改善下部分功能.

Android 遥控车

- CasparZ - LinuxTOY
您确定您真的会用 Android 手机玩赛车. 16 岁的法国学生 Jonathan Rico 使用 Android 手机通过蓝牙实现了对改装玩具汽车的遥控. 操控的方式和那些标榜的智能手机游戏一样,使用重力感应,差别是这次控制的是现实世界中的遥控汽车. 收藏到 del.icio.us |.

Android免费?毛

- Ruby - FeedzShare
来自: 36氪 - FeedzShare  . 发布时间:2011年08月17日,  已有 2 人推荐. 微软CEO Steve Ballmer在预测竞争对手产品时通常口无遮拦. 比如他去年抨击Google的Android战略时,很多人都不屑一顾. 接着Android蚕食了微软的地盘,后来又开始侵犯苹果的地盘.

GetEd2k (Android应用)

- 某牢 - eMule Fans 电骡爱好者
GetEd2k是一个Android应用程序,作者是anacletus. 此应用可以帮助你把网页中的电驴(eDonkey) 链接添加到你个人电脑的电驴客户端里,不过前提是你的客户端开启了用于远程控制的Web interface(Web服务器,网页接口,Web界面),当然,eMule(电骡), MLDonkey 和 aMule 都支持该功能,所以这三种主流电驴客户端的用户都可以使用GetEd2k.

Android 4.0发布

- coofucoo - Solidot
Shawn the R0ck 写道 "2011年10月19日早上10点,谷歌与三星联手在香港发布了Android 4.0和Galaxy Nexus. " Android 4.0 的主要特性包括:更精细的UI,加强多任务和通知功能,锁屏下可打开摄像头和浏览通知,改进文本输入和拼写检查;增强视频录制和图像编辑功能,支持剪裁和旋转图片、消除红眼、添加效果等;面部识别解锁;Android Beam允许两台支持NFC的设备之间交换应用程序、联系人、音乐和视频;Wi-Fi Direct,蓝牙HDP,等等.

NoScript For Android发布

- John - Solidot
用于屏蔽脚本的浏览器流行扩展NoScript发布了Android版本. 开发者称已经在Firefox for Android测试过,此外也应该能工作在基于Maemo的设备上. 移动版NoScript可以帮助移动用户抵抗基于脚本的攻击. Android平台上的扩展功能和桌面版相似,允许用户对每个网站单独设置脚本执行许可.

Android入门:ContentProvider

- - ITeye博客
一、ContentProvider介绍. ContentProvider翻译为“内容提供者”;. 定义:指该应用包含一些方法,供外界访问,其他应用程序可以调用该方法,比如如果应用A创建了一个数据库“test.db”,默认是私有的,即其他应用程序不能对其进行操作,但是如果应用A使用了ContentProvider,则其他应用程序可以访问该数据库;.

Android Service 详解

- - CSDN博客移动开发推荐文章
一个Service也是一种应用程序组件,它运行在后台以提供某种服务,通常不具有可见的用户界面. 其它的应用程序组件可以启动一个Service,即使在用户切换到另外一个应用程序后,这个Service还是一直会在后台运行. 此外,一个应用程序也可以绑定到一个Service然后使用进程间通信(IPC)方式与Service之间发生交互.

android动画

- - CSDN博客移动开发推荐文章
一、        开发资料与实例教程. 分析android动画模块. Android 动画类的特点和区别. Android动画基础--本文转载自--springfieldx的文章,在此向他致谢. Android Animation 动画效果. Android Tween动画(一). Android Tween动画(二).