云南学业水平考试网络管理,janz7777,艳模组团来袭
这两天无意间看到一园友的博文实现path2.0中绚丽的的旋转菜单，感觉效果不错，但是发现作者没有处理线程安全的问题，所以在这里我修正了下，并且改善下部分功能。今天发布这篇文章的目的是希望能在android用户体验上提出一些相关的解决方案，方便我们在开发项目或产品时增强用户体验效果，当然也希望能起到抛砖引玉的作用。
=废话不多说，还是老规矩，先让我们看一下实现的效果图：
=在上图中，我将菜单弹出的效果设置成直线型，最终的弹出或汇总点在下面的红色按钮中。
它的实现原理是设置动画的同时并利用动画中的插入器（interpolator）来实现弹力。主要用到了overshootinterpolator和anticipateovershootinterpolator，简单介绍下这两个插入器。
我们可以通过一些示例加深对这几个插入器的了解。在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中实现伸缩弹力分布菜单效果的实现过程，
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android Manifest中meta-data扩展元素数据的配置与获取方式
Android实现获取meta-data和build.gradle的值
Android获取清单文件中的meta-data,解决碰到数值为null的问题
解决webview 第二次调用loadUrl页面不刷新的问题
解决Android WebView拦截url,视频播放加载失败的问题
Android webview加载https链接错误或无响应的解决
网友评论