`

仿的一个动画菜单效果

阅读更多
点击前效果:
[img]

[/img]
点击后效果:
[img]

[/img]
/res/layout/main  :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
	<com.magus.button.AnimButtons
	    android:id="@+id/animButtons"
	    android:layout_width="fill_parent"
        android:layout_height="fill_parent"
	    />
</LinearLayout>


res/layout/anim_buttons  :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
	android:layout_height="fill_parent" 
	android:background="#FFF"
	>
	<Button android:id="@+id/btn_sleep"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:background="@drawable/composer_sleep"
		android:layout_alignParentLeft="true"
		android:layout_alignParentBottom="true"
		/>

	<Button android:id="@+id/btn_thought"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:background="@drawable/composer_thought"
		android:layout_alignParentLeft="true"
		android:layout_alignParentBottom="true"
		/>

	<Button android:id="@+id/btn_music"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:background="@drawable/composer_music"
		android:layout_alignParentLeft="true"
		android:layout_alignParentBottom="true"
		/>

	<Button android:id="@+id/btn_place"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:background="@drawable/composer_place"
		android:layout_alignParentLeft="true"
		android:layout_alignParentBottom="true"
		/>

	<Button android:id="@+id/btn_with"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:background="@drawable/composer_with"
		android:layout_alignParentLeft="true"
		android:layout_alignParentBottom="true"
		/>

	<Button android:id="@+id/btn_camera"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:background="@drawable/composer_camera"
		android:layout_alignParentLeft="true"
		android:layout_alignParentBottom="true"
		/>

	<Button android:id="@+id/btn_menu"
		android:layout_width="58dip" 
		android:layout_height="58dip"
		android:background="@drawable/friends_delete"
		android:layout_alignParentLeft="true"
		android:layout_alignParentBottom="true"
		android:layout_marginLeft="10dip"
		android:layout_marginBottom="10dip"
	/>
</RelativeLayout>


MainActivity:
package com.magus.button;



import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;

public class MainActivity extends Activity {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		AnimButtons animButtons = (AnimButtons) findViewById(R.id.animButtons);
		animButtons
				.setOnButtonClickListener(new AnimButtons.OnButtonClickListener() {

					@Override
					public void onButtonClick(View v, int id) {
						// TODO Auto-generated method stub
						Log.i("tag", "id=============" + id);
					}
				});

	}
}


AnimButtons:
package com.magus.button;

import android.R.anim;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.view.animation.Animation.AnimationListener;
import android.widget.Button;
import android.widget.RelativeLayout;



public class AnimButtons extends RelativeLayout{

	private Context context;
	private int leftMargin=0,bottomMargin=0;
	private final int buttonWidth=58;//图片宽高
	private final int r=180;//半径
	private final int maxTimeSpent=200;//最长动画耗时
	private final int minTimeSpent=80;//最短动画耗时
	private int intervalTimeSpent;//每相邻2个的时间间隔
	private Button[] btns;
	private Button btn_menu;
	private RelativeLayout.LayoutParams params;
	private boolean isOpen = false;//是否菜单打开状态
	private float angle;//每个按钮之间的夹角
	public AnimButtons(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		this.context=context;
	}
	public AnimButtons(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		this.context=context;
	}
	
	@Override
	protected void onFinishInflate() {
		// TODO Auto-generated method stub
		super.onFinishInflate();
		View view=LayoutInflater.from(context).inflate(R.layout.anim_buttons, this);
		
		initButtons(view);
		
	}

	private void initButtons(View view){
		// TODO Auto-generated method stub
		//6个按钮,具体视情况而定
		btns=new Button[6];
		btns[0] = (Button) view.findViewById(R.id.btn_camera);
		btns[1] = (Button) view.findViewById(R.id.btn_with);
		btns[2] = (Button) view.findViewById(R.id.btn_place);
		btns[3] = (Button) view.findViewById(R.id.btn_music);
		btns[4] = (Button) view.findViewById(R.id.btn_thought);
		btns[5] = (Button) view.findViewById(R.id.btn_sleep);
		btn_menu = (Button) view.findViewById(R.id.btn_menu);
		
		leftMargin=((RelativeLayout.LayoutParams)(btn_menu.getLayoutParams())).leftMargin;
		bottomMargin=((RelativeLayout.LayoutParams)(btn_menu.getLayoutParams())).bottomMargin;
		
		for(int i=0;i<btns.length;i++){
			btns[i].setLayoutParams(btn_menu.getLayoutParams());//初始化的时候按钮都重合
			btns[i].setTag(String.valueOf(i));
			btns[i].setOnClickListener(clickListener);
		}
		
		intervalTimeSpent=(maxTimeSpent-minTimeSpent)/btns.length;//20
		angle=(float)Math.PI/(2*(btns.length-1));
	}
	
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		// TODO Auto-generated method stub
		super.onSizeChanged(w, h, oldw, oldh);
		final int bottomMargins=this.getMeasuredHeight()-buttonWidth-bottomMargin;
//		Log.i("tag", "bottomMargins====="+bottomMargins);
		btn_menu.setOnClickListener(new OnClickListener() {
			
			public void onClick(View v) {
				// TODO Auto-generated method stub					
				if(!isOpen){
					isOpen = true;
//					btn_menu.startAnimation(animRotate(-45.0f, 0.5f, 0.45f));
					for(int i=0;i<btns.length;i++){
						float xLenth=(float)(r*Math.sin(i*angle));
						float yLenth=(float)(r*Math.cos(i*angle));
//						Log.i("tag", "xLenth======"+xLenth+",yLenth======"+yLenth);
						btns[i].startAnimation(animTranslate(xLenth, -yLenth, leftMargin+(int)xLenth, bottomMargins - (int)yLenth, btns[i], minTimeSpent+i*intervalTimeSpent));
					}
					
				}
				else{
					isOpen = false;
//					btn_menu.startAnimation(animRotate(90.0f, 0.5f, 0.45f));
					for(int i=0;i<btns.length;i++){
						float xLenth=(float)(r*Math.sin(i*angle));
						float yLenth=(float)(r*Math.cos(i*angle));
//						Log.i("tag", "xLenth======"+xLenth+",yLenth======"+yLenth);
						btns[i].startAnimation(animTranslate(-xLenth, yLenth, leftMargin, bottomMargins, btns[i], maxTimeSpent-i*intervalTimeSpent));
					}
				}
					
			}
		});
		
	}
	private Animation animScale(float toX, float toY){
		// TODO Auto-generated method stub
		Animation animation = new ScaleAnimation(1.0f, toX, 1.0f, toY, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
		animation.setInterpolator(context, anim.accelerate_decelerate_interpolator);
		animation.setDuration(400);
		animation.setFillAfter(false);
		return animation;
		
	}
	
	private Animation animRotate(float toDegrees, float pivotXValue, float pivotYValue){
		// TODO Auto-generated method stub
		final Animation animation = new RotateAnimation(0, toDegrees, Animation.RELATIVE_TO_SELF, pivotXValue, Animation.RELATIVE_TO_SELF, pivotYValue);
		animation.setAnimationListener(new AnimationListener(){
			
			@Override
			public void onAnimationStart(Animation animation){
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationRepeat(Animation animation){
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationEnd(Animation animation){
				// TODO Auto-generated method stub
				animation.setFillAfter(true);
			}
		});
		return animation;
	}
	
	
	private Animation animTranslate(float toX, float toY, final int lastX, final int lastY,
			final Button button, long durationMillis){
		// TODO Auto-generated method stub
		Animation animation = new TranslateAnimation(0, toX, 0, toY);				
		animation.setAnimationListener(new AnimationListener(){
						
			@Override
			public void onAnimationStart(Animation animation){
				// TODO Auto-generated method stub
								
			}
						
			@Override
			public void onAnimationRepeat(Animation animation) {
				// TODO Auto-generated method stub
							
			}
						
			@Override
			public void onAnimationEnd(Animation animation){
				// TODO Auto-generated method stub
				params = new RelativeLayout.LayoutParams(0, 0);
				params.height = buttonWidth;
				params.width = buttonWidth;											
				params.setMargins(lastX, lastY, 0, 0);
				button.setLayoutParams(params);
				button.clearAnimation();
						
			}
		});																								
		animation.setDuration(durationMillis);
		return animation;
	}
	
	View.OnClickListener clickListener=new View.OnClickListener(){

		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			int selectedItem=Integer.parseInt((String)v.getTag());
			for(int i=0;i<btns.length;i++){
				if(i==selectedItem){
					btns[i].startAnimation(animScale(2.0f, 2.0f));
				}else{
					btns[i].startAnimation(animScale(0.0f, 0.0f));
				}
			}
			if(onButtonClickListener!=null){
				onButtonClickListener.onButtonClick(v, selectedItem);
			}
		}
		
	};
	
	public boolean isOpen(){
		return isOpen;
	}
	
	private OnButtonClickListener onButtonClickListener;
	public interface OnButtonClickListener{
		void onButtonClick(View v,int id);
	}
	public void setOnButtonClickListener(OnButtonClickListener onButtonClickListener){
		this.onButtonClickListener=onButtonClickListener;
	}
}


本文转自:http://gundumw100.iteye.com/blog/1299953
  • 大小: 15.7 KB
  • 大小: 26.7 KB
分享到:
评论
1 楼 happyboy858 2012-01-18  
求源码,LZ 谢谢。 441667111@qq.com

相关推荐

    仿扇形菜单动画效果

    首先,`ArcMenu`项目是开发者`daCapricorn`在GitHub上开源的一个实现扇形菜单效果的工具。该项目提供了自定义菜单项和动画效果,使得开发者可以轻松地在自己的应用中集成扇形菜单。你可以通过访问项目链接查看源代码...

    Android 仿团购应用图片菜单效果源码.zip

    一款仿团购应用图片菜单效果的源码,目前已经实现了以下功能: 1.图片导航菜单展开(ExpandableListView) 2.子菜单滑动切换(ViewFlipper) 3.根据当前页面显示页标 还有两个问题,感兴趣的朋友可以研究下: 1...

    仿Path菜单效果

    总的来说,“仿Path菜单效果”是一种创新的Android菜单设计,它结合了动画和自定义参数,提升了用户体验。通过理解其背后的实现原理和代码结构,开发者可以掌握更多关于Android动画和自定义视图的知识,进一步提升...

    仿淘宝taobao商城类别菜单效果

    本文将详述如何实现“仿淘宝taobao商城类别菜单效果”,这是一个基于JavaScript(js)技术实现的动态菜单功能,旨在为用户提供清晰、直观且易用的导航体验。 淘宝商城的类别菜单以其层次分明、响应迅速的特点,深受...

    仿苹果pathMenu菜单效果

    "仿苹果pathMenu菜单效果"是一个这样的设计,它旨在模仿苹果操作系统(如macOS)中的下拉菜单功能,这种菜单在用户交互时提供了简洁且直观的导航方式。下面将详细解释这个效果涉及的技术点和实现方法。 首先,`path...

    仿path菜单 控件版 可以修改位置和动画方向

    在Android开发中,"仿path菜单 控件版 可以修改位置和动画方向"是一个针对用户界面设计的组件,主要用于创建一种独特的交互式菜单效果。这个菜单灵感来源于PATH社交应用,因此被称为PATH菜单或者卫星菜单。它通常在...

    仿google的导航菜单效果

    标题提到的"仿google的导航菜单效果",指的是创建一个与Google网站相似的顶部导航菜单,这种菜单以其简洁、直观和高效的特性广受用户喜爱。让我们深入探讨一下这个话题。 首先,导航菜单是网页设计的核心元素之一,...

    android自定义popupwindow仿微信右上角弹出菜单效果

    本文将详细介绍如何使用`PopupWindow`在Android应用中模仿微信右上角的弹出菜单效果。 首先,我们需要理解`PopupWindow`的基本用法。`PopupWindow` 是一个可以在屏幕任意位置显示的窗口,它不依附于任何Activity,...

    仿QQ下拉菜单效果仿QQ下拉菜单效果

    综上所述,实现仿QQ下拉菜单效果涉及了CSS来设计样式,HTML来构建菜单结构,JavaScript来实现动态交互。通过分析这些文件,我们可以学习到如何使用这些技术来创建一个具有类似QQ应用的下拉菜单,提升用户体验。

    仿酷狗菜单栏侧滑效果

    4. **状态管理**:为了确保用户在任何时刻都能准确感知菜单的状态(打开或关闭),开发者需要维护一个标志来追踪当前状态,并根据此状态更新视图。 5. **性能优化**:在处理滑动时,要确保动画流畅,避免过度绘制和...

    仿MacOS苹果系统底部图标菜单动画代码

    在本项目中,我们主要探讨的是如何利用JavaScript和CSS3技术来实现仿MacOS苹果系统底部图标菜单的动画效果。这种效果通常出现在苹果操作系统的Dock栏上,它为用户提供了一种直观且美观的界面交互方式。下面将详细...

    android仿path菜单效果

    本教程将深入探讨如何实现"android仿path菜单效果",这是一个利用布局和TranslateAnimation来创建类似PATH应用的菜单动画效果。PATH,一款知名的社交网络应用,以其独特的界面设计获得了用户的喜爱,特别是其菜单...

    Android 动画(二) 实战演示——仿网易新闻安卓端菜单栏动画

    本文将深入探讨如何实现一个仿网易新闻安卓端菜单栏动画,这是Android动画系列的第二部分。通过这个实战案例,开发者可以了解到如何利用Android的动画API来创建复杂的交互式效果,增强应用的视觉吸引力。 首先,...

    仿印象笔记抽屉菜单效果.zip

    在安卓应用开发中,创建一个吸引用户的界面设计是至关重要的,而印象笔记的抽屉菜单效果就是一个很好的例子。抽屉菜单通常被用作隐藏主菜单或设置选项,它以一种优雅的方式从屏幕边缘滑出,提供了良好的用户体验。...

    仿QQ6.0侧滑菜单效果

    总的来说,实现"仿QQ6.0侧滑菜单效果"需要对Android的触摸事件处理、手势检测、布局管理以及动画设计有深入理解。通过合理地组合使用各种Android组件和API,开发者可以创建出与QQ6.0类似的、具有优秀用户体验的侧滑...

    android 仿QQ5.2左右菜单效果

    在Android应用开发中,"仿QQ5.2左右菜单效果"是一个常见的设计需求,它涉及到用户界面(UI)和用户体验(UX)的设计。这个效果通常指的是应用主界面两侧可以滑动打开的侧滑菜单,左边通常展示功能菜单,右边可能包含...

    仿path动画菜单lib.zip

    【标题】"仿path动画菜单lib.zip"是一个与Android开发相关的资源包,它包含了一个用于创建具有路径动画效果的菜单的源代码库。这个库可能是为Android应用开发者设计的,帮助他们在自己的应用中实现吸引人的、动态的...

    仿Path加号效果菜单

    总结起来,"仿Path加号效果菜单"是一种增强用户交互体验的设计,通过动画技术和Android的视图组件,可以实现一个动态展开的菜单效果。实现过程中涉及到了Android的动画系统、布局设计、事件监听、资源管理和性能优化...

    仿flickrMenu下拉菜单效果

    【标题】:“仿flickrMenu下拉菜单效果” 在网页设计中,下拉菜单是一种常见的交互元素,用于在有限的空间内展示丰富的导航选项。flickrMenu是著名的图片分享网站Flickr所采用的一种高效的下拉菜单设计,它既美观又...

Global site tag (gtag.js) - Google Analytics