Android仿QQ空间底部菜单

 

分类： Android开发 2013-06-17 09:29  1554人阅读  评论(42)  收藏  举报

  之前曾经在网上看到Android仿QQ空间底部菜单的Demo，发现这个Demo有很多Bug，布局用了很多神秘数字。于是研究了一下QQ空间底部菜单的实现，自己写了一个，供大家参考。效果如下图所示：

   点击中间的按钮后->

  1、实现原理很简单，底部菜单是一个水平分布的LinearLayout，里面又是五个LinearLayout，它们的layout_weight都为1，意味着底部菜单的子控件将屏幕宽度平均分为5部分。五个LinearLayout除了中间那个，其余都在里面放置ImageView和TextView（中间先空着，什么都不放，后面用来放底盘和加号的）。

  2、中间的加号和底盘是用FramLayout实现的，现在底部居中的位置放置底盘，然后在相同位置放置加号，就搞定了。

  3、设置加号的触摸事件，弹窗是用PopupWindow实现的，然后再把加号的图片替换成乘号就搞定了。代码如下所示：

  ButtomMenuActivity.java：

[java]  view plain copy

1. package com.shamoo.qqbuttommenu;  
2.   
3. import com.shamoo.qqbuttommenu.R;  
4.   
5. import android.app.TabActivity;  
6. import android.content.Context;  
7. import android.content.Intent;  
8. import android.graphics.Color;  
9. import android.graphics.drawable.BitmapDrawable;  
10. import android.os.Bundle;  
11. import android.view.Gravity;  
12. import android.view.LayoutInflater;  
13. import android.view.MotionEvent;  
14. import android.view.View;  
15. import android.view.View.OnClickListener;  
16. import android.view.View.OnTouchListener;  
17. import android.view.WindowManager;  
18. import android.widget.AbsListView;  
19. import android.widget.FrameLayout;  
20. import android.widget.ImageView;  
21. import android.widget.LinearLayout;  
22. import android.widget.PopupWindow;  
23. import android.widget.PopupWindow.OnDismissListener;  
24. import android.widget.RadioButton;  
25. import android.widget.TabHost;  
26.   
27. public class ButtomMenuActivity extends TabActivity {  
28.     FrameLayout fmpan;  
29.     TabHost tabHost;  
30.     ImageView image;  
31.     FrameLayout fm;  
32.     LayoutInflater inflater;  
33.     private RadioButton tab_home, tab_second;  
34.     PopupWindow popup;  
35.       
36.     public void onCreate(Bundle savedInstanceState) {  
37.         super.onCreate(savedInstanceState);  
38.         setContentView(R.layout.tab);     
39.         initView();  
40.         fm.setOnClickListener(new OnClickListener() {  
41.             public void onClick(View v) {  
42.                 image.setImageResource(R.drawable.toolbar_plusback);  
43.                 showWindow(fmpan);  
44.             }  
45.         });  
46.     }  
47.   
48.     private void initView() {  
49.         inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
50.         fmpan = (FrameLayout)findViewById(R.id.tab1);  
51.         fm = (FrameLayout)findViewById(R.id.btn_ck);  
52.         image = (ImageView)findViewById(R.id.image1);  
53.     }  
54.       
55.     private void showWindow(View parent) {    
56.         if(popup == null) {    
57.             LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);    
58.             View view = layoutInflater.inflate(R.layout.write_tab, null);    
59.             // 创建一个PopuWidow对象    
60.             popup = new PopupWindow(view, LinearLayout.LayoutParams.MATCH_PARENT,320);  
61.             // 设置焦点在弹窗上    
62.             popup.setFocusable(true);    
63.             // 设置允许在外点击消失    
64.             popup.setOutsideTouchable(true);  
65.             // 设置弹窗消失事件监听  
66.             popup.setOnDismissListener(new OnDismissListener() {  
67.                 public void onDismiss() {  
68.                     // TODO Auto-generated method stub  
69.                     image.setImageResource(R.drawable.toolbar_plus);  
70.                 }  
71.             });  
72.             // 这个是为了点击“返回Back”也能使其消失，并且并不会影响你的背景    
73.             popup.setBackgroundDrawable(new BitmapDrawable());  
74.             popup.setTouchInterceptor(new OnTouchListener() {    
75.                 public boolean onTouch(View view, MotionEvent event) {    
76.                     if(event.getAction() == MotionEvent.ACTION_OUTSIDE) {    
77.                         popup.dismiss();  
78.                         image.setImageResource(R.drawable.toolbar_plus);              
79.                         return true;    
80.                     }    
81.                     return false;    
82.                 }    
83.             });  
84.         }  
85.         if(!popup.isShowing()) {  
86.             popup.showAsDropDown(parent, Gravity.CENTER, 0);  
87.         }  
88.     }    
89. }  

  tab.xml:

[html]  view plain copy

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.     <FrameLayout   
7.         android:id="@+id/l1"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent" >  
10.         <FrameLayout  
11.             android:id="@android:id/tabcontent"  
12.             android:layout_width="fill_parent"  
13.             android:layout_height="fill_parent"  
14.              />  
15.         <TabWidget  
16.             android:id="@android:id/tabs"  
17.             android:layout_width="fill_parent"  
18.             android:layout_height="10.0px"  
19.             android:visibility="gone" />  
20.         <RelativeLayout   
21.             android:layout_width="fill_parent"  
22.             android:layout_height="fill_parent">  
23.             <include  
24.                 android:layout_alignParentBottom="true"  
25.                 android:id="@+id/tab1"  
26.                 android:layout_width="fill_parent"  
27.                 android:layout_height="wrap_content"  
28.                 layout = "@layout/test" />  
29.         </RelativeLayout>  
30.           
31.     </FrameLayout>  
32.   
33. </TabHost>  

  test.xml:

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content"  
5.     android:background="@drawable/toolbar_bg" >  
6.     <LinearLayout  
7.         android:layout_width="fill_parent"  
8.         android:layout_height="wrap_content"  
9.         android:layout_gravity="bottom"  
10.         android:gravity="center_horizontal"  
11.         android:orientation="horizontal" >  
12.         <LinearLayout  
13.             android:layout_width="fill_parent"  
14.             android:layout_height="wrap_content"  
15.             android:orientation="vertical"  
16.             android:layout_weight="1" >  
17.             <ImageView  
18.                 android:layout_width="wrap_content"  
19.                 android:layout_height="wrap_content"  
20.                 android:layout_gravity="top|center"  
21.                 android:src="@drawable/tab_timefeed_opacity"  
22.                 android:visibility="visible" />  
23.             <TextView  
24.                 android:layout_width="wrap_content"  
25.                 android:layout_height="wrap_content"  
26.                 android:layout_gravity="bottom|center"  
27.                 android:text="好友动态"  
28.                 android:textSize="10.0dip"  
29.                 android:visibility="visible" />  
30.         </LinearLayout>  
31.         <LinearLayout  
32.             android:layout_width="fill_parent"  
33.             android:layout_height="wrap_content"  
34.             android:orientation="vertical"  
35.             android:layout_weight="1" >  
36.             <ImageView  
37.                 android:layout_width="wrap_content"  
38.                 android:layout_height="wrap_content"  
39.                 android:layout_gravity="top|center"  
40.                 android:src="@drawable/tab_feedback_opacity"  
41.                 android:visibility="visible" />  
42.             <TextView  
43.                 android:layout_width="wrap_content"  
44.                 android:layout_height="wrap_content"  
45.                 android:layout_gravity="bottom|center"  
46.                 android:text="与我相关"  
47.                 android:textSize="10.0dip"  
48.                 android:visibility="visible" />  
49.         </LinearLayout>  
50.         <LinearLayout  
51.             android:layout_width="fill_parent"  
52.             android:layout_height="wrap_content"  
53.             android:orientation="vertical"  
54.             android:layout_weight="1" />  
55.         <LinearLayout  
56.             android:layout_width="fill_parent"  
57.             android:layout_height="wrap_content"  
58.             android:orientation="vertical"  
59.             android:layout_weight="1" >  
60.             <ImageView  
61.                 android:layout_width="wrap_content"  
62.                 android:layout_height="wrap_content"  
63.                 android:layout_gravity="top|center"  
64.                 android:src="@drawable/tab_myzone_opacity"  
65.                 android:visibility="visible" />  
66.             <TextView  
67.                 android:layout_width="wrap_content"  
68.                 android:layout_height="wrap_content"  
69.                 android:layout_gravity="bottom|center"  
70.                 android:text="主页"  
71.                 android:textSize="10.0dip"  
72.                 android:visibility="visible" />  
73.         </LinearLayout>  
74.         <LinearLayout  
75.             android:layout_width="fill_parent"  
76.             android:layout_height="wrap_content"  
77.             android:orientation="vertical"  
78.             android:layout_weight="1" >  
79.             <ImageView  
80.                 android:layout_width="wrap_content"  
81.                 android:layout_height="wrap_content"  
82.                 android:layout_gravity="top|center"  
83.                 android:src="@drawable/tab_applist_opacity"  
84.                 android:visibility="visible" />  
85.             <TextView  
86.                 android:layout_width="wrap_content"  
87.                 android:layout_height="wrap_content"  
88.                 android:layout_gravity="bottom|center"  
89.                 android:text="应用"  
90.                 android:textSize="10.0dip"  
91.                 android:visibility="visible" />  
92.         </LinearLayout>  
93.     </LinearLayout>  
94.     <FrameLayout  
95.         android:layout_width="wrap_content"  
96.         android:layout_height="wrap_content"  
97.         android:layout_gravity="center_horizontal"  
98.         android:layout_weight="1" >  
99.         <ImageView  
100.             android:layout_width="wrap_content"  
101.             android:layout_height="wrap_content"  
102.             android:layout_gravity="center"  
103.             android:src="@drawable/toolbar_write_bg" />  
104.     </FrameLayout>  
105.     <FrameLayout  
106.       android:id="@+id/btn_ck"  
107.         android:layout_width="wrap_content"  
108.         android:layout_height="wrap_content"  
109.         android:layout_gravity="center"  
110.         android:layout_weight="1" >  
111.         <ImageView  
112.             android:id="@+id/image1"  
113.             android:layout_width="wrap_content"  
114.             android:layout_height="wrap_content"  
115.             android:layout_gravity="center"  
116.             android:layout_marginTop="2.0dip"  
117.             android:src="@drawable/toolbar_plus" />  
118.     </FrameLayout>  
119. </FrameLayout>  

  这个Demo只是仿着来玩，可能有些地方写得不怎么规范。如果有什么问题，希望大家可以指出，谢谢！