热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

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

本文介绍下在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<&#63;>[] 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  cls;
  private int resource;

  private SpringMenuLauncher(Class<&#63;> 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度变成叉号,通过如下的动画:

<&#63;xml version="1.0" encoding="UTF-8"&#63;>

再次点击则向左旋转还原,将上面的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 

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


推荐阅读
  • 短信验证码安全性堪忧,多因素认证或成未来主流
    短信验证码安全性堪忧,多因素认证或成未来主流 ... [详细]
  • 在探讨Hibernate框架的高级特性时,缓存机制和懒加载策略是提升数据操作效率的关键要素。缓存策略能够显著减少数据库访问次数,从而提高应用性能,特别是在处理频繁访问的数据时。Hibernate提供了多层次的缓存支持,包括一级缓存和二级缓存,以满足不同场景下的需求。懒加载策略则通过按需加载关联对象,进一步优化了资源利用和响应时间。本文将深入分析这些机制的实现原理及其最佳实践。 ... [详细]
  • 初探性能优化:入门指南与实践技巧
    在编程领域,常有“尚未精通编码便急于优化”的声音。为了从性能优化的角度提升代码质量,本文将带领读者初步探索性能优化的基本概念与实践技巧。即使程序看似运行良好,数据处理效率仍有待提高,通过系统学习性能优化,能够帮助开发者编写更加高效、稳定的代码。文章不仅介绍了性能优化的基础知识,还提供了实用的调优方法和工具,帮助读者在实际项目中应用这些技术。 ... [详细]
  • 在 Android 应用开发中,实现全屏模式和无标题栏设计是提升用户体验的重要手段。本文详细介绍了如何通过 Java 代码实现取消标题栏 `this.requestWindowFeature(Window.FEATURE_NO_TITLE)`,并进一步探讨了全屏模式的多种实现方法和最佳实践,帮助开发者打造更加沉浸式和美观的用户界面。 ... [详细]
  • 在Android开发中,BroadcastReceiver(广播接收器)是一个重要的组件,广泛应用于多种场景。本文将深入解析BroadcastReceiver的工作原理、应用场景及其具体实现方法,帮助开发者更好地理解和使用这一组件。通过实例分析,文章详细探讨了静态广播的注册方式、生命周期管理以及常见问题的解决策略,为开发者提供全面的技术指导。 ... [详细]
  • 题目探讨了在无向图中求解点连通数的问题,具体涉及UVA1660和POJ1966两个经典问题。通过最小割算法的应用,分析了如何高效地确定网络中的关键节点和路径,为电缆电视网络的优化设计提供了理论支持。该研究不仅验证了最小割算法的有效性,还为进一步探索复杂网络的连通性和鲁棒性奠定了基础。 ... [详细]
  • 小王详解:内部网络中最易理解的NAT原理剖析,挑战你的认知极限
    小王详解:内部网络中最易理解的NAT原理剖析,挑战你的认知极限 ... [详细]
  • 第六章:枚举类型与switch结构的应用分析
    第六章深入探讨了枚举类型与 `switch` 结构在编程中的应用。枚举类型(`enum`)是一种将一组相关常量组织在一起的数据类型,广泛存在于多种编程语言中。例如,在 Cocoa 框架中,处理文本对齐时常用 `NSTextAlignment` 枚举来表示不同的对齐方式。通过结合 `switch` 结构,可以更清晰、高效地实现基于枚举值的逻辑分支,提高代码的可读性和维护性。 ... [详细]
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • REST与RPC:选择哪种API架构风格?
    在探讨REST与RPC这两种API架构风格的选择时,本文首先介绍了RPC(远程过程调用)的概念。RPC允许客户端通过网络调用远程服务器上的函数或方法,从而实现分布式系统的功能调用。相比之下,REST(Representational State Transfer)则基于资源的交互模型,通过HTTP协议进行数据传输和操作。本文将详细分析两种架构风格的特点、适用场景及其优缺点,帮助开发者根据具体需求做出合适的选择。 ... [详细]
  • 在本文中,我们将为 HelloWorld 项目添加视图组件,以确保控制器返回的视图路径能够正确映射到指定页面。这一步骤将为后续的测试和开发奠定基础。首先,我们将介绍如何配置视图解析器,以便 SpringMVC 能够识别并渲染相应的视图文件。 ... [详细]
  • 《Spring in Action 第4版:全面解析与实战指南》
    《Spring in Action 第4版:全面解析与实战指南》不仅详细介绍了Spring框架的核心优势,如简洁易测试、低耦合特性,还深入探讨了其轻量级和最小侵入性的设计原则。书中强调了声明式编程的优势,并通过基于约定的方法简化开发流程。此外,Spring的模板机制有效减少了重复代码,而依赖注入功能则由容器自动管理,确保了应用的灵活性和可维护性。 ... [详细]
  • 在使用SSH框架进行项目开发时,经常会遇到一些常见的问题。例如,在Spring配置文件中配置AOP事务声明后,进行单元测试时可能会出现“No Hibernate Session bound to thread”的错误。本文将详细探讨这一问题的原因,并提供有效的解决方案,帮助开发者顺利解决此类问题。 ... [详细]
  • Linux Shell变量初探:初始值解析与使用指南
    本文探讨了Linux Shell中变量的基本概念及其在BASH中的应用。变量是用于存储可变数据的标识符,能够代表不同的值。文章详细介绍了BASH shell的主要优势,包括强大的命令编辑能力、自动补全功能、命令别名设置、作业控制以及前后台任务管理。此外,还涵盖了编程脚本编写和通配符的使用方法,为初学者提供了全面的指导。 ... [详细]
  • 本文探讨了如何有效地构建和优化微信公众平台账号,涵盖了用户信息管理、内容创作与发布、互动策略及数据分析等方面。通过合理设置用户信息字段,如用户名、昵称、密码、真实姓名和性别等,确保账号的安全性和用户体验。同时,文章还介绍了如何利用微信公众平台的各项功能,提升用户参与度和品牌影响力。 ... [详细]
author-avatar
晨晖03_753
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有