9.2　菜单特效

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

9.2.1　自定义菜单

源代码目录：src/ch09/CustomMenu

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

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

 

▲图9-8　定制选项菜单

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

源代码文件：src/ch09/CustomMenu/res/layout/menu_layout.xml

＜?xml version="1.0" encoding="utf-8"?＞

＜LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

　　android:orientation="horizontal" android:layout_width="fill_parent"

　　android:layout_height="wrap_content" android:gravity="bottom"＞

　　＜!--　第一个菜单项：“首页”　--＞

　　＜LinearLayout android:id="@+id/home" android:orientation="vertical"

　　　　android:layout_width="fill_parent" android:layout_height="wrap_content"

　　　　android:background="@drawable/button_normal_translucent"

　　　　android:layout_weight="1"＞

　　　　＜ImageView android:layout_width="fill_parent"

　　　　　　android:layout_height="wrap_content" android:src="@drawable/home"

　　　　　　android:paddingTop="5dp" /＞

　　　　＜TextView android:layout_width="fill_parent"

　　　　　　android:layout_height="wrap_content" android:text="首页"

　　　　　　android:gravity="center" /＞

　　＜/LinearLayout＞

　　＜!--　第二个菜单项：“我的”　--＞

　　＜LinearLayout android:orientation="horizontal"

　　　　android:layout_width="fill_parent" android:layout_height="wrap_content"

　　　　android:background="@drawable/button_normal" android:layout_weight="1"

　　　　android:gravity="center"＞

　　　　＜ImageView android:layout_width="wrap_content"

　　　　　　android:layout_height="wrap_content" android:src="@drawable/mine" /＞

　　　　＜TextView android:layout_width="wrap_content"

　　　　　　android:layout_height="wrap_content" android:text="我的" /＞

　　＜/LinearLayout＞

　　＜!--　第三个菜单项

　　＜LinearLayout android:orientation="vertical"

　　　　android:layout_width="fill_parent"

　　　　android:layout_height="wrap_content" android:background="@drawable/button_normal"

　　　　android:layout_weight="1"＞

　　　　＜ImageView android:layout_width="fill_parent"

　　　　　　android:layout_height="wrap_content" android:src="@drawable/more"

　　　　　　android:paddingTop="18dp" /＞

　　　　＜TextView android:layout_width="fill_parent"

　　　　　　android:layout_height="wrap_content" android:text="更多"

　　　　　　android:gravity="center" android:paddingTop="5dp"/＞

　　＜/LinearLayout＞

＜/LinearLayout＞

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

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

如果选项菜单未弹出，或已经被关闭，直接关闭当前的窗口，也就是调用finish方法。

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

源代码文件：src/ch09/CustomMenu/src/mobile/android/custom/menu/Main.java

public class Main extends Activity

{

　　private PopupWindow pop;

　　private View layout;

　　private int state = 2; // 状态变量，1：选项菜单已弹出，2：选项菜单未弹出

 

　　@Override

　　public void onCreate(Bundle savedInstanceState)

　　{

　　　　super.onCreate(savedInstanceState);

　　　　setContentView(R.layout.main);

　　}

　　@Override

　　public boolean onKeyDown(int keyCode, KeyEvent event)

　　{

　　　　switch (keyCode)

　　　　{

　　　　　　case KeyEvent.KEYCODE_MENU:　　 //　按下“menu”键的动作

　　　　　　　　//　选项菜单已弹出，不再弹出新的窗口

　　　　　　　　if (state == 1)

　　　　　　　　　　return false;

　　　　　　　　//　装载选项菜单布局文件

　　　　　　　　layout = getLayoutInflater().inflate(R.layout.menu_layout, null);

　　　　　　　　//　创建PopupWindow对象，并在指定位置弹出用于显示菜单的窗口

　　　　　　　　pop = new PopupWindow(layout, getWindowManager()

　　　　　　　　　　　　.getDefaultDisplay().getWidth(), getWindowManager()

　　　　　　　　　　　　.getDefaultDisplay().getHeight());

　　　　　　　　//　设置弹出窗口的位置

　　　　　　　　pop.showAtLocation(layout, Gravity.BOTTOM, 0, 0);

　　　　　　　　View home = layout.findViewById(R.id.home);

　　　　　　　　//　为“首页”菜单项添加单击事件

　　　　　　　　home.setOnClickListener(new OnClickListener()

　　　　　　　　{

　　　　　　　　　　@Override

　　　　　　　　　　public void onClick(View view)

　　　　　　　　　　{

　　　　　　　　　　　　Toast.makeText(Main.this, "单击定制菜单.", Toast.LENGTH_LONG).show();

　　　　　　　　　　　　//　单击“首页”菜单项后，关闭选项菜单

　　　　　　　　　　　　pop.dismiss();

　　　　　　　　　　　　//　重新设置状态变量

　　　　　　　　　　　　state = 2;

　　　　　　　　　　}

　　　　　　　　});

　　　　　　　　//　弹出选项菜单后，将状态变量设为1，表示选项菜单已弹出

　　　　　　　　state = 1;

　　　　　　　　return false;

　　　　　　case KeyEvent.KEYCODE_BACK: //　按下“back”键的动作

　　　　　　　　if (state == 1)

　　　　　　　　{

　　　　　　　　　　//　如果选项菜单已弹出，关闭它

　　　　　　　　pop.dismiss();

　　　　　　　　　　//　将状态变量设为选项菜单已关闭

　　　　　　　　state = 2;

　　　　　　　　}

　　　　　　　　else if (state == 2)

　　　　　　　　{

　　　　　　　　　　//　如果选项菜单还没有显示，或已经关闭，则直接关闭当前的Activity

　　　　　　　　　　finish();

　　　　　　　　}

　　　　　　　　return false;

　　　　}

　　　 //　除“menu”和“back”按下事件外，仍需调用Activity.onKeyDown方法来响应其他键的按下事件

　　　 return super.onKeyDown(keyCode, event);

　　}

}

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

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

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

showAtLocation方法用于指定控件弹出窗口的位置。该方法的第1个参数是一个View对象，第2个参数表示弹出窗口的位置，本例中设置了弹出窗口在屏幕底部显示。最后两个参数分别表示水平和垂直偏移量。本例都设为0，表示不发生偏移。因此，弹出窗口会在屏幕的最底部显示，也就是显示选项菜单的位置。

9.2.2　模拟UCWeb菜单效果

源代码目录：src/ch09/UCwebMenu

可能有很多读者使用过Android版的UCWeb（也称为UC浏览器）。在UCWeb的主界面可以弹出包含很多图像的菜单，如图9-9所示。

 

▲图9-9　UCWeb 主界面

实际上，这个弹出菜单也是一个弹出窗口，本节将介绍如何弹出类似的菜单。在上一节介绍了通过onKeyDown事件来捕捉“menu”键盘事件来弹出菜单，本节将介绍另外一种弹出自定义菜单的方法，即通过onCreateOptionsMenu和onMenuOpened两个方法相互配合来弹出自定义菜单。onCreateOptionsMenu方法用于创建选项菜单，在显示选项菜单之前，系统会调用onMenuOpened方法，如果该方法返回false，则在onCreateOptionsMenu方法中创建的选项菜单将不再显示。因此，可以在onMenuOpened方法中弹出用于显示自定义菜单的窗口。本例的完整实现代码如下：

源代码文件：src/ch09/UCwebMenu/src/mobile/android/ucweb/menu/Main.java

public class Main extends Activity implements OnKeyListener,OnItemClickListener

{

　　private PopupWindow popup;

 

　　@Override

　　public void onCreate(Bundle savedInstanceState)

　　{

　　　　super.onCreate(savedInstanceState);

　　　　setContentView(R.layout.main);

　　　　//　创建在弹出窗口中显示的GridView对象

　　　　GridView gvPopupWindow = (GridView) getLayoutInflater().inflate(R.layout.popup_　　　　window, null);

　　　　//　为GridView提供数据的Adapter对象

　　　　GridAdapter gridAdapter = new GridAdapter(this);

　　　　gvPopupWindow.setAdapter(gridAdapter);

　　　　gvPopupWindow.setOnKeyListener(this);

　　　　gvPopupWindow.setOnItemClickListener(this);

　　　　//　创建用于显示菜单的PopupWindow对象。菜单是通过GridView对象显示网格状图像和文字

　　　　popup = new PopupWindow(gvPopupWindow, LayoutParams.FILL_PARENT,

　　　　　　　　LayoutParams.WRAP_CONTENT);

　　　　//　使PopupWindow可以获得焦点，以便可以通过轨迹球或上、下、左、右键来控制菜单项

　　　　popup.setFocusable(true);

　　}

　　@Override

　　public void onItemClick(AdapterView＜?＞ parent, View view, int position,long id)

　　{

　　　　//　当单击GridView中的每一项时，先关闭弹出窗口，然后显示一条提示信息

　　　　popup.dismiss();

　　　　Toast.makeText(this, Const.GRID_ITEM_TEXT_LIST[position], Toast.LENGTH_LONG).show();

　　}

　　@Override

　　public boolean onKey(View v, int keyCode, KeyEvent event)

　　{

　　　　switch (keyCode)

　　　　{

　　　　　　case KeyEvent.KEYCODE_BACK:

　　　　　　　　//　捕捉Back键。如果窗口已经显示，关闭它

　　　　　　　　if(popup.isShowing())

　　　　　　　　　　popup.dismiss();

　　　　　　　　break;

　　　　}

　　　　return false;

　　}

　　@Override

　　public boolean onCreateOptionsMenu(Menu menu)

　　{

　　　　// 必须创建一项，否则系统不会调用onMenuOpened方法

　　　　menu.add("menu");

　　　　return super.onCreateOptionsMenu(menu);

　　}

　　@Override

　　public boolean onMenuOpened(int featureId, Menu menu)

　　{

　　　　if (popup != null)

　　　　{

　　　　　　if (popup.isShowing())

　　　　　　{

　　　　　　　　//　如果菜单已显示，关闭它

　　　　　　　　popup.dismiss();

　　　　　　}

　　　　　　else

　　　　　　{

　　　　　　　　View layout = getLayoutInflater().inflate(R.layout.main, null);

　　　　　　　　//　弹出菜单

　　　　　　　　popup.showAtLocation(layout, Gravity.CENTER, 0, 0);

　　　　　　}

　　　　}

　　　　//　返回false，不会显示在onCreateOptionsMenu方法中创建的菜单

　　　　return false;

　　}

}

在上面代码中使用了一个GridAdapter类，该类用于向GridView对象提供数据，代码如下：

源代码文件：src/ch09/UCwebMenu/src/mobile/android/ucweb/menu/GridAdapter.java

public class GridAdapter extends BaseAdapter

{

　　private Context mContext;

　　private LayoutInflater mLayoutInflater;

　　public GridAdapter(Context context)

　　{

　　　　mContext = context;

　　　　mLayoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_　　　　INFLATER_SERVICE);

　　}

　　@Override

　　public int getCount()

　　{

　　　　return Const.GRID_ITEM_ICON_ID_LIST.length;

　　}

　　@Override

　　public Object getItem(int position)

　　{

　　　　// TODO Auto-generated method stub

　　　　return null;

　　}

　　@Override

　　public long getItemId(int position)

　　{

　　　　return 0;

　　}

　　@Override

　　public View getView(int position, View convertView, ViewGroup parent)

　　{

　　　　//　此方法返回一个包含ImageView和TextView的View对象

　　　　if (convertView == null)

　　　　　　convertView = mLayoutInflater.inflate(R.layout.grid_item, null);

　　　　ImageView ivGridItemIcon = (ImageView) convertView

　　　　　　　　.findViewById(R.id.ivGridItemIcon);

　　　　TextView tvGridItemText = (TextView) convertView

　　　　　　　　.findViewById(R.id.tvGridItemText);

　　　　//　设置在ImageView对象中显示的图像

　　　　ivGridItemIcon.setImageResource(Const.GRID_ITEM_ICON_ID_LIST[position]);

　　　　//　设置在TextView中显示的文本

　　　　tvGridItemText.setText(Const.GRID_ITEM_TEXT_LIST[position]);

　　　　return convertView;

　　}

}

在使用getView方法返回View对象时要注意，每一个View对象用于显示当前位置（position指定的位置）的内容，对于GridView来说，就是一个单元格。对于ListView来说，就是一个列表项。不过如果每一个单元格或列表项中的控件都一样的话（如本例每一个单元格都只有一个ImageView和TextView），并不需要总是创建新的View对象。getView方法有一个convertView参数，如果该参数不为null，则表示曾经创建的View对象。我们只需要获得这个View对象，并重新设置其中控件的值即可。从这一点可以看出，系统在创建每一个View对象后，并不会释放它们，而是将这些View对象保存了起来。当GridView或ListView进行滚动时，会将这些曾经创建的View对象再次传入getView方法，这样就可以重新利用这些View对象了。通过这种方式可以大大节省系统的资源（虽然Java有垃圾回收机制，但一般只有在系统资源快要耗尽时才会回收不需要的内存资源）。

本例还涉及一些图像文件，在Const类中定义了这些图像文件的资源ID以及相对应的文本，以便在代码中使用它们。Const类的代码如下：

源代码文件：src/ch09/UCwebMenu/src/mobile/android/ucweb/menu/Const.java

package mobile.android.ch06_ucweb.menu;

public class Const

{

　　public final static int[] GRID_ITEM_ICON_ID_LIST = new int[]

　　{ R.drawable.intercept_list, R.drawable.intercept_rule, R.drawable.intercepted_record,

　　　　　　R.drawable.location, R.drawable.incoming_and_outgoing_setting,

　　　　　　R.drawable.privacy_manager, R.drawable.ip, R.drawable.dial,

　　　　　　R.drawable.useful};

　　public final static String[] GRID_ITEM_TEXT_LIST = new String[]

　　{ "拦截名单", "拦截规则","拦截记录" , "归属地查询", "来去电设置", "隐私管理", "IP电话设置", "　　通讯记录", "常用号码"};

}

除此之外，本例还涉及两个布局文件popup_window.xml和grid_item.xml，其中popup_window.xml用于弹出窗口的布局，grid_item.xml用于GridView对象中每一个单元格的布局。这两个布局文件的代码如下：

源代码文件：src/ch09/UCwebMenu/res/layout/popup_window.xml

＜?xml version="1.0" encoding="utf-8"?＞

＜GridView android:id="@+id/gvPopupWindow"

　　xmlns:android="http://schemas.android.com/apk/res/android"

　　android:gravity="center" android:padding="10dp" android:layout_width="fill_parent"

　　android:layout_height="fill_parent" android:horizontalSpacing="10px"

　　android:verticalSpacing="10px" android:stretchMode="columnWidth"

　　android:columnWidth="80dp"android:numColumns="auto_fit"

android:background="@drawable/popup_window_border"/＞

源代码文件：src/ch09/UCwebMenu/res/layout/grid_item.xml

＜?xml version="1.0" encoding="utf-8"?＞

＜LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

　　android:orientation="vertical" android:layout_width="wrap_content"

　　android:layout_height="wrap_content" android:gravity="center"＞

　　＜ImageView android:id="@+id/ivGridItemIcon"

　　　　android:layout_width="50dp" android:layout_height="50dp" /＞

　　＜TextView android:id="@+id/tvGridItemText"

　　　　android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FFF" /＞

＜/LinearLayout＞

运行程序，按下“menu”键，显示效果如图9-10所示。

 

▲图9-10　模拟UCWeb的弹出菜单