Android之用PopupWindow实现弹出菜单

   在使用UC-WebBrowser时，你会发现它的弹出菜单跟系统自带的菜单不一样。它实现更多菜单选项的显示和分栏。其实，它的本身是PopupWindow或者是AlertDialog对话框，在里面添加两个GridView控件，一个是菜单标题栏，一个是菜单选项。菜单选项视图的切换可以通过适配器的变换，轻松地实现。该实例下载路径：http://download.csdn.net/source/3275759

          一、运行截图：

           

 

             

        二、实现要点：

        （1）屏蔽系统弹出的菜单：

          1、首先创建至少一个系统的菜单选项

        

view plain

1. @Override  
2.     public boolean onCreateOptionsMenu(Menu menu) {  
3.           
4.         menu.add("menu");  
5.         return super.onCreateOptionsMenu(menu);  
6.     }  

          2、在onMenuOpened方法里显示自己的菜单视图，并返回FALSE。

       

view plain

1. @Override  
2.     public boolean onMenuOpened(int featureId, Menu menu) {  
3.   
4.         myMenu.showAtLocation(findViewById(R.id.layout), Gravity.BOTTOM, 0,0);  
5.           
6.         return false;   // true--显示系统自带菜单；false--不显示。  
7.     }  

        （2）点击菜单栏，切换菜单视图时，只要重新设置当前的适配器对象就可以。

        

view plain

1. gv_body.setAdapter(bodyAdapter[arg2]);  //改变选项视图  

         （3）继承PopupWindow，重写一个类实现弹出对话框，主要是为了更好更简便实现弹出菜单的样式和事件响应等等。

         

view plain

1. public class MyDefinedMenu extends PopupWindow { 。。。}  

        三、 具体代码如下：

        （1）布局：

          

view plain

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/layout"  
4.     android:orientation="vertical"  
5.     android:layout_width="fill_parent"  
6.     android:layout_height="fill_parent"  
7.     >  
8. </LinearLayout>  

          （2）程序代码

           1、主类：MyMenu

           

view plain

1. package com.myandroid.test;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.app.Activity;  
7. import android.os.Bundle;  
8. import android.view.Gravity;  
9. import android.view.Menu;  
10. import android.view.View;  
11. import android.widget.AdapterView;  
12. import android.widget.AdapterView.OnItemClickListener;  
13. import android.widget.Toast;  
14.   
15. public class MyMenu extends Activity {  
16.     private List<String> titles;  //标题栏  
17.     private List<List<String>> item_names;  //选项名称  
18.     private List<List<Integer>> item_images;    //选项图标  
19.     private MyDefinedMenu myMenu;   //弹出菜单  
20.       
21.       
22.     /** Called when the activity is first created. */  
23.     @Override  
24.     public void onCreate(Bundle savedInstanceState) {  
25.         super.onCreate(savedInstanceState);  
26.         setContentView(R.layout.main);  
27.           
28.         //弹出菜单标题栏  
29.         titles = addItems(new String[]{"菜单一", "菜单二", "菜单三"});  
30.         //选项图标  
31.         item_images = new ArrayList<List<Integer>>();  
32.         item_images.add(addItems(new Integer[]{R.drawable.bag,  
33.             R.drawable.bluetooth, R.drawable.earth, R.drawable.email}));  
34.         item_images.add(addItems(new Integer[]{R.drawable.map,  
35.                 R.drawable.news, R.drawable.reader, R.drawable.sound, R.drawable.tape}));  
36.         item_images.add( addItems(new Integer[]{R.drawable.telephone,  
37.                 R.drawable.bluetooth, R.drawable.earth, R.drawable.email}));  
38.         //选项名称  
39.         item_names = new ArrayList<List<String>>();  
40.         item_names.add(addItems(new String[]{"购物", "蓝牙", "游览器", "邮件"}));  
41.         item_names.add(addItems(new String[]{"地图", "新闻", "阅读器", "音箱", "录音"}));  
42.         item_names.add(addItems(new String[]{"电话", "蓝牙", "阅读器", "邮箱"}));  
43.         //创建弹出菜单对象  
44.         myMenu = new MyDefinedMenu(this, titles, item_names,   
45.                 item_images, new ItemClickEvent());  
46.           
47.     }  
48.       
49.     /** 
50.      * 转换为List<String> 
51.      * @param values 
52.      * @return 
53.      */  
54.     private List<String> addItems(String[] values) {  
55.           
56.         List<String> list = new ArrayList<String>();  
57.         for (String var : values) {  
58.             list.add(var);  
59.         }  
60.           
61.         return list;  
62.     }  
63.       
64.     /** 
65.      * 转换为List<Integer> 
66.      * @param values 
67.      * @return 
68.      */  
69.     private List<Integer> addItems(Integer[] values) {  
70.           
71.         List<Integer> list = new ArrayList<Integer>();  
72.         for (Integer var : values) {  
73.             list.add(var);  
74.         }  
75.           
76.         return list;  
77.     }  
78.       
79.     @Override  
80.     public boolean onCreateOptionsMenu(Menu menu) {  
81.           
82.         menu.add("menu");  
83.         return super.onCreateOptionsMenu(menu);  
84.     }  
85.   
86.     @Override  
87.     public boolean onMenuOpened(int featureId, Menu menu) {  
88.   
89.         myMenu.showAtLocation(findViewById(R.id.layout), Gravity.BOTTOM, 0,0);  
90.           
91.         return false;   // true--显示系统自带菜单；false--不显示。  
92.     }  
93.       
94.     /** 
95.      * 菜单选项点击事件 
96.      * @author Kobi 
97.      * 
98.      */  
99.     class ItemClickEvent implements OnItemClickListener {  
100.   
101.         @Override  
102.         public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,  
103.                 long arg3) {  
104.             //显示点击的是哪个菜单哪个选项。  
105.             Toast.makeText(MyMenu.this, "Menu: " +   
106.                     titles.get(myMenu.getTitleIndex()) +   
107.                     " Item: " + item_names.get(myMenu.getTitleIndex()).get(arg2),  
108.                     Toast.LENGTH_SHORT).show();  
109.             myMenu.dismiss();   //菜单消失  
110.         }  
111.           
112.     }  
113.       
114.       
115.   
116.       
117.       
118. }  

            2、弹出菜单类：MyDefinedMenu、

          

view plain

1. package com.myandroid.test;  
2.   
3. import java.util.List;  
4.   
5. import com.myandroid.test.MyMenu.ItemClickEvent;  
6. import android.content.Context;  
7. import android.graphics.Color;  
8. import android.util.Log;  
9. import android.view.View;  
10. import android.view.ViewGroup.LayoutParams;  
11. import android.widget.AdapterView;  
12. import android.widget.AdapterView.OnItemClickListener;  
13. import android.widget.GridView;  
14. import android.widget.LinearLayout;  
15. import android.widget.PopupWindow;  
16.   
17.   
18.   
19. public class MyDefinedMenu extends PopupWindow {   
20.       
21.     private LinearLayout layout;    //总的布局  
22.     private GridView gv_title;      //菜单栏  
23.     private GridView gv_body;       //选项视图  
24.     private BodyAdatper[] bodyAdapter;  //选项适配器  
25.     private TitleAdatper titleAdapter;  //标题适配器  
26.     private Context context;            //上下文  
27.     private int titleIndex;             //菜单序号  
28.       
29.       
30.       
31.     public MyDefinedMenu(Context context, List<String> titles,   
32.             List<List<String>> item_names, List<List<Integer>> item_images,  
33.             ItemClickEvent itemClickEvent) {  
34.           
35.         super(context);  
36.         this.context = context;  
37.           
38.         //布局框架  
39.         layout = new LinearLayout(context);       
40.         layout.setOrientation(LinearLayout.VERTICAL);  
41.         layout.setLayoutParams(new LayoutParams(  
42.                 LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));  
43.           
44.         //菜单栏  
45.         titleIndex = 0;  
46.         gv_title = new GridView(context);  
47.         titleAdapter = new TitleAdatper(context, titles);  
48.         gv_title.setAdapter(titleAdapter);  
49.         gv_title.setLayoutParams(new LayoutParams(  
50.                 LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));  
51.         gv_title.setNumColumns(titles.size());  //菜单个数  
52.         gv_title.setBackgroundColor(Color.WHITE);  
53.           
54.         //选项视图  
55.         bodyAdapter = new BodyAdatper[item_names.size()];   //各个视图适配器  
56.         for (int i = 0; i < item_names.size(); i++) {  
57.             bodyAdapter[i] = new BodyAdatper(context, item_names.get(i), item_images.get(i));  
58.         }  
59.         gv_body = new GridView(context);  
60.         gv_body.setNumColumns(4);   //每行显示4个选项  
61.         gv_body.setBackgroundColor(Color.TRANSPARENT);  
62.         gv_body.setAdapter(bodyAdapter[0]); //设置适配器  
63.           
64.         //菜单项切换  
65.         gv_title.setOnItemClickListener(new OnItemClickListener() {  
66.   
67.             @Override  
68.             public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,  
69.                     long arg3) {  
70.                 titleIndex = arg2;  //记录当前选中菜单项序号  
71.                 titleAdapter.setFocus(arg2);  
72.                 gv_body.setAdapter(bodyAdapter[arg2]);  //改变选项视图  
73.   
74.             }  
75.         });  
76.           
77.         //设置选项点击事件  
78.         gv_body.setOnItemClickListener(itemClickEvent);  
79.           
80.         //添加标题栏和选项  
81.         layout.addView(gv_title);  
82.         layout.addView(gv_body);  
83.           
84.         // 添加菜单视图  
85.         this.setContentView(layout);  
86.         this.setWidth(LayoutParams.FILL_PARENT);  
87.         this.setHeight(LayoutParams.WRAP_CONTENT);  
88.         this.setFocusable(true);// menu菜单获得焦点 如果没有获得焦点menu菜单中的控件事件无法响应    
89.           
90.     }  
91.       
92.     /** 
93.      * 获取当前选中菜单项 
94.      * @return  菜单项序号 
95.      */  
96.     public int getTitleIndex() {  
97.           
98.         return titleIndex;  
99.     }  
100.   
101.       
102. }  

           3、菜单栏适配器：TitleAdatper

         

view plain

1. package com.myandroid.test;  
2.   
3. import java.util.List;  
4.   
5. import android.content.Context;  
6. import android.graphics.Color;  
7. import android.view.Gravity;  
8. import android.view.View;  
9. import android.view.ViewGroup;  
10. import android.view.ViewGroup.LayoutParams;  
11. import android.widget.BaseAdapter;  
12. import android.widget.GridView;  
13. import android.widget.TextView;  
14.   
15. public class TitleAdatper extends BaseAdapter {  
16.     private List<String> titles;  
17.     private Context context;  
18.     private final TextView[] tv_titels;  
19.       
20.       
21.     public TitleAdatper(Context context, List<String> titles) {  
22.         this.context = context;  
23.         this.titles = titles;  
24.         tv_titels = new TextView[titles.size()];  
25.     }  
26.   
27.     @Override  
28.     public int getCount() {  
29.         // TODO Auto-generated method stub  
30.         return titles.size();  
31.     }  
32.   
33.     @Override  
34.     public Object getItem(int position) {  
35.         // TODO Auto-generated method stub  
36.         return position;  
37.     }  
38.   
39.     @Override  
40.     public long getItemId(int position) {  
41.         // TODO Auto-generated method stub  
42.         return position;  
43.     }  
44.       
45.     /** 
46.      * 选中后，改变菜单颜色。 
47.      * @param position 
48.      */  
49.     public void setFocus(int position) {  
50.           
51.         for (int i = 0; i < titles.size(); i++) {  
52.               
53.             tv_titels[i].setBackgroundColor(Color.WHITE);  
54.         }  
55.           
56.         tv_titels[position].setBackgroundColor(Color.BLUE);  
57.           
58.     }  
59.   
60.     @Override  
61.     public View getView(int position, View convertView, ViewGroup parent) {  
62.         //菜单栏文字项  
63.         tv_titels[position] = new TextView(context);  
64.         tv_titels[position].setGravity(Gravity.CENTER);  
65.         tv_titels[position].setText(titles.get(position));  
66.         tv_titels[position].setTextSize(18);  
67.         tv_titels[position].setLayoutParams(new GridView.LayoutParams(  
68.                 LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));  
69.           
70.         return tv_titels[position];  
71.     }  
72.   
73. }  

          4、菜单项视图适配器：BodyAdatper

         

view plain

1. package com.myandroid.test;  
2.   
3. import java.util.List;  
4.   
5. import android.content.Context;  
6. import android.view.Gravity;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9. import android.view.ViewGroup.LayoutParams;  
10. import android.widget.BaseAdapter;  
11. import android.widget.GridView;  
12. import android.widget.ImageView;  
13. import android.widget.LinearLayout;  
14. import android.widget.TextView;  
15.   
16. public class BodyAdatper extends BaseAdapter {  
17.       
18.     private List<String> item_names;  
19.     private List<Integer> item_images;  
20.     private Context context;  
21.       
22.       
23.     public BodyAdatper(Context context, List<String> item_names,  
24.             List<Integer> item_images) {  
25.         this.context = context;  
26.         this.item_names = item_names;  
27.         this.item_images = item_images;  
28.     }  
29.   
30.     @Override  
31.     public int getCount() {  
32.         // TODO Auto-generated method stub  
33.         return item_images.size();  
34.     }  
35.   
36.     @Override  
37.     public Object getItem(int position) {  
38.         // TODO Auto-generated method stub  
39.         return position;  
40.     }  
41.   
42.     @Override  
43.     public long getItemId(int position) {  
44.         // TODO Auto-generated method stub  
45.         return position;  
46.     }  
47.       
48.   
49.     @Override  
50.     public View getView(int position, View convertView, ViewGroup parent) {  
51.         //总布局  
52.         LinearLayout layout = new LinearLayout(context);  
53.         layout.setOrientation(LinearLayout.VERTICAL);  
54.         layout.setGravity(Gravity.CENTER);  
55.         //选项名称  
56.         TextView tv_item = new TextView(context);  
57.         tv_item.setGravity(Gravity.CENTER);  
58.         tv_item.setLayoutParams(new GridView.LayoutParams(  
59.                 LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));  
60.         tv_item.setText(item_names.get(position));  
61.         //选项图表  
62.         ImageView img_item = new ImageView(context);  
63.         img_item.setLayoutParams(new LayoutParams(50, 50));  
64.         img_item.setImageResource(item_images.get(position));  
65.         //添加选项图标和名字  
66.         layout.addView(img_item);  
67.         layout.addView(tv_item);  
68.           
69.         return layout;  
70.     }  
71.   
72. }  

          这里是用PopupWindow实现，当然也可以用AlertDialog或者其他自定义对话框等等，也可以改写Menu，还可以用Tab实现。实现的方法很多，但原理是相同的，例如用两个GridView，一个作为菜单栏，一个作为菜单项视图。