`

【原创】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]
  • 大小: 53.5 KB
分享到:
评论

相关推荐

    Android 仿UCWEB界面源码

    综上所述,"Android 仿UCWEB界面源码"项目涵盖了Android UI设计、自定义View、布局管理、触摸事件处理、数据加载与渲染等多个核心知识点,对于Android开发者来说,深入研究这个源码将有助于提升自己的技能和对...

    android 仿ucweb 界面

    android 仿ucweb 界面android 仿ucweb 界面android 仿ucweb 界面android 仿ucweb 界面android 仿ucweb 界面android 仿ucweb 界面android 仿ucweb 界面android 仿ucweb 界面

    android仿ucweb界面编程

    "android仿ucweb界面编程"这个主题旨在创建一个与UCWeb浏览器相似的用户界面,这涉及到Android UI设计、布局管理、自定义视图以及可能的网络请求处理等多个方面。下面将详细介绍这个过程中的关键知识点。 首先,...

    android仿UCWEB界面源码.rar

    【标题】:Android仿UCWEB界面源码分析 在Android应用开发中,有时我们需要创建类似UCWEB这样的浏览器界面,提供用户友好的浏览体验。UCWEB是一款知名的手机浏览器,以其独特的界面设计和高效的网页加载能力而受到...

    Android实现模仿UCweb菜单效果的方法

    本文实例讲述了Android实现模仿UCweb菜单效果的方法。分享给大家供大家参考。具体如下: UCWeb的菜单看起来不错,自己模仿做一个,思路实现如下: 1、保留menu按键作用 2、用popupwindow作为菜单显示容器 3、用...

    仿UCWEB界面源码2.0 android

    【标题】"仿UCWEB界面源码2.0 android" 提供的是一个针对Android平台的UI设计示例,旨在模仿知名手机浏览器UCWEB的用户界面。这个源码库可以帮助开发者学习如何在Android应用中实现类似UCWEB的浏览体验,包括布局、...

    仿UCWEB界面源码

    【标题】:仿UCWEB界面源码 在移动互联网领域,UI设计是用户体验的重要组成部分,而UCWEB浏览器作为一款广受欢迎的手机浏览器,其简洁、高效的界面设计深受用户喜爱。"仿UCWEB界面源码"是指开发人员为了实现类似...

    仿UCWEB界面源码.zip

    总结来说,"仿UCWEB界面源码.zip"是一个关于Android应用开发的实战教程,它涵盖了UI设计的关键元素,特别是Menu菜单和底部导航栏的实现。通过这个DEMO,开发者不仅可以学习到Android的布局管理、菜单组件的使用,还...

    安卓Android源码——仿UCWEB界面源码.zip

    【标题】: "安卓Android源码——仿UCWEB界面源码.zip" 提供了一个学习和研究的机会,让我们深入了解如何在Android平台上实现类似UCWEB浏览器的用户界面。UCWEB是一款流行的移动浏览器,以其简洁的界面和高效的数据...

    Android应用源码之仿UCWEB界面源码.zip

    《Android应用源码解析:深度探索仿UCWEB界面设计》 在移动互联网时代,Android操作系统以其开放性和灵活性深受开发者喜爱。UCWEB是一款知名的手机浏览器,其简洁高效的界面设计深受用户好评。本篇将深入探讨一个...

    仿UCWEB菜单界面弹出效果

    源码UCWEB,该项目实现了仿UCWEB界面,效果经常使用于一些浏览器的菜单功能的,其他的应用也很常见的,大家有必要掌握这方便的技能吧,具体还是看看效果图所示吧,该效果来自源码天堂android源码频道整理上传。

    Android程序研发源码仿UCWEB界面源码.zip

    "Android程序研发源码仿UCWEB界面源码.zip" 提供了一个很好的学习资源,它是一个模仿UCWEB浏览器界面的Android应用源代码。UCWEB是一款流行的移动浏览器,其用户界面设计简洁、功能丰富,因此,仿造其界面能帮助...

    android-UCWEB界面源码2.0

    在【压缩包子文件的文件名称列表】中提到的“仿UCWEB界面源码”,这可能是指一个项目或者模块,专门用来模仿UCWEB的界面设计。这个模块可能包含了XML布局文件、Java代码以及其他资源文件,如图片、样式表等,用于...

Global site tag (gtag.js) - Google Analytics