android 自定义菜单 使用PopupWindow实现菜单的各种效果

转于：http://blog.****.net/tangron/article/details/20907243

-------------------------------------------------------------------------------------------------

 随着android手机的不断发展，可以在android手机上实现的菜单方式有多种多样，不同的开发者实现的效果也不一样；想要在android手机上调用菜单，方式也是多种多样的，在此列举三类调用菜单的方式：

1、使用ActionBar上“更多”按钮调用菜单(在“文件”项目中定义了二级菜单目录)，如图：

2、自定义按钮调用菜单，如图：

3、使用手机物理按键"menu"调用菜单(部分手机可能无此按键)，在图中显示了两个菜单列表，一个是自定义的菜单列表，一个是使用系统Menu添加的菜单列表，在onMenuOpened()方法中设置相应的返回值(true/false)可以控制是否打开menu菜单列表，如图：

以上三类型的菜单显示为本人总结的方法，当然也有其他很多方法能够实现，具体的实现效果，就要根据具体的需求而定了。

下面我们来看看怎么实现的，首先定义一个ActionBar上的菜单列表布局文件res/menu/main.xml,若没有该文件或文件夹可自行创建

[html] view plaincopy

 

1. <menu xmlns:android="http://schemas.android.com/apk/res/android" >  
2.   
3.     <item  
4.         android:id="@+id/action_settings"  
5.         android:orderInCategory="100"  
6.         android:showAsAction="always"  
7.         android:icon="@drawable/ic_menu_overflow">  
8.         <menu >  
9.             <item   
10.                 android:id="@+id/action_edit"  
11.                 android:showAsAction="always"  
12.                 android:icon="@drawable/ic_edit"  
13.                 android:title="@string/edit_text"/>  
14.             <item   
15.                 android:id="@+id/action_file"  
16.                 android:showAsAction="always"  
17.                 android:icon="@drawable/ic_menu_file"  
18.                 android:title="@string/file">  
19.                 <!-- file的二级目录 -->  
20.                 <menu>  
21.                     <item   
22.                         android:id="@+id/action_share"  
23.                         android:showAsAction="always"  
24.                         android:icon="@drawable/ic_menu_share_holo_light"  
25.                         android:title="@string/share"/>  
26.                     <item   
27.                         android:id="@+id/action_favorite"  
28.                         android:showAsAction="always"  
29.                         android:icon="@drawable/ic_menu_star_holo_light"  
30.                         android:title="@string/favorite"/>  
31.                 </menu>  
32.             </item>  
33.             <item  
34.                 android:id="@+id/action_about"  
35.                 android:showAsAction="always"  
36.                 android:icon="@drawable/ic_menu_about"  
37.                 android:title="@string/about"/>  
38.         </menu>  
39.         </item>  
40.   
41. </menu>  

第一个Item是用来放在ActionBar上的入口，通过这个入口可以调用我们定义的菜单栏；

属性介绍：

• showAsAction:设置ActionBar中menu的显示方式
• icon:item上的图标
• title：文本信息
  

然后我们需要在自定义一个下拉菜单布局文件

[html] view plaincopy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="wrap_content"  
5.     android:orientation="vertical"  
6.     android:background="@drawable/bitmap_book_read_chapterlist_repeat" >  
7.     <TextView   
8.         android:id="@+id/textview_edit"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:drawableLeft="@drawable/ic_edit"  
12.         android:text="@string/edit_text"  
13.         android:gravity="center_vertical"  
14.         android:textColor="#ff0000"/>  
15.     <TextView   
16.         android:id="@+id/textview_file"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:drawableLeft="@drawable/ic_menu_file"  
20.         android:text="@string/file"  
21.         android:gravity="center_vertical"  
22.         android:textColor="#ff0000"/>  
23.     <TextView   
24.         android:id="@+id/textview_about"  
25.         android:layout_width="wrap_content"  
26.         android:layout_height="wrap_content"  
27.         android:drawableLeft="@drawable/ic_menu_about"  
28.         android:text="@string/about"  
29.         android:gravity="center_vertical"  
30.         android:textColor="#ff0000"/>  
31.   
32. </LinearLayout>  

布局文件内容大致介绍一下，设置了整个view的一个背景，定义了三个TextView用来显示菜单的内容，在java代码里面也实现了三个按钮的点击事件。

然后，我在自定义的下拉菜单上实现了一个渐进渐出的动画效果，代码很简单

渐入动画popup_window_enter.xml

[html] view plaincopy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="1000"/>  
4.     <alpha android:fromAlpha="0" android:toAlpha="1.0" android:duration="1000"/>  
5.   
6. </set>  

渐出动画popup_window_exit.xml

[html] view plaincopy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="1000"/>  
4.     <alpha android:fromAlpha="1.0" android:toAlpha="0" android:duration="1000"/>  
5.   
6. </set>  

下面就进入主题了，如何在代码中实现整个menu效果MainActivity.java

[html] view plaincopy

 

1. package com.example.menutype;  
2.   
3. import android.app.ActionBar.LayoutParams;  
4. import android.app.Activity;  
5. import android.content.Context;  
6. import android.os.Bundle;  
7. import android.view.Gravity;  
8. import android.view.LayoutInflater;  
9. import android.view.Menu;  
10. import android.view.MenuItem;  
11. import android.view.View;  
12. import android.view.View.OnClickListener;  
13. import android.widget.Button;  
14. import android.widget.PopupWindow;  
15. import android.widget.PopupWindow.OnDismissListener;  
16. import android.widget.TextView;  
17. import android.widget.Toast;  
18.   
19. /**  
20.  *   
21.  * @author tr  
22.  * @time 2014-3-10  
23.  * @description 自定义菜单，下拉菜单样式，添加动画效果，重写onMenuOpened()方法，自定义"menu"按键弹出菜单  
24.  */  
25. public class MainActivity extends Activity implements OnClickListener{  
26.       
27.     private static Toast mToast;  
28.     private static Context mContext;  
29.   
30.     private PopupWindow popupWindow ;  
31.       
32.     private Button btn_popupwindow;  
33.       
34.     private View mPopupWindowView;  
35.   
36.     @Override  
37.     protected void onCreate(Bundle savedInstanceState) {  
38.         super.onCreate(savedInstanceState);  
39.         setContentView(R.layout.activity_main);  
40.           
41.         mContext = this;  
42.           
43.         btn_popupwindow = (Button) findViewById(R.id.btn_popupwindow);  
44.         btn_popupwindow.setOnClickListener(this);  
45.           
46.         initPopupWindow();  
47.           
48.     }  
49.   
50.     @Override  
51.     public boolean onCreateOptionsMenu(Menu menu) {  
52.         /**actionBar上更多按钮*/  
53.         getMenuInflater().inflate(R.menu.main, menu);  
54.           
55.           
56.           
57.         /**点击menu，弹出菜单*/  
58.           
59.         /*  
60.          *   
61.          * add()方法的四个参数，依次是：  
62.          *   
63.          * 1、组别，如果不分组的话就写Menu.NONE,  
64.          *   
65.          * 2、Id，这个很重要，Android根据这个Id来确定不同的菜单  
66.          *   
67.          * 3、顺序，那个菜单现在在前面由这个参数的大小决定  
68.          *   
69.          * 4、文本，菜单的显示文本  
70.          */  
71.   
72.         menu.add(Menu.NONE, Menu.FIRST + 1, 1, getResource(R.string.edit_text)).setIcon(  
73.   
74.         R.drawable.ic_edit);  
75.   
76.         // setIcon()方法为菜单设置图标，这里使用的是系统自带的图标，同学们留意一下,以  
77.   
78.         // android.R开头的资源是系统提供的，我们自己提供的资源是以R开头的  
79.   
80.         menu.add(Menu.NONE, Menu.FIRST + 2, 2, getResource(R.string.file)).setIcon(  
81.   
82.         R.drawable.ic_menu_file);  
83.   
84.         menu.add(Menu.NONE, Menu.FIRST + 3, 3, getResource(R.string.about)).setIcon(  
85.   
86.         R.drawable.ic_menu_about);  
87.   
88.         return true;  
89.     }  
90.       
91.       
92.     /**菜单打开时调用*/  
93.     @Override  
94.     public boolean onMenuOpened(int featureId, Menu menu) {  
95.         // TODO Auto-generated method stub  
96.         showToast("menu菜单打开："+featureId);  
97.         //点击"menu"按钮打开  
98.         if(featureId == 0){  
99.             showPopupWindow();  
100.         }  
101.         return super.onMenuOpened(featureId, menu);// 返回为true 则显示系统menu  
102. //      return false;  
103.     }  
104.   
105.     /**menu菜单关闭时调用*/  
106.     @Override  
107.     public void onOptionsMenuClosed(Menu menu) {  
108.         // TODO Auto-generated method stub  
109.         super.onOptionsMenuClosed(menu);  
110.           
111.         showToast("menu菜单关闭");  
112.     }  
113.   
114.     @Override  
115.     public boolean onOptionsItemSelected(MenuItem item) {  
116.         // TODO Auto-generated method stub  
117.         switch(item.getItemId()){  
118.         case Menu.FIRST + 1:  
119.         case R.id.action_edit:  
120.             showToast(getResource(R.string.edit_text));  
121.             break;  
122.         case Menu.FIRST + 2:  
123.         case R.id.action_file:  
124.             showToast(getResource(R.string.file));  
125.             break;  
126.         case R.id.action_favorite:  
127.             showToast(getResource(R.string.favorite));  
128.             break;  
129.         case R.id.action_share:  
130.             showToast(getResource(R.string.share));  
131.             break;  
132.         case Menu.FIRST + 3:  
133.         case R.id.action_about:  
134.             showToast(getResource(R.string.about));  
135.             break;  
136.         }  
137.         return super.onOptionsItemSelected(item);  
138.     }  
139.   
140.     @Override  
141.     public void onClick(View v) {  
142.           
143.         switch(v.getId()){  
144.         case R.id.btn_popupwindow:  
145.   
146.             showPopupWindow();  
147.             break;  
148.         case R.id.textview_about:  
149.             showToast(getResource(R.string.about));  
150.             popupWindow.dismiss();  
151.             break;  
152.         case R.id.textview_edit:  
153.             showToast(getResource(R.string.edit_text));  
154.             popupWindow.dismiss();  
155.             break;  
156.         case R.id.textview_file:  
157.             showToast(getResource(R.string.file));  
158.             popupWindow.dismiss();  
159.             break;  
160.         }  
161.     }  
162.       
163.     /**显示popupwindow*/  
164.     private void showPopupWindow(){  
165.   
166.         if(!popupWindow.isShowing()){  
167.             popupWindow.showAsDropDown(btn_popupwindow, btn_popupwindow.getLayoutParams().width/2, 0);  
168.   
169.     //将popupwindow放置在屏幕下方，类似默认菜单弹出样式  
170.             //popupWindow.showAtLocation(btn_popupwindow, Gravity.BOTTOM, btn_popupwindow.getLayoutParams().width/2, 0);  
171.  }else{  
172.             popupWindow.dismiss();  
173.         }  
174.     }  
175.       
176.       
177.     /**  
178.      * 初始化popupwindow  
179.      */  
180.     private void initPopupWindow(){  
181.         initPopupWindowView();  
182.         //初始化popupwindow，绑定显示view，设置该view的宽度/高度  
183.         popupWindow = new PopupWindow(mPopupWindowView,LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);  
184.         popupWindow.setFocusable(true);  
185.         popupWindow.setOutsideTouchable(true);  
186.         // 这个是为了点击“返回Back”也能使其消失，并且并不会影响你的背景；使用该方法点击窗体之外，才可关闭窗体  
187.         popupWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.bitmap_book_read_chapterlist_repeat));  
188.         //Background不能设置为null，dismiss会失效  
189. //      popupWindow.setBackgroundDrawable(null);  
190.         //设置渐入、渐出动画效果  
191. //      popupWindow.setAnimationStyle(R.style.popupwindow);  
192.         popupWindow.update();  
193.         //popupWindow调用dismiss时触发，设置了setOutsideTouchable(true)，点击view之外/按键back的地方也会触发  
194.         popupWindow.setOnDismissListener(new OnDismissListener() {  
195.               
196.             @Override  
197.             public void onDismiss() {  
198.                 // TODO Auto-generated method stub  
199. //              showToast("关闭popupwindow");  
200.             }  
201.         });  
202.     }  
203.   
204.     /**  
205.      * 初始化popupwindowView,监听view中的textview点击事件  
206.      */  
207.     private void initPopupWindowView(){  
208.   
209.         mPopupWindowView = LayoutInflater.from(mContext).inflate(R.layout.popupwindowmenu, null);  
210.         TextView textview_edit = (TextView) mPopupWindowView.findViewById(R.id.textview_edit);  
211.         textview_edit.setOnClickListener(this);  
212.         TextView textview_file = (TextView) mPopupWindowView.findViewById(R.id.textview_file);  
213.         textview_file.setOnClickListener(this);  
214.         TextView textview_about = (TextView) mPopupWindowView.findViewById(R.id.textview_about);  
215.         textview_about.setOnClickListener(this);  
216.     }  
217.       
218.       
219.     /**获取string.xml资源*/  
220.     public String getResource(int id){  
221.         return getResources().getString(id);  
222.     }  
223.       
224.     /**Toast单例模式*/  
225.     public static Toast getInstance(){  
226.         if(mToast == null){  
227.             mToast = Toast.makeText(mContext, "", Toast.LENGTH_LONG);  
228.             mToast.setGravity(Gravity.CENTER, 0, 0);  
229.         }  
230.         return mToast;  
231.     }  
232.       
233.     /**显示toast*/  
234.     public void showToast(String str){  
235.         Toast toast = getInstance();  
236.         toast.setText(str);  
237.         toast.show();  
238.           
239.     }  
240.   
241. }  

源代码，点击下载