Android开发之模仿UC浏览器的菜单

这个内容内容涉及到的了两个知识点：

PopupWindow：使用PopupWindow创建一个简单的菜单

使用TabHost创建标签：这个网上好多教程随便看看就好。

实现思路：

观察一下UC浏览器的菜单我们可以发现，UC的菜单就是一个个标签页显示在了PopupWindow上，所以可以想到使用PopupWindow+TabHost来实现类似的效果。这样做，在标签页中我们可以使用android提供布局对象随意设置布局。

下面来看代码：

想要实现这种效果的菜单，默认的PopupWindow明显需要重写：

 

1. public class MyMenu extends PopupWindow {
   
2.     private TabHost tabHost;    //标签页窗口
   
3.     private LayoutInflater inflater;     //用于加载tabhost
   
4.     private View layout;
   
5.     private Context context;
   
6.  
7.     //构造函数
   
8.     public MyMenu(Context context, int width, int height) {
   
9.         super(context);
   
10.         this.context = context;
    
11.         inflater = LayoutInflater.from(this.context);
    
12.  
13.         //创建标签页
    
14.         initTab();
    
15.  
16.         //设置默认选项
    
17.         setWidth(width);          //宽
    
18.         setHeight(height);        //高
    
19.         setContentView(tabHost);  //把标签页设置到PopupWindow上
    
20.     }
    
21.  
22.     //实例化标签页
    
23.     private void initTab(){
    
24.         layout =  inflater.inflate(R.layout.menu,null);
    
25.         tabHost = (TabHost)layout. findViewById(android.R.id.tabhost);       //获取tabhost
    
26.         tabHost.setBackgroundColor(Color.argb(60,144,144,150));              //设置背景色
    
27.         tabHost.setup();           //使用findViewById()加载tabhost时在调用addTab前必须调用
    
28.         /**
    
29.          * addTab()添加标签页
    
30.          *      tabHost.newTabSpec("Fitst")  创建一个tab
    
31.          *      setIndicator("A") 设置指针
    
32.          *      setContent(R.id.tab1)设置内容
    
33.          */
    
34.         tabHost.addTab(tabHost.newTabSpec("Fitst").setIndicator("A").setContent(R.id.tab1));
    
35.         tabHost.addTab(tabHost.newTabSpec("SECOND").setIndicator("B").setContent(R.id.tab2));
    
36.         tabHost.addTab(tabHost.newTabSpec("THIRD").setIndicator("C").setContent(R.id.tab3));
    
37.         tabHost.setCurrentTab(1);                                            //设置默认选种标签
    
38.     }
    
39.  
40.     //获取选项卡中的组件
    
41.     public  View getOption(int id){
    
42.         return layout.findViewById(id);
    
43.     }
    
44. }
    

复制代码

菜单的布局文件res/layout/menu.xml

 

 

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
   
3.          android:id="@android:id/tabhost"
   
4.          android:layout_width="fill_parent"
   
5.          android:layout_height="fill_parent"
   
6.         >
   
7.     <LinearLayout
   
8.             android:orientation="vertical"
   
9.             android:layout_height="fill_parent"
   
10.             android:layout_width="fill_parent">
    
11.         <TabWidget
    
12.                 android:id="@android:id/tabs"
    
13.                 android:layout_height="40dp"
    
14.                 android:layout_width="fill_parent"
    
15.  
16.                 />
    
17.         <FrameLayout
    
18.                 android:id="@android:id/tabcontent"
    
19.                 android:layout_width="fill_parent"
    
20.                 android:layout_height="fill_parent">
    
21.  
22.             <LinearLayout
    
23.                     android:layout_width="fill_parent"
    
24.                     android:layout_height="fill_parent"
    
25.                     android:id="@+id/tab1">
    
26.                 <Button
    
27.                         android:layout_height="wrap_content"
    
28.                         android:layout_width="wrap_content"
    
29.                         android:text="Tab   one"
    
30.                         android:id="@+id/first_button"
    
31.                         />
    
32.  
33.             </LinearLayout>
    
34.             <LinearLayout
    
35.                     android:layout_width="fill_parent"
    
36.                     android:layout_height="fill_parent"
    
37.                     android:id="@+id/tab2">
    
38.  
39.                 <TextView
    
40.                         android:layout_height="wrap_content"
    
41.                         android:layout_width="wrap_content"
    
42.                         android:text="Tab   two"
    
43.                         />
    
44.             </LinearLayout>
    
45.             <LinearLayout
    
46.                     android:layout_width="fill_parent"
    
47.                     android:layout_height="fill_parent"
    
48.                     android:id="@+id/tab3">
    
49.  
50.                 <TextView
    
51.                         android:layout_height="wrap_content"
    
52.                         android:layout_width="wrap_content"
    
53.                         android:text="Tab   three"目前菜单的样子还是比较丑陋了，美化大家自己发挥好了！/>
    
54.             </LinearLayout>
    
55.  
56.  
57.         </FrameLayout>
    
58.     </LinearLayout>
    
59. </TabHost>
    

在Activity中使用：

 

 

1. public class MyActivity extends Activity
   
2. {
   
3.     private MyMenu menu;
   
4.     private LinearLayout linear;
   
5.     @Override
   
6.     public void onCreate(Bundle savedInstanceState)
   
7.     {
   
8.         super.onCreate(savedInstanceState);
   
9.         setContentView(R.layout.main);
   
10.         init();
    
11.     }
    
12.     //组件初始化
    
13.     private void init(){
    
14.         linear = (LinearLayout) findViewById(R.id.popMenu);
    
15.         int width = getWindowManager().getDefaultDisplay().getWidth()-15;      //菜单的宽度
    
16.         int heigth = getWindowManager().getDefaultDisplay().getHeight()/3;     //菜单的高度
    
17.         menu = new MyMenu(this, width,heigth);
    
18.         Button button= (Button) menu.getOption(R.id.first_button); //获取菜单第一个标签页中的按钮
    
19.         //添加点击事件
    
20.         button.setOnClickListener(new Button.OnClickListener(){
    
21.             public void onClick(View v) {
    
22.                 Toast.makeText(MyActivity.this,"tab one",Toast.LENGTH_SHORT).show();
    
23.             }
    
24.         });
    
25.     }
    
26.  
27.     //显示菜单
    
28.     private void show(){
    
29.         menu.showAtLocation(linear, Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL,0,0);
    
30.     }
    
31.  
32.     @Override
    
33.     public boolean onKeyDown(int keyCode, KeyEvent event) {
    
34.         //按以下菜单按键展示菜单 按两下隐藏菜单
    
35.         if(!menu.isShowing()&&keyCode == KeyEvent.KEYCODE_MENU){
    
36.             show();
    
37.         }
    
38.         else{
    
39.             menu.dismiss();
    
40.         }
    
41.         return true;
    
42.     }
    
43. }