Android开发之模仿UC浏览器的菜单

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

PopupWindow：使用PopupWindow创建一个简单的菜单

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

实现思路：

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

下面来看代码：

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

1. public class MyMenu extends PopupWindow {
2. private TabHost tabHost;    //标签页窗口
3. private LayoutInflater inflater;     //用于加载tabhost
4. private View layout;
5. private Context context;
6. //构造函数
7. public MyMenu(Context context, int width, int height) {
8. super(context);
9. this.context = context;
10. inflater = LayoutInflater.from(this.context);
11. //创建标签页
12. initTab();
13. //设置默认选项
14. setWidth(width);          //宽
15. setHeight(height);        //高
16. setContentView(tabHost);  //把标签页设置到PopupWindow上
17. }
18. //实例化标签页
19. private void initTab(){
20. layout =  inflater.inflate(R.layout.menu,null);
21. tabHost = (TabHost)layout. findViewById(android.R.id.tabhost);       //获取tabhost
22. tabHost.setBackgroundColor(Color.argb(60,144,144,150));              //设置背景色
23. tabHost.setup();           //使用findViewById()加载tabhost时在调用addTab前必须调用
24. /**
25. * addTab()添加标签页
26. *      tabHost.newTabSpec("Fitst")  创建一个tab
27. *      setIndicator("A") 设置指针
28. *      setContent(R.id.tab1)设置内容
29. */
30. tabHost.addTab(tabHost.newTabSpec("Fitst").setIndicator("A").setContent(R.id.tab1));
31. tabHost.addTab(tabHost.newTabSpec("SECOND").setIndicator("B").setContent(R.id.tab2));
32. tabHost.addTab(tabHost.newTabSpec("THIRD").setIndicator("C").setContent(R.id.tab3));
33. tabHost.setCurrentTab(1);                                            //设置默认选种标签
34. }
35. //获取选项卡中的组件
36. public  View getOption(int id){
37. return layout.findViewById(id);
38. }
39. }

复制代码

菜单的布局文件res/layout/menu.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@android:id/tabhost"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. >
7. <LinearLayout
8. android:orientation="vertical"
9. android:layout_height="fill_parent"
10. android:layout_width="fill_parent">
11. <TabWidget
12. android:id="@android:id/tabs"
13. android:layout_height="40dp"
14. android:layout_width="fill_parent"
15. />
16. <FrameLayout
17. android:id="@android:id/tabcontent"
18. android:layout_width="fill_parent"
19. android:layout_height="fill_parent">
20. <LinearLayout
21. android:layout_width="fill_parent"
22. android:layout_height="fill_parent"
23. android:id="@+id/tab1">
24. <Button
25. android:layout_height="wrap_content"
26. android:layout_width="wrap_content"
27. android:text="Tab   one"
28. android:id="@+id/first_button"
29. />
30. </LinearLayout>
31. <LinearLayout
32. android:layout_width="fill_parent"
33. android:layout_height="fill_parent"
34. android:id="@+id/tab2">
35. <TextView
36. android:layout_height="wrap_content"
37. android:layout_width="wrap_content"
38. android:text="Tab   two"
39. />
40. </LinearLayout>
41. <LinearLayout
42. android:layout_width="fill_parent"
43. android:layout_height="fill_parent"
44. android:id="@+id/tab3">
45. <TextView
46. android:layout_height="wrap_content"
47. android:layout_width="wrap_content"
48. android:text="Tab   three"目前菜单的样子还是比较丑陋了，美化大家自己发挥好了！/>
49. </LinearLayout>
50. </FrameLayout>
51. </LinearLayout>
52. </TabHost>

在Activity中使用：

1. public class MyActivity extends Activity
2. {
3. private MyMenu menu;
4. private LinearLayout linear;
5. @Override
6. public void onCreate(Bundle savedInstanceState)
7. {
8. super.onCreate(savedInstanceState);
9. setContentView(R.layout.main);
10. init();
11. }
12. //组件初始化
13. private void init(){
14. linear = (LinearLayout) findViewById(R.id.popMenu);
15. int width = getWindowManager().getDefaultDisplay().getWidth()-15;      //菜单的宽度
16. int heigth = getWindowManager().getDefaultDisplay().getHeight()/3;     //菜单的高度
17. menu = new MyMenu(this, width,heigth);
18. Button button= (Button) menu.getOption(R.id.first_button); //获取菜单第一个标签页中的按钮
19. //添加点击事件
20. button.setOnClickListener(new Button.OnClickListener(){
21. public void onClick(View v) {
22. Toast.makeText(MyActivity.this,"tab one",Toast.LENGTH_SHORT).show();
23. }
24. });
25. }
26. //显示菜单
27. private void show(){
28. menu.showAtLocation(linear, Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL,0,0);
29. }
30. @Override
31. public boolean onKeyDown(int keyCode, KeyEvent event) {
32. //按以下菜单按键展示菜单 按两下隐藏菜单
33. if(!menu.isShowing()&&keyCode == KeyEvent.KEYCODE_MENU){
34. show();
35. }
36. else{
37. menu.dismiss();
38. }
39. return true;
40. }
41. }