快捷導(dǎo)航

Android實(shí)現(xiàn)伸縮彈力分布菜單效果的示例

更新時(shí)間：2016年10月19日 10:22:14 作者：Healtheon

本文介紹下在Android中實(shí)現(xiàn)伸縮彈力分布菜單效果。這種效果比較炫酷，有需要的朋友可以參考一下。

這兩天無意間看到一園友的博文實(shí)現(xiàn)Path2.0中絢麗的的旋轉(zhuǎn)菜單，感覺效果不錯(cuò)，但是發(fā)現(xiàn)作者沒有處理線程安全的問題，所以在這里我修正了下，并且改善下部分功能。今天發(fā)布這篇文章的目的是希望能在Android用戶體驗(yàn)上提出一些相關(guān)的解決方案，方便我們?cè)陂_發(fā)項(xiàng)目或產(chǎn)品時(shí)增強(qiáng)用戶體驗(yàn)效果，當(dāng)然也希望能起到拋磚引玉的作用。

=廢話不多說，還是老規(guī)矩，先讓我們看一下實(shí)現(xiàn)的效果圖：

=在上圖中，我將菜單彈出的效果設(shè)置成直線型，最終的彈出或匯總點(diǎn)在下面的紅色按鈕中。

它的實(shí)現(xiàn)原理是設(shè)置動(dòng)畫的同時(shí)并利用動(dòng)畫中的插入器（interpolator）來實(shí)現(xiàn)彈力。主要用到了OvershootInterpolator和AnticipateOvershootInterpolator，簡(jiǎn)單介紹下這兩個(gè)插入器。

OvershootInterpolator：表示向前甩一定值后再回到原來位置。
AnticipateOvershootInterpolator：表示開始的時(shí)候向后然后向前甩一定值后返回最后的值。
當(dāng)然還有其它的插入器，簡(jiǎn)要了解下其作用：
AnticipateInterpolator：表示開始的時(shí)候向后然后向前甩。
BounceInterpolator：表示動(dòng)畫結(jié)束的時(shí)候彈起。
OvershootInterpolator：表示向前甩一定值后再回到原來位置。
CycleInterpolator：表示動(dòng)畫循環(huán)播放特定的次數(shù)，速率改變沿著正弦曲線。
DecelerateInterpolator：表示在動(dòng)畫開始的地方快然后慢。
LinearInterpolator：表示以常量速率改變。

我們可以通過一些示例加深對(duì)這幾個(gè)插入器的了解。在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實(shí)現(xiàn)伸縮彈力分布菜單效果
 * @Description: Android實(shí)現(xiàn)伸縮彈力分布菜單效果

 * @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;
 // 順時(shí)針旋轉(zhuǎn)動(dòng)畫
 private Animation animRotateClockwise;
 // 你試著旋轉(zhuǎn)動(dòng)畫
 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;
 }

 // 分布菜單事件監(jiān)聽器
 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));
  }
 }

 /**
  * 展現(xiàn)菜單動(dòng)畫效果
  * @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);
 }
}

在點(diǎn)擊紅色按鈕時(shí)彈出最上面的菜單，點(diǎn)擊某個(gè)菜單時(shí)變換上面的背景圖片，當(dāng)然也可直接進(jìn)入某個(gè)Activity。所以上面定義了intentActivity和mainResources兩個(gè)數(shù)組，分別代表切換的Activity和要變換的圖片。大家可根據(jù)實(shí)際的需要進(jìn)行設(shè)置。在進(jìn)行點(diǎn)擊紅色按鈕時(shí)中間的加號(hào)向右進(jìn)行旋轉(zhuǎn)225度變成叉號(hào)，通過如下的動(dòng)畫：

<?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"/>

再次點(diǎn)擊則向左旋轉(zhuǎn)還原，將上面的android:fromDegrees和android:toDegrees替換下即可。

下面了解下另一個(gè)重要的動(dòng)畫類是SpringAnimation，由它來控制各個(gè)菜單的動(dòng)畫效果，代碼如下所示：

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;

/**
 * 分布菜單加載和伸縮動(dòng)畫
 * @Description: 分布菜單加載和伸縮動(dòng)畫

 * @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;
 
 /**
  * 構(gòu)造器
  * @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;
 }

 /**
  * 開始顯示動(dòng)畫效果
  * @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;
  }
 }

 /**
  * 開始呈現(xiàn)菜單
  * @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，關(guān)于ZoomAnimation代碼如下：

package com.spring.menu.animation;

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

/**
 * 放大縮小動(dòng)畫類
 * @Description: 放大縮小動(dòng)畫類

 * @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);
}

有時(shí)我們?yōu)榱嗽鰪?qiáng)用戶體驗(yàn)，我們可以將直線設(shè)置成半圓形或是半橢圓形，可以利用Bresenham算法或是其它的方案實(shí)現(xiàn)半圓或半橢圓的菜單，而不是簡(jiǎn)單的將菜單定位在某個(gè)地方。關(guān)于這個(gè)，有興趣的朋友可參閱相關(guān)資料去實(shí)現(xiàn)它。

另外，上面的例子并沒有實(shí)現(xiàn)動(dòng)態(tài)的設(shè)置菜單的個(gè)數(shù)。個(gè)人覺得最好能動(dòng)態(tài)設(shè)置菜單的布局，這樣在添加或減少菜單時(shí)比較方便。一般的過程是利用一個(gè)數(shù)組(代表圖片資源)，根據(jù)數(shù)組來實(shí)現(xiàn)它的布局。包括上段中提到的實(shí)現(xiàn)半圓形展開也要進(jìn)行動(dòng)態(tài)的設(shè)置。本來我想去實(shí)現(xiàn)它，但是真的沒有那么多時(shí)間，有需要的朋友可以去填充程序的SpringMenuLayout類，在這里我就不去實(shí)現(xiàn)它了。

package com.spring.menu.layout;

/**
 * 實(shí)現(xiàn)伸縮彈力分布菜單布局類
 * @Description: 實(shí)現(xiàn)伸縮彈力分布菜單布局類

 * @File: SpringMenuLayout.java

 * @Package com.spring.menu.layout

 * @Author Hanyonglu

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

 * @Version V1.0
 */
public class SpringMenuLayout {
 // 自動(dòng)生成直線型布局
 
 // 自動(dòng)生成圓弧型布局
}

以上是關(guān)于Android中實(shí)現(xiàn)伸縮彈力分布菜單效果的實(shí)現(xiàn)過程，

您可能感興趣的文章: