欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-05 09:52:24
这两天无意间看到一园友的博文实现path2.0中绚丽的的旋转菜单,感觉效果不错,但是发现作者没有处理线程安全的问题,所以在这里我修正了下,并且改善下部分功能。今天发布这篇文...

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

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

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

<?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中实现伸缩弹力分布菜单效果的实现过程,