`

仿的一个动画菜单效果(转)

 
阅读更多

记得在eoe上有人发过,但代码质量不好。我重写了一下,抽成了控件。但没有经过各种控件的相容性测试,如果和其他控件的相容性不好,就直接在activity中写代码吧,应该差不多的。 
我用的是平板,所以效果还行,不知道手机如何。 

 

 
代码: 

Java代码   收藏代码
  1. package com.ql.view;  
  2.   
  3. import android.R.anim;  
  4. import android.content.Context;  
  5. import android.util.AttributeSet;  
  6. import android.util.Log;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.animation.Animation;  
  10. import android.view.animation.RotateAnimation;  
  11. import android.view.animation.ScaleAnimation;  
  12. import android.view.animation.TranslateAnimation;  
  13. import android.view.animation.Animation.AnimationListener;  
  14. import android.widget.Button;  
  15. import android.widget.RelativeLayout;  
  16.   
  17. import com.ql.app.R;  
  18.   
  19. public class AnimButtons extends RelativeLayout{  
  20.   
  21.     private Context context;  
  22.     private int leftMargin=0,bottomMargin=0;  
  23.     private final int buttonWidth=58;//图片宽高  
  24.     private final int r=180;//半径  
  25.     private final int maxTimeSpent=200;//最长动画耗时  
  26.     private final int minTimeSpent=80;//最短动画耗时  
  27.     private int intervalTimeSpent;//每相邻2个的时间间隔  
  28.     private Button[] btns;  
  29.     private Button btn_menu;  
  30.     private RelativeLayout.LayoutParams params;  
  31.     private boolean isOpen = false;//是否菜单打开状态  
  32.     private float angle;//每个按钮之间的夹角  
  33.     public AnimButtons(Context context) {  
  34.         super(context);  
  35.         // TODO Auto-generated constructor stub  
  36.         this.context=context;  
  37.     }  
  38.     public AnimButtons(Context context, AttributeSet attrs) {  
  39.         super(context, attrs);  
  40.         // TODO Auto-generated constructor stub  
  41.         this.context=context;  
  42.     }  
  43.       
  44.     @Override  
  45.     protected void onFinishInflate() {  
  46.         // TODO Auto-generated method stub  
  47.         super.onFinishInflate();  
  48.         View view=LayoutInflater.from(context).inflate(R.layout.anim_buttons, this);  
  49.           
  50.         initButtons(view);  
  51.           
  52.     }  
  53.   
  54.     private void initButtons(View view){  
  55.         // TODO Auto-generated method stub  
  56.         //6个按钮,具体视情况而定  
  57.         btns=new Button[6];  
  58.         btns[0] = (Button) view.findViewById(R.id.btn_camera);  
  59.         btns[1] = (Button) view.findViewById(R.id.btn_with);  
  60.         btns[2] = (Button) view.findViewById(R.id.btn_place);  
  61.         btns[3] = (Button) view.findViewById(R.id.btn_music);  
  62.         btns[4] = (Button) view.findViewById(R.id.btn_thought);  
  63.         btns[5] = (Button) view.findViewById(R.id.btn_sleep);  
  64.         btn_menu = (Button) view.findViewById(R.id.btn_menu);  
  65.           
  66.         leftMargin=((RelativeLayout.LayoutParams)(btn_menu.getLayoutParams())).leftMargin;  
  67.         bottomMargin=((RelativeLayout.LayoutParams)(btn_menu.getLayoutParams())).bottomMargin;  
  68.           
  69.         for(int i=0;i<btns.length;i++){  
  70.             btns[i].setLayoutParams(btn_menu.getLayoutParams());//初始化的时候按钮都重合  
  71.             btns[i].setTag(String.valueOf(i));  
  72.             btns[i].setOnClickListener(clickListener);  
  73.         }  
  74.           
  75.         intervalTimeSpent=(maxTimeSpent-minTimeSpent)/btns.length;//20  
  76.         angle=(float)Math.PI/(2*(btns.length-1));  
  77.     }  
  78.       
  79.     @Override  
  80.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
  81.         // TODO Auto-generated method stub  
  82.         super.onSizeChanged(w, h, oldw, oldh);  
  83.         final int bottomMargins=this.getMeasuredHeight()-buttonWidth-bottomMargin;  
  84. //      Log.i("tag", "bottomMargins====="+bottomMargins);  
  85.         btn_menu.setOnClickListener(new OnClickListener() {  
  86.               
  87.             @Override  
  88.             public void onClick(View v) {  
  89.                 // TODO Auto-generated method stub                    
  90.                 if(!isOpen){  
  91.                     isOpen = true;  
  92. //                  btn_menu.startAnimation(animRotate(-45.0f, 0.5f, 0.45f));  
  93.                     for(int i=0;i<btns.length;i++){  
  94.                         float xLenth=(float)(r*Math.sin(i*angle));  
  95.                         float yLenth=(float)(r*Math.cos(i*angle));  
  96. //                      Log.i("tag", "xLenth======"+xLenth+",yLenth======"+yLenth);  
  97.                         btns[i].startAnimation(animTranslate(xLenth, -yLenth, leftMargin+(int)xLenth, bottomMargins - (int)yLenth, btns[i], minTimeSpent+i*intervalTimeSpent));  
  98.                     }  
  99.                       
  100.                 }  
  101.                 else{                     
  102.                     isOpen = false;  
  103. //                  btn_menu.startAnimation(animRotate(90.0f, 0.5f, 0.45f));  
  104.                     for(int i=0;i<btns.length;i++){  
  105.                         float xLenth=(float)(r*Math.sin(i*angle));  
  106.                         float yLenth=(float)(r*Math.cos(i*angle));  
  107. //                      Log.i("tag", "xLenth======"+xLenth+",yLenth======"+yLenth);  
  108.                         btns[i].startAnimation(animTranslate(-xLenth, yLenth, leftMargin, bottomMargins, btns[i], maxTimeSpent-i*intervalTimeSpent));  
  109.                     }  
  110.                 }  
  111.                       
  112.             }  
  113.         });  
  114.           
  115.     }  
  116.     private Animation animScale(float toX, float toY){  
  117.         // TODO Auto-generated method stub  
  118.         Animation animation = new ScaleAnimation(1.0f, toX, 1.0f, toY, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);  
  119.         animation.setInterpolator(context, anim.accelerate_decelerate_interpolator);  
  120.         animation.setDuration(400);  
  121.         animation.setFillAfter(false);  
  122.         return animation;  
  123.           
  124.     }  
  125.       
  126.     private Animation animRotate(float toDegrees, float pivotXValue, float pivotYValue){  
  127.         // TODO Auto-generated method stub  
  128.         final Animation animation = new RotateAnimation(0, toDegrees, Animation.RELATIVE_TO_SELF, pivotXValue, Animation.RELATIVE_TO_SELF, pivotYValue);  
  129.         animation.setAnimationListener(new AnimationListener(){  
  130.               
  131.             @Override  
  132.             public void onAnimationStart(Animation animation){  
  133.                 // TODO Auto-generated method stub  
  134.                   
  135.             }  
  136.               
  137.             @Override  
  138.             public void onAnimationRepeat(Animation animation){  
  139.                 // TODO Auto-generated method stub  
  140.                   
  141.             }  
  142.               
  143.             @Override  
  144.             public void onAnimationEnd(Animation animation){  
  145.                 // TODO Auto-generated method stub  
  146.                 animation.setFillAfter(true);  
  147.             }  
  148.         });  
  149.         return animation;  
  150.     }  
  151.       
  152.       
  153.     private Animation animTranslate(float toX, float toY, final int lastX, final int lastY,  
  154.             final Button button, long durationMillis){  
  155.         // TODO Auto-generated method stub  
  156.         Animation animation = new TranslateAnimation(0, toX, 0, toY);                 
  157.         animation.setAnimationListener(new AnimationListener(){  
  158.                           
  159.             @Override  
  160.             public void onAnimationStart(Animation animation){  
  161.                 // TODO Auto-generated method stub  
  162.                                   
  163.             }  
  164.                           
  165.             @Override  
  166.             public void onAnimationRepeat(Animation animation) {  
  167.                 // TODO Auto-generated method stub  
  168.                               
  169.             }  
  170.                           
  171.             @Override  
  172.             public void onAnimationEnd(Animation animation){  
  173.                 // TODO Auto-generated method stub  
  174.                 params = new RelativeLayout.LayoutParams(00);  
  175.                 params.height = buttonWidth;  
  176.                 params.width = buttonWidth;                                           
  177.                 params.setMargins(lastX, lastY, 00);  
  178.                 button.setLayoutParams(params);  
  179.                 button.clearAnimation();  
  180.                           
  181.             }  
  182.         });                                                                                               
  183.         animation.setDuration(durationMillis);  
  184.         return animation;  
  185.     }  
  186.       
  187.     View.OnClickListener clickListener=new View.OnClickListener(){  
  188.   
  189.         @Override  
  190.         public void onClick(View v) {  
  191.             // TODO Auto-generated method stub  
  192.             int selectedItem=Integer.parseInt((String)v.getTag());  
  193.             for(int i=0;i<btns.length;i++){  
  194.                 if(i==selectedItem){  
  195.                     btns[i].startAnimation(animScale(2.0f, 2.0f));  
  196.                 }else{  
  197.                     btns[i].startAnimation(animScale(0.0f, 0.0f));  
  198.                 }  
  199.             }  
  200.             if(onButtonClickListener!=null){  
  201.                 onButtonClickListener.onButtonClick(v, selectedItem);  
  202.             }  
  203.         }  
  204.           
  205.     };  
  206.       
  207.     public boolean isOpen(){  
  208.         return isOpen;  
  209.     }  
  210.       
  211.     private OnButtonClickListener onButtonClickListener;  
  212.     public interface OnButtonClickListener{  
  213.         void onButtonClick(View v,int id);  
  214.     }  
  215.     public void setOnButtonClickListener(OnButtonClickListener onButtonClickListener){  
  216.         this.onButtonClickListener=onButtonClickListener;  
  217.     }  
  218. }  


布局anim_buttons.xml: 

Xml代码   收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout   
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"   
  6.     android:background="#FFF"  
  7.     >  
  8.     <Button android:id="@+id/btn_sleep"  
  9.         android:layout_width="wrap_content"   
  10.         android:layout_height="wrap_content"  
  11.         android:background="@drawable/composer_sleep"  
  12.         android:layout_alignParentLeft="true"  
  13.         android:layout_alignParentBottom="true"  
  14.         />  
  15.   
  16.     <Button android:id="@+id/btn_thought"  
  17.         android:layout_width="wrap_content"   
  18.         android:layout_height="wrap_content"  
  19.         android:background="@drawable/composer_thought"  
  20.         android:layout_alignParentLeft="true"  
  21.         android:layout_alignParentBottom="true"  
  22.         />  
  23.   
  24.     <Button android:id="@+id/btn_music"  
  25.         android:layout_width="wrap_content"   
  26.         android:layout_height="wrap_content"  
  27.         android:background="@drawable/composer_music"  
  28.         android:layout_alignParentLeft="true"  
  29.         android:layout_alignParentBottom="true"  
  30.         />  
  31.   
  32.     <Button android:id="@+id/btn_place"  
  33.         android:layout_width="wrap_content"   
  34.         android:layout_height="wrap_content"  
  35.         android:background="@drawable/composer_place"  
  36.         android:layout_alignParentLeft="true"  
  37.         android:layout_alignParentBottom="true"  
  38.         />  
  39.   
  40.     <Button android:id="@+id/btn_with"  
  41.         android:layout_width="wrap_content"   
  42.         android:layout_height="wrap_content"  
  43.         android:background="@drawable/composer_with"  
  44.         android:layout_alignParentLeft="true"  
  45.         android:layout_alignParentBottom="true"  
  46.         />  
  47.   
  48.     <Button android:id="@+id/btn_camera"  
  49.         android:layout_width="wrap_content"   
  50.         android:layout_height="wrap_content"  
  51.         android:background="@drawable/composer_camera"  
  52.         android:layout_alignParentLeft="true"  
  53.         android:layout_alignParentBottom="true"  
  54.         />  
  55.   
  56.     <Button android:id="@+id/btn_menu"  
  57.         android:layout_width="58dip"   
  58.         android:layout_height="58dip"  
  59.         android:background="@drawable/friends_delete"  
  60.         android:layout_alignParentLeft="true"  
  61.         android:layout_alignParentBottom="true"  
  62.         android:layout_marginLeft="10dip"  
  63.         android:layout_marginBottom="10dip"  
  64.     />  
  65. </RelativeLayout>  



用法: 

Java代码   收藏代码
  1. public void onCreate(Bundle savedInstanceState){  
  2.         super.onCreate(savedInstanceState);  
  3.         setContentView(R.layout.main);  
  4.           
  5.         AnimButtons animButtons=(AnimButtons)findViewById(R.id.animButtons);  
  6.         animButtons.setOnButtonClickListener(new AnimButtons.OnButtonClickListener() {  
  7.               
  8.             @Override  
  9.             public void onButtonClick(View v, int id) {  
  10.                 // TODO Auto-generated method stub  
  11.                 Log.i("tag""id============="+id);  
  12.             }  
  13.         });  
  14.           
  15.     }  


Xml代码   收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TextView  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="@string/hello" />  
  11. <!--  layout_width,layout_height最好是fill_parent参数 -->  
  12.     <com.ql.view.AnimButtons  
  13.         android:id="@+id/animButtons"  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="fill_parent"  
  16.         />  
  17. </LinearLayout>  
分享到:
评论

相关推荐

    仿扇形菜单动画效果

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

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

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

    仿Path菜单效果

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

    转盘菜单效果 iOS 仿建行客户端

    此项目标题"转盘菜单效果 iOS 仿建行客户端"表明,我们将探讨如何在iOS应用程序中实现类似中国建设银行客户端中的旋转菜单功能。这种设计灵感来源于老式电话机的拨号盘,用户可以通过转动菜单来选择不同的功能或选项...

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

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

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

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

    仿苹果pathMenu菜单效果

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

    仿google的导航菜单效果

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

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

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

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

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

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

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

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

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

    仿酷狗菜单栏侧滑效果

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

    iOS 仿建行转盘菜单

    "iOS 仿建行转盘菜单"项目就是一个很好的例子,它展示了如何模仿建设银行应用中的圆形转盘菜单。这种菜单设计不仅美观,而且交互性强,能吸引用户的注意力并提供直观的操作方式。接下来,我们将深入探讨实现这样一个...

    android仿path菜单效果

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

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

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

    仿Path加号效果菜单

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

    仿path动画菜单lib.zip

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

    仿QQ6.0侧滑菜单效果

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

Global site tag (gtag.js) - Google Analytics