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

2021-08-07 01:36:01

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

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

菜单的布局文件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.                 />
  17.         <FrameLayout
  18.                 android:id="@android:id/tabcontent"
  19.                 android:layout_width="fill_parent"
  20.                 android:layout_height="fill_parent">
  21.  
  22.             <LinearLayout
  23.                     android:layout_width="fill_parent"
  24.                     android:layout_height="fill_parent"
  25.                     android:id="@+id/tab1">
  26.                 <Button
  27.                         android:layout_height="wrap_content"
  28.                         android:layout_width="wrap_content"
  29.                         android:text="Tab   one"
  30.                         android:id="@+id/first_button"
  31.                         />
  32.  
  33.             </LinearLayout>
  34.             <LinearLayout
  35.                     android:layout_width="fill_parent"
  36.                     android:layout_height="fill_parent"
  37.                     android:id="@+id/tab2">
  38.  
  39.                 <TextView
  40.                         android:layout_height="wrap_content"
  41.                         android:layout_width="wrap_content"
  42.                         android:text="Tab   two"
  43.                         />
  44.             </LinearLayout>
  45.             <LinearLayout
  46.                     android:layout_width="fill_parent"
  47.                     android:layout_height="fill_parent"
  48.                     android:id="@+id/tab3">
  49.  
  50.                 <TextView
  51.                         android:layout_height="wrap_content"
  52.                         android:layout_width="wrap_content"
  53.                         android:text="Tab   three"目前菜单的样子还是比较丑陋了，美化大家自己发挥好了！/>
  54.             </LinearLayout>
  55.  
  56.  
  57.         </FrameLayout>
  58.     </LinearLayout>
  59. </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.     //显示菜单
  28.     private void show(){
  29.         menu.showAtLocation(linear, Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL,0,0);
  30.     }
  31.  
  32.     @Override
  33.     public boolean onKeyDown(int keyCode, KeyEvent event) {
  34.         //按以下菜单按键展示菜单 按两下隐藏菜单
  35.         if(!menu.isShowing()&&keyCode == KeyEvent.KEYCODE_MENU){
  36.             show();
  37.         }
  38.         else{
  39.             menu.dismiss();
  40.         }
  41.         return true;
  42.     }
  43. }


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

上一篇：两个主要问题将决定微信支付成败


下一篇：Android provider中使用sqlite内存数据库