思洋互动网站建设学前班

菜单特效

上一节介绍了如何实现Android的标准菜单。为了实现更绚丽的效果（例如，模拟iPhone、UCWeb for Android的菜单效果），需要使用更多的技巧。本节将为读者讲解这些自定义菜单的技巧，并引领读者逐步完成各种绚丽的菜单效果。广州网站设计

1  自定义菜单

工程目录：src\ch06\ch06_custom_menu

Android SDK本身提供了一种默认创建菜单的机制，但通过这种机制创建的菜单虽然从功能上很完备，但界面效果实在是有点"土"。对于一个拥有绚丽界面的程序配上一个有点"土"的菜单，会使用户感觉很怪，甚至会使绚丽的界面大打折扣。实际上，对于如此灵活和强大的Android系统，修改菜单的样式只是小菜一碟，为程序加入漂亮菜单的方法很多。本小节先介绍一种比较常用的方法，就是通过onKeyDown事件方法和PopupWindow实现自定义的菜单。至于通过这种技术能否设计出绚丽的菜单效果，那就要看我们的设计、美学、心理学功底了。广州网站设计

通过6.1.1节介绍的选项菜单可以知道，通过按手机的"Menu"键（是手机上的硬按键，不同手机"Menu"键所在的位置会不同），可以弹出选项菜单，再按"Back"键，选项菜单会关闭。那么要想模拟选项菜单的弹出和关闭效果，只需要监听这两个键的按下事件即可，并且在"Menu"键按下时使用PopupWindow弹出一个窗口作为模拟的选项菜单。下面先来看看如图6.9所示的模拟选项菜单的效果。广州网站建设

图6.9  定制选项菜单

从图6.9可以看出，在界面的下方显示了3个菜单项："首页"、"我的"和"更多"。其中"我的"菜单项的文字和图像是左右水平排列，而另两个菜单项上的文字和图像是上下垂直排列的。实际上，这种效果是由一个普通的布局文件（menu_layout.xml）完成的，代码如下：

广州网站建设

1. <?xml version="1.0" encoding="utf-8"?> 
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:orientation="horizontal" android:layout_width="fill_parent" 
4.     android:layout_height="wrap_content" android:gravity="bottom"> 
5.     <!--  第一个菜单项：“首页”  --> 
6.     <LinearLayout android:id="@+id/home" android:orientation="vertical" 
7.         android:layout_width="fill_parent" android:layout_height="wrap_content" 
8.         android:background="@drawable/button_normal_translucent" 
9.         android:layout_weight="1"> 
10.         <ImageView android:layout_width="fill_parent" 
11.             android:layout_height="wrap_content" android:src="@drawable/home" 
12.             android:paddingTop="5dp" /> 
13.         <TextView android:layout_width="fill_parent" 
14.             android:layout_height="wrap_content" android:text="首页" 
15.             android:gravity="center" /> 
16.     </LinearLayout> 
17.     <!--  第二个菜单项：“我的”  --> 
18.     <LinearLayout android:orientation="horizontal" 
19.         android:layout_width="fill_parent" android:layout_height="wrap_content" 
20.         android:background="@drawable/button_normal" android:layout_weight="1" 
21.         android:gravity="center"> 
22.         <ImageView android:layout_width="wrap_content" 
23.             android:layout_height="wrap_content" android:src="@drawable/mine" /> 
24.         <TextView android:layout_width="wrap_content" 
25.             android:layout_height="wrap_content" android:text="我的" /> 
26.     </LinearLayout> 
27.     <!--  第三个菜单项  
28.     <LinearLayout android:orientation="vertical" 
29.         android:layout_width="fill_parent"   
30.         android:layout_height="wrap_content" android:background="@drawable/button_normal" 
31.         android:layout_weight="1"> 
32.         <ImageView android:layout_width="fill_parent" 
33.             android:layout_height="wrap_content" android:src="@drawable/more" 
34.             android:paddingTop="18dp" /> 
35.         <TextView android:layout_width="fill_parent" 
36.             android:layout_height="wrap_content" android:text="更多" 
37.             android:gravity="center" android:paddingTop="5dp"/> 
38.     </LinearLayout> 
39. </LinearLayout> 

在编写上面代码之前，别忘了准备几个相关的图像，例如，本例使用了5个图像，分别是image1.Png、image2.Png、image3.Png、image4.Png和image5.Png。其中button_normal_translucent.png用于"首页"菜单项的背景（半透明效果），button_normal.png用于"我的"和"更多"菜单项的背景。home.png、mine.png和more.png分别用于这3个菜单项的图像。

下面来编写监听"menu"和"back"键按下动作的代码。按下"back"键要处理的任务有如下两个。

如果选项菜单已经弹出，关闭选项菜单。

如果选项菜单未弹出，或已经被关闭，直接关闭当前的Activity，也就是调用finish方法。广州网站建设

为了区分上面两个任务，在程序中设置了一个int类型状态变量（state），当state为1时表示选项菜单已弹出，state为2时表示选项菜单未弹出。下面我们看一下完整的实现代码。

1. package mobile.android.ch06.custom.menu;  
2.  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.Gravity;  
6. import android.view.KeyEvent;  
7. import android.view.View;  
8. import android.view.View.OnClickListener;  
9. import android.widget.PopupWindow;  
10. import android.widget.Toast;  
11.  
12. public class Main extends Activity  
13. {  
14.     private PopupWindow pop;  
15.     private View layout;  
16.     private int state = 2;          // 状态变量，1：选项菜单已弹出，2：选项菜单未弹出  
17.  
18.     @Override  
19.     public void onCreate(Bundle savedInstanceState)  
20.     {  
21.         super.onCreate(savedInstanceState);  
22.         setContentView(R.layout.main);  
23.     }  
24.     @Override  
25.     public boolean onKeyDown(int keyCode, KeyEvent event)  
26.     {  
27.         switch (keyCode)  
28.         {  
29.             case KeyEvent.KEYCODE_MENU:     //  按下“menu”键的动作  
30.                 //  选项菜单已弹出，不再弹出新的窗口  
31.                 if (state == 1)  
32.                     return false;  
33.                 //  装载选项菜单布局文件  
34.                 layout = getLayoutInflater().inflate(R.layout.menu_layout, null);  
35.                 //  创建PopupWindow对象，并在指定位置弹出用于显示菜单的窗口  
36.                 pop = new PopupWindow(layout, getWindowManager()  
37.                         .getDefaultDisplay().getWidth(), getWindowManager()  
38.                         .getDefaultDisplay().getHeight());  
39.                 //  设置弹出窗口的位置  
40.                 pop.showAtLocation(layout, Gravity.BOTTOM, 0, 0);  
41.                 View home = layout.findViewById(R.id.home);  
42.                 //  为“首页”菜单项添加单击事件  
43.                 home.setOnClickListener(new OnClickListener()  
44.                 {  
45.                     @Override  
46.                     public void onClick(View view)  
47.                     {  
48.                         Toast.makeText(Main.this, "单击定制菜单.",  Toast.LENGTH_LONG).show();  
49.                         //  单击“首页”菜单项后，关闭选项菜单  
50.                         pop.dismiss();  
51.                         //  重新设置状态变量  
52.                         state = 2;  
53.                     }  
54.                 });  
55.                 //  弹出选项菜单后，将状态变量设为1，表示选项菜单已弹出  
56.                 state = 1;  
57.                 return false;  
58.             case KeyEvent.KEYCODE_BACK:     //  按下“back”键的动作  
59.                 if (state == 1)  
60.                 {  
61.                     //  如果选项菜单已弹出，关闭它  
62.                     pop.dismiss();  
63.                     //  将状态变量设为选项菜单已关闭  
64.                     state = 2;  
65.                 }  
66.                 else if (state == 2)  
67.                 {  
68.                     //  如果选项菜单还没有显示，或已经关闭，则直接关闭当前的Activity  
69.                     finish();  
70.                 }  
71.                 return false;  
72.         }  
73.        //  除“menu”和“back”按下事件外，仍需调用Activity类的 onKeyDown方法来响应其他键的按下事件  
74.        return super.onKeyDown(keyCode, event);  
75.     }  
76. }  

在编写上面代码时应注意如下几点。

对于选项菜单来说，一般单击某个菜单项后，会执行一些动作，并且选项菜单会自动关闭。为了模拟这一过程，为"首页"菜单项添加了一个单击事件。当单击"首页"菜单项时，会弹出一个Toast提示信息，并且选项菜单会关闭。广州网站设计

当执行完按下"menu"或"back"键的动作后，onKeyDown方法应返回一个常量（false或true都可以），不能再调用super.onKeyDown方法，否则在执行完定制的菜单项动作后，又会执行系统的默认动作。例如，当按下"back"键后，关闭弹出菜单后，连当前的Activity也一起关了。当然，如果是除了"menu"和"back"的其他键按下时还是需要调用Activity类的onKeyDown方法的（也就是super.onKeyDown方法），这样在程序中还可以响应其他的按键事件，否则程序除了"menu"和"back"键外，其他的键几乎都不好使了。

showAtLocation方法用于控件弹出窗口的位置。该方法的第1个参数是一个View对象，实际上，showAtLocation方法内部只是需要调用View.getWindowToken方法来获得一个IBinder对象。showAtLocation方法的第2个参数表示弹出窗口的位置，本例中设置了弹出窗口在屏幕底部显示。最后两个参数分别表示水平和垂直偏移量。本例都设为0，表示不发生偏移。因此，弹出窗口会在屏幕的最底部显示，也就是显示选项菜单的位置。广州网站建设