Android悬浮缩放菜单的实现【转】

来自：http://blog.csdn.net/ywl5320/article/details/50807680

先看效果图：（文章结尾有Demo下载地址）

最近在做一个电商平台的应用，里面有一个效果就是在商品列表上层有一个圆形菜单，在列表滑动时菜单会收缩滑动停止时会展开。刚看到这个效果时感觉不好实现，首先是这个半圆，然后还会收缩变小，但是当我们把这个菜单拆分开来后就很好理解了：

1、首先是菜单背景那个圆，其实就是一个实体圆，只是向右偏离了一段距离，所以就呈现了半圆的效果；

2、然后是收缩效果，其实也不难，只是位移动画和缩放动画的合用而已，在大小缩放的同时再向左便宜就可以了；

3、然后就是里面的菜单项，也是用了位移，缩放和透明度的动画合集实现的。

原理就是这样的，只是具体位移多少，缩放多少就看自己的需求然后进行测试了。这里用到了View.animate().(...)属性动画。这个动画很简单也很实用，只是在3.0以后才有的，不过现在大多数都是基于4.0开发的APP，所以这个属性动画可以放心的用的。

现在看看实现步骤：

一、首先是绘制菜单背景圆：

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape  
3.     xmlns:android= "http://schemas.android.com/apk/res/android"  
4.     android:shape= "oval"  
5.     android:useLevel= "false" >  
6.     <solid android:color= "#FF4081" />  
7. </shape>  

这里用shape就可以绘制一个实心圆了，不用使用图片。
二、菜单布局：

[html]  view plain  copy

 

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="${relativePackage}.${activityClass}" >  
6.     <ListView   
7.         android:id="@+id/listview"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"  
10.         >  
11.     </ListView>  
12.     <RelativeLayout  
13.         android:id="@+id/rl_circle_menu"  
14.         android:layout_width="162dp"  
15.         android:layout_height="162dp"  
16.         android:clickable="true"  
17.         android:background="@drawable/circle_drawable"  
18.         android:layout_alignParentBottom="true"  
19.         android:layout_alignParentRight="true"  
20.         android:layout_marginBottom="24dp"  
21.         android:layout_marginRight="-92dp">  
22.         <ImageView  
23.             android:id="@+id/iv_show"  
24.             android:layout_width="26dp"  
25.             android:layout_height="34dp"  
26.             android:src="@drawable/icon_show"  
27.             android:layout_centerVertical="true"  
28.             android:layout_marginLeft="8dp"/>  
29.         <ImageView  
30.             android:id="@+id/iv_home"  
31.             android:layout_width="26dp"  
32.             android:layout_height="34dp"  
33.             android:src="@drawable/icon_homepage"  
34.             android:layout_toRightOf="@+id/iv_show"  
35.             android:layout_above="@+id/iv_show"  
36.             android:layout_marginBottom="4dp"/>  
37.   
38.         <ImageView  
39.             android:id="@+id/iv_find"  
40.             android:layout_width="26dp"  
41.             android:layout_height="34dp"  
42.             android:src="@drawable/icon_find"  
43.             android:layout_toRightOf="@+id/iv_show"  
44.             android:layout_below="@+id/iv_show"  
45.             android:layout_marginTop="4dp"/>  
46.   
47.         <ImageView  
48.             android:id="@+id/iv_home_menu"  
49.             android:layout_width="26dp"  
50.             android:layout_height="34dp"  
51.             android:src="@drawable/icon_menu"  
52.             android:layout_centerVertical="true"  
53.             android:layout_marginRight="8dp"  
54.             android:layout_alignParentRight="true"/>  
55.           
56.     </RelativeLayout>  
57.   
58. </RelativeLayout>  

结构就是使用相对布局，底层一个listview或者是viewpager等，然后在右下角再使用一个相对布局来实现菜单栏的布局就OK了。

三、动画的实现：

1、展开动画：

[java]  view plain  copy

 

1. public void openMenu() {  
2.         reCircleMenu.animate().scaleX(1f).scaleY(1f).translationX(0).setDuration(300).start();  
3.         mivShow.animate().alpha(1).scaleX(1f).scaleY(1f).translationX(0f).setDuration(300).start();  
4.         mivHome.animate().alpha(1).scaleX(1f).scaleY(1f).translationX(0).translationY(0).setDuration(300).start();  
5.         mivfind.animate().alpha(1).scaleX(1f).scaleY(1f).translationX(0).translationY(0).setDuration(300).start();  
6.         mivMenu.animate().scaleX(1f).scaleY(1f).translationX(0).setDuration(300).start();  
7.     }  

主要就是几种动画（透明度、缩放、位移）的集合实现，展开后的效果就是刚开始初始化的效果，所以这里把透明度、位移、缩放还原就行了。

2、缩放动画：

[java]  view plain  copy

 

1. public void closeMenu() {  
2.         reCircleMenu.animate().scaleX(0.3f).scaleY(0.3f).translationX(-dip2px(50)).setDuration(300).start();  
3.         mivShow.animate().alpha(0).scaleX(10 / 3f).scaleY(10 / 3f).translationX(dip2px(60)).setDuration(300).start();  
4.         mivHome.animate().alpha(0).scaleX(10 / 3f).scaleY(10 / 3f).translationX(dip2px(35)).translationY(dip2px(40)).setDuration(300)  
5.                 .start();  
6.         mivfind.animate().alpha(0).scaleX(10 / 3f).scaleY(10 / 3f).translationX(dip2px(35)).translationY(-dip2px(40)).setDuration(300)  
7.                 .start();  
8.         mivMenu.animate().scaleX(10 / 3f).scaleY(10 / 3f).translationX(-dip2px(60)).setDuration(300).start();  
9.     }  

这个就稍微复杂点，首先要同个多次测试找到合适的位移距离，其他的都不难。

四、滑动的监听：

[java]  view plain  copy

 

1. listView.setOnScrollListener(new OnScrollListener() {  
2.   
3.             @Override  
4.             public void onScrollStateChanged(AbsListView view, int scrollState) {  
5.                 if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_TOUCH_SCROLL) {  
6.                     System.out.println("HOME PAGE SCROLL_STATE_TOUCH_SCROLL----");  
7.                     // isScrool = true;  
8.                     closeMenu();  
9.                 } else if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_FLING) {  
10.                     System.out.println("HOME PAGE SCROLL_STATE_FLING");  
11.                 } else if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {  
12.                     System.out.println("HOME PAGE SCROLL_STATE_IDLE");  
13.                     // isScrool = false;  
14.                     openMenu();  
15.                 }  
16.   
17.             }  
18.   
19.             @Override  
20.             public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {  
21.                 // TODO Auto-generated method stub  
22.   
23.             }  
24.         });  

在刚开始滑动时就关闭菜单，滑动停止时打开菜单即可，这个监听可以放到任何可以监听到滑动状态的事件中，不止是在listview中。

通过以上步骤就实现了如效果图的效果，哈哈 现在想想还是多么简单的。很多问题看似复杂，通过分解成小问题后，就不是什么大问题了，解决办法就很多了，然后大问题也就迎刃而解了！ 实例源码下载