android 底部弹出菜单(带透明背景)

来源：http://blog.csdn.net/top_code/article/details/10285997#comments

最近项目中需要在界面的底部弹出一个向上弹出的菜单界面，并且带渐变的透明背景，跟大家分享一下！

运行效果图：

点击 分享 弹出 底部菜单

菜单界面 share_popup_menu.xml

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@drawable/transparent_bg" >  
6.   
7.     <LinearLayout  
8.         android:id="@+id/ll_popup"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         android:layout_alignParentBottom="true"  
12.         android:background="@color/popup_bg"  
13.         android:orientation="vertical" >  
14.   
15.         <RelativeLayout  
16.             android:id="@+id/rl_weixin"  
17.             android:layout_width="fill_parent"  
18.             android:layout_marginLeft="20dp"  
19.             android:layout_marginRight="20dp"  
20.             android:layout_height="@dimen/detail_menu_item_height"  
21.             android:layout_gravity="center_horizontal"  
22.             android:layout_marginTop="@dimen/detail_menu_margin_top_up"  
23.             android:background="@color/light_black" >  
24.   
25.             <ImageView  
26.                 android:layout_width="wrap_content"  
27.                 android:layout_height="wrap_content"  
28.                 android:layout_centerVertical="true"  
29.                 android:src="@drawable/icon_wechat"   
30.                 android:layout_toLeftOf="@+id/tv_weixin"  
31.                 android:contentDescription="@string/app_name"/>  
32.   
33.             <TextView  
34.                 android:id="@+id/tv_weixin"  
35.                 android:layout_width="wrap_content"  
36.                 android:layout_height="wrap_content"  
37.                 android:layout_centerInParent="true"  
38.                 android:layout_marginLeft="15dp"  
39.                 android:text="@string/share_to_weixin"  
40.                 android:textColor="@color/white" />  
41.         </RelativeLayout>  
42.           
43.         <RelativeLayout  
44.             android:id="@+id/rl_weibo"  
45.             android:layout_width="fill_parent"  
46.             android:layout_marginLeft="20dp"  
47.             android:layout_marginRight="20dp"  
48.             android:layout_height="@dimen/detail_menu_item_height"  
49.             android:layout_gravity="center_horizontal"  
50.             android:layout_marginTop="@dimen/detail_menu_margin_top_up"  
51.             android:background="@color/light_black" >  
52.   
53.             <ImageView  
54.                 android:layout_width="wrap_content"  
55.                 android:layout_height="wrap_content"  
56.                 android:layout_centerVertical="true"  
57.                 android:src="@drawable/icon_weibo"   
58.                 android:layout_toLeftOf="@+id/tv_weibo"  
59.                 android:contentDescription="@string/app_name"/>  
60.   
61.             <TextView  
62.                 android:id="@+id/tv_weibo"  
63.                 android:layout_width="wrap_content"  
64.                 android:layout_height="wrap_content"  
65.                 android:layout_centerInParent="true"  
66.                 android:layout_marginLeft="15dp"  
67.                 android:text="@string/share_to_weibo"  
68.                 android:textColor="@color/white" />  
69.         </RelativeLayout>  
70.   
71.         <RelativeLayout  
72.             android:id="@+id/rl_duanxin"  
73.             android:layout_width="fill_parent"  
74.             android:layout_marginLeft="20dp"  
75.             android:layout_marginRight="20dp"  
76.             android:layout_height="@dimen/detail_menu_item_height"  
77.             android:layout_gravity="center_horizontal"  
78.             android:layout_marginTop="@dimen/detail_menu_margin_top_up"  
79.             android:background="@color/light_black" >  
80.   
81.             <ImageView  
82.                 android:layout_width="wrap_content"  
83.                 android:layout_height="wrap_content"  
84.                 android:layout_centerVertical="true"  
85.                 android:src="@drawable/icon_message"   
86.                 android:layout_toLeftOf="@+id/tv_duanxin"  
87.                 android:contentDescription="@string/app_name"/>  
88.   
89.             <TextView  
90.                 android:id="@+id/tv_duanxin"  
91.                 android:layout_width="wrap_content"  
92.                 android:layout_height="wrap_content"  
93.                 android:layout_centerInParent="true"  
94.                 android:layout_marginLeft="15dp"  
95.                 android:text="@string/share_to_duanxin"  
96.                 android:textColor="@color/white" />  
97.         </RelativeLayout>  
98.   
99.         <Button  
100.             android:id="@+id/bt_cancle"  
101.             android:layout_width="fill_parent"  
102.             android:layout_marginLeft="20dp"  
103.             android:layout_marginRight="20dp"  
104.             android:layout_height="@dimen/detail_menu_item_height"  
105.             android:layout_gravity="center"  
106.             android:layout_marginBottom="@dimen/detail_menu_margin_top"  
107.             android:layout_marginTop="@dimen/detail_menu_margin_top"  
108.             android:background="@color/dark_white"  
109.             android:text="@string/cancel"  
110.             android:textColor="@color/white" />  
111.     </LinearLayout>  
112.   
113. </RelativeLayout>  

主界面MainActivity.java

[java] view plain copy

1. package com.example.popupdemo;  
2.   
3. import android.app.Activity;  
4. import android.graphics.drawable.BitmapDrawable;  
5. import android.os.Bundle;  
6. import android.view.Gravity;  
7. import android.view.View;  
8. import android.view.View.OnClickListener;  
9. import android.view.ViewGroup.LayoutParams;  
10. import android.view.animation.AnimationUtils;  
11. import android.widget.Button;  
12. import android.widget.LinearLayout;  
13. import android.widget.PopupWindow;  
14. import android.widget.RelativeLayout;  
15.   
16. public class MainActivity extends Activity implements OnClickListener {  
17.   
18.     private PopupWindow mpopupWindow;  
19.     private Button bt_share;  
20.   
21.     @Override  
22.     protected void onCreate(Bundle savedInstanceState) {  
23.         super.onCreate(savedInstanceState);  
24.         setContentView(R.layout.activity_main);  
25.           
26.         findView();  
27.     }  
28.   
29.     private void findView() {  
30.         bt_share = (Button) findViewById(R.id.bt_share);  
31.         bt_share.setOnClickListener(this);  
32.     }  
33.   
34.     @Override  
35.     public void onClick(View v) {  
36.         switch (v.getId()) {  
37.         case R.id.bt_share:  
38.               
39.             showPopMenu();  
40.               
41.             break;  
42.         case R.id.rl_weixin:  
43.               
44.             mpopupWindow.dismiss();  
45.             break;  
46.         case R.id.rl_weibo:  
47.                       
48.             mpopupWindow.dismiss();  
49.             break;  
50.         case R.id.rl_duanxin:  
51.               
52.             mpopupWindow.dismiss();  
53.             break;  
54.         case R.id.bt_cancle:  
55.               
56.             mpopupWindow.dismiss();  
57.             break;  
58.         default:  
59.             break;  
60.         }  
61.     }  
62.   
63.     private void showPopMenu() {  
64.         View view = View.inflate(getApplicationContext(), R.layout.share_popup_menu, null);  
65.         RelativeLayout rl_weixin = (RelativeLayout) view.findViewById(R.id.rl_weixin);  
66.         RelativeLayout rl_weibo = (RelativeLayout) view.findViewById(R.id.rl_weibo);  
67.         RelativeLayout rl_duanxin = (RelativeLayout) view.findViewById(R.id.rl_duanxin);  
68.         Button bt_cancle = (Button) view.findViewById(R.id.bt_cancle);  
69.   
70.         rl_weixin.setOnClickListener(this);  
71.         rl_weibo.setOnClickListener(this);  
72.         rl_duanxin.setOnClickListener(this);  
73.         bt_cancle.setOnClickListener(this);  
74.       
75.         view.setOnClickListener(new OnClickListener() {  
76.               
77.             @Override  
78.             public void onClick(View v) {  
79.                   
80.                 mpopupWindow.dismiss();  
81.             }  
82.         });  
83.           
84.         view.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_in));  
85.         LinearLayout ll_popup = (LinearLayout) view.findViewById(R.id.ll_popup);  
86.         ll_popup.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_bottom_in));  
87.           
88.         if(mpopupWindow==null){  
89.             mpopupWindow = new PopupWindow(this);  
90.             mpopupWindow.setWidth(LayoutParams.MATCH_PARENT);  
91.             mpopupWindow.setHeight(LayoutParams.MATCH_PARENT);  
92.             mpopupWindow.setBackgroundDrawable(new BitmapDrawable());  
93.   
94.             mpopupWindow.setFocusable(true);  
95.             mpopupWindow.setOutsideTouchable(true);  
96.         }  
97.           
98.         mpopupWindow.setContentView(view);  
99.         mpopupWindow.showAtLocation(bt_share, Gravity.BOTTOM, 0, 0);  
100.         mpopupWindow.update();  
101.     }  
102. }  

渐变动画

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <alpha xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:duration="400"  
4.     android:fromAlpha="0.0"  
5.     android:toAlpha="1.0" />  

位移动画

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <translate xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:duration="400"  
4.     android:fromYDelta="100%"  
5.     android:interpolator="@android:anim/decelerate_interpolator"  
6.     android:toYDelta="0" />  

代码大家自己下载下来慢慢看吧

工程下载地址：http://download.csdn.net/detail/fx_sky/6006143