实现类似UC浏览器的菜单

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

PopupWindow：关于这方面的内容可以看看《使用PopupWindow创建一个简单的菜单》

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

实现思路：

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

下面来看代码：

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

public class MyMenu extends PopupWindow { private TabHost tabHost; //标签页窗口 private LayoutInflater inflater; //用于加载tabhost private View layout; private Context context; //构造函数 public MyMenu(Context context, int width, int height) { super(context); this.context = context; inflater = LayoutInflater.from(this.context); //创建标签页 initTab(); //设置默认选项 setWidth(width); //宽 setHeight(height); //高 setContentView(tabHost); //把标签页设置到PopupWindow上 } //实例化标签页 private void initTab(){ layout = inflater.inflate(R.layout.menu,null); tabHost = (TabHost)layout. findViewById(android.R.id.tabhost); //获取tabhost tabHost.setBackgroundColor(Color.argb(60,144,144,150)); //设置背景色 tabHost.setup(); //使用findViewById()加载tabhost时在调用addTab前必须调用 /** * addTab()添加标签页 * tabHost.newTabSpec("Fitst") 创建一个tab * setIndicator("A") 设置指针 * setContent(R.id.tab1)设置内容 */ tabHost.addTab(tabHost.newTabSpec("Fitst").setIndicator("A").setContent(R.id.tab1)); tabHost.addTab(tabHost.newTabSpec("SECOND").setIndicator("B").setContent(R.id.tab2)); tabHost.addTab(tabHost.newTabSpec("THIRD").setIndicator("C").setContent(R.id.tab3)); tabHost.setCurrentTab(1); //设置默认选种标签 } //获取选项卡中的组件 public View getOption(int id){ return layout.findViewById(id); } } 菜单的布局文件res/layout/menu.xml

<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:orientation="vertical" android:layout_height="fill_parent" android:layout_width="fill_parent"> <TabWidget android:id="@android:id/tabs" android:layout_height="40dp" android:layout_width="fill_parent" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab1"> <Button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Tab one" android:id="@+id/first_button" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab2"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Tab two" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab3"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Tab three" /> </LinearLayout> </FrameLayout> </LinearLayout> </TabHost> 在Activity中使用：

public class MyActivity extends Activity { private MyMenu menu; private LinearLayout linear; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); init(); } //组件初始化 private void init(){ linear = (LinearLayout) findViewById(R.id.popMenu); int width = getWindowManager().getDefaultDisplay().getWidth()-15; //菜单的宽度 int heigth = getWindowManager().getDefaultDisplay().getHeight()/3; //菜单的高度 menu = new MyMenu(this, width,heigth); Button button= (Button) menu.getOption(R.id.first_button); //获取菜单第一个标签页中的按钮 //添加点击事件 button.setOnClickListener(new Button.OnClickListener(){ public void onClick(View v) { Toast.makeText(MyActivity.this,"tab one",Toast.LENGTH_SHORT).show(); } }); } //显示菜单 private void show(){ menu.showAtLocation(linear, Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL,0,0); } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { //按以下菜单按键展示菜单 按两下隐藏菜单 if(!menu.isShowing()&&keyCode == KeyEvent.KEYCODE_MENU){ show(); } else{ menu.dismiss(); } return true; } }
目前菜单的样子还是比较丑陋了，美化大家自己发挥好了！