【原创】android仿ucweb的菜单效果

[size=medium]先看一张图

这里有几个要点
1，主界面有个listview+下面一个toolbar
2，按menu键的时候弹出一个dialog

问题是，弹出的dialog如何显示成gridview的形式呢，你说对了，就是用一个gridview来显示出来。
具体的思路就是如此了，首先主界面运用一个RelativeLayout来布局相对的位置，上面是个ListView，下面是个Gridview，当然，你也可以用其他的方式来布局先面的toolbar。

新建一个项目，我的MainActivity名字是UcwebDemoActivity，代码如下：

public class UcwebDemoActivity extends Activity {
	AlertDialog menuDialog;
	ListView listView;
	GridView menuGrid, toolbarGrid;
	View menuView;
	private boolean isMore = false;
	private final int ITEM_SEARCH = 0;
	private final int ITEM_FILE_MANAGER = 1;
	private final int ITEM_DOWN_MANAGER = 2;
	private final int ITEM_FULLSCREEN = 3;
	private final int ITEM_MORE = 11;

	private final int TOOLBAR_ITEM_PAGEHOME = 0;
	private final int TOOLBAR_ITEM_BACK = 1;
	private final int TOOLBAR_ITEM_FORWARD = 2;
	private final int TOOLBAR_ITEM_NEW = 3;
	private final int TOOLBAR_ITEM_MENU = 4;
	int[] menu_image_array = { R.drawable.menu_search,
			R.drawable.menu_filemanager, R.drawable.menu_downmanager,
			R.drawable.menu_fullscreen, R.drawable.menu_inputurl,
			R.drawable.menu_bookmark, R.drawable.menu_bookmark_sync_import,
			R.drawable.menu_sharepage, R.drawable.menu_quit,
			R.drawable.menu_nightmode, R.drawable.menu_refresh,
			R.drawable.menu_more };
	String[] menu_name_array = { "Search", "Filemanager", "Download",
			"Fullscreen", "Inputurl", "Bookmark", "Bookmark_sync", "Share",
			"Quit", "NightModeʽ", "Refresh", "More" };
	int[] menu_image_array2 = { R.drawable.menu_auto_landscape,
			R.drawable.menu_penselectmodel, R.drawable.menu_page_attr,
			R.drawable.menu_novel_mode, R.drawable.menu_page_updown,
			R.drawable.menu_checkupdate, R.drawable.menu_checknet,
			R.drawable.menu_refreshtimer, R.drawable.menu_syssettings,
			R.drawable.menu_help, R.drawable.menu_about, R.drawable.menu_return };
	String[] menu_name_array2 = { "Landscape", "SelectModelʽ", "Pageʽ",
			"Modeʽ", "Updown", "Update", "CheckNet", "Refreshtimer", "Setting",
			"Help", "About", "Return" };

	int[] menu_toolbar_image_array = { R.drawable.controlbar_homepage,
			R.drawable.controlbar_backward_enable,
			R.drawable.controlbar_forward_enable, R.drawable.controlbar_window,
			R.drawable.controlbar_showtype_list };
	String[] menu_toolbar_name_array = { "Home", "Back", "Forward", "Window",
			"List" };

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		menuView = View.inflate(this, R.layout.gridview_menu, null);
		menuDialog = new AlertDialog.Builder(this).create();
		menuDialog.setView(menuView);
		menuDialog.setOnKeyListener(new OnKeyListener() {
			public boolean onKey(DialogInterface dialog, int keyCode,
					KeyEvent event) {
				if (keyCode == KeyEvent.KEYCODE_MENU)// �����
					dialog.dismiss();
				return false;
			}
		});

		menuGrid = (GridView) menuView.findViewById(R.id.gridview);
		menuGrid.setAdapter(getMenuAdapter(menu_name_array, menu_image_array));
		menuGrid.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
					long arg3) {
				switch (arg2) {
				case ITEM_SEARCH:

					break;
				case ITEM_FILE_MANAGER:

					break;
				case ITEM_DOWN_MANAGER:

					break;
				case ITEM_FULLSCREEN:// ȫ��

					break;
				case ITEM_MORE:
					if (isMore) {
						menuGrid.setAdapter(getMenuAdapter(menu_name_array2,
								menu_image_array2));
						isMore = false;
					} else {
						menuGrid.setAdapter(getMenuAdapter(menu_name_array,
								menu_image_array));
						isMore = true;
					}
					menuGrid.invalidate();
					menuGrid.setSelection(ITEM_MORE);
					break;
				}

			}
		});

		toolbarGrid = (GridView) findViewById(R.id.GridView_toolbar);
		toolbarGrid.setBackgroundResource(R.drawable.channelgallery_bg);
		toolbarGrid.setNumColumns(5);
		toolbarGrid.setGravity(Gravity.CENTER);
		toolbarGrid.setVerticalSpacing(10);
		toolbarGrid.setHorizontalSpacing(10);
		toolbarGrid.setAdapter(getMenuAdapter(menu_toolbar_name_array,
				menu_toolbar_image_array));
		toolbarGrid.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
					long arg3) {
				Toast.makeText(UcwebDemoActivity.this,
						menu_toolbar_name_array[arg2], Toast.LENGTH_SHORT)
						.show();
				switch (arg2) {
				case TOOLBAR_ITEM_PAGEHOME:
					break;
				case TOOLBAR_ITEM_BACK:

					break;
				case TOOLBAR_ITEM_FORWARD:

					break;
				case TOOLBAR_ITEM_NEW:

					break;
				case TOOLBAR_ITEM_MENU:
					menuDialog.show();
					break;
				}
			}
		});

		listView = (ListView) findViewById(R.id.ListView_catalog);
		listView.setAdapter(getMenuAdapter(menu_name_array2, menu_image_array2));

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		menu.add("menu");
		return super.onCreateOptionsMenu(menu);
	}

	@Override
	public boolean onMenuOpened(int featureId, Menu menu) {
		if (menuDialog == null) {
			menuDialog = new AlertDialog.Builder(this).setView(menuView).show();
		} else {
			menuDialog.show();
		}
		return false;
	}

	private SimpleAdapter getMenuAdapter(String[] menuNameArray,
			int[] imageResourceArray) {
		ArrayList<HashMap<String, Object>> data = new ArrayList<HashMap<String, Object>>();
		for (int i = 0; i < menuNameArray.length; i++) {
			HashMap<String, Object> map = new HashMap<String, Object>();
			map.put("itemImage", imageResourceArray[i]);
			map.put("itemText", menuNameArray[i]);
			data.add(map);
		}
		SimpleAdapter simperAdapter = new SimpleAdapter(this, data,
				R.layout.item_menu, new String[] { "itemImage", "itemText" },
				new int[] { R.id.item_image, R.id.item_text });
		return simperAdapter;
	}
}

这里面用到了几个layout文件，位于res/layout/下面：
首先是main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/RelativeLayout_catalog" android:layout_width="fill_parent"
	android:layout_height="wrap_content">
	<GridView android:id="@+id/GridView_toolbar"
		android:layout_height="wrap_content" android:layout_width="fill_parent"
		android:layout_alignParentBottom="true"></GridView>
	<ListView android:id="@+id/ListView_catalog"
		android:layout_above="@id/GridView_toolbar" android:layout_width="fill_parent"
		android:layout_height="wrap_content">
	</ListView>
</RelativeLayout>

这是主界面的布局文件
还有一个是gridview_menu.xml，这是用来menu弹出来的dialog的view：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<GridView
         android:id="@+id/gridview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:numColumns="4"
         android:verticalSpacing="10dip"
         android:horizontalSpacing="10dip"
         android:gravity="center"
         />
  
</LinearLayout>

还有一个是用来布局每个item的，

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/RelativeLayout_Item"
	android:layout_width="fill_parent" android:layout_height="wrap_content"
	android:paddingBottom="5dip">
	<ImageView android:id="@+id/item_image"
		android:layout_centerHorizontal="true" android:layout_width="wrap_content"
		android:layout_height="wrap_content"></ImageView>
	<TextView android:layout_below="@id/item_image" android:id="@+id/item_text"
		android:layout_centerHorizontal="true" android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:text="选项"></TextView>
</RelativeLayout>

好了，具体的文件就基本如上了，当然了，还有很多图片文件，需要拷贝到资源文件下面去。运行工程就可以看到效果了。


附件是源码。

另外我把菜单效果单独抽象出来成了一个类，方便以后复用，详细见附件中的UCView.java。
用法主要是要先在OnCreate中先初始化UCView，然后再在

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		menu.add("menu");
		return super.onCreateOptionsMenu(menu);
	}

	@Override
	public boolean onMenuOpened(int featureId, Menu menu) {
		if (ucView.getDialog() == null) {
			ucView.setDialogBuilder(new AlertDialog.Builder(this));
			ucView.getDialogBuilder().setView(menuView).show();
		} else {
			ucView.getDialog().show();
		}
		return false;
	}

中使用。
源码可以从附件2中得到。
[/size]