Android仿QQ空间底部菜单示例代码

更新时间：2013年06月17日 16:37:12 作者：

Android仿QQ空间底部菜单的Demo，发现这个Demo有很多Bug，布局用了很多神秘数字。于是研究了一下并自己写了一个与大家分享下

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

1、实现原理很简单，底部菜单是一个水平分布的LinearLayout，里面又是五个LinearLayout，它们的layout_weight都为1，意味着底部菜单的子控件将屏幕宽度平均分为5部分。五个LinearLayout除了中间那个，其余都在里面放置ImageView和TextView（中间先空着，什么都不放，后面用来放底盘和加号的）。
2、中间的加号和底盘是用FramLayout实现的，现在底部居中的位置放置底盘，然后在相同位置放置加号，就搞定了。
3、设置加号的触摸事件，弹窗是用PopupWindow实现的，然后再把加号的图片替换成乘号就搞定了。代码如下所示：
ButtomMenuActivity.java：

复制代码代码如下:

 
package com.shamoo.qqbuttommenu; 
import com.shamoo.qqbuttommenu.R; 
import android.app.TabActivity; 
import android.content.Context; 
import android.content.Intent; 
import android.graphics.Color; 
import android.graphics.drawable.BitmapDrawable; 
import android.os.Bundle; 
import android.view.Gravity; 
import android.view.LayoutInflater; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.view.View.OnTouchListener; 
import android.view.WindowManager; 
import android.widget.AbsListView; 
import android.widget.FrameLayout; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.PopupWindow; 
import android.widget.PopupWindow.OnDismissListener; 
import android.widget.RadioButton; 
import android.widget.TabHost; 
public class ButtomMenuActivity extends TabActivity { 
FrameLayout fmpan; 
TabHost tabHost; 
ImageView image; 
FrameLayout fm; 
LayoutInflater inflater; 
private RadioButton tab_home, tab_second; 
PopupWindow popup; 

public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.tab); 
initView(); 
fm.setOnClickListener(new OnClickListener() { 
public void onClick(View v) { 
image.setImageResource(R.drawable.toolbar_plusback); 
showWindow(fmpan); 
} 
}); 
} 
private void initView() { 
inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
fmpan = (FrameLayout)findViewById(R.id.tab1); 
fm = (FrameLayout)findViewById(R.id.btn_ck); 
image = (ImageView)findViewById(R.id.image1); 
} 

private void showWindow(View parent) { 
if(popup == null) { 
LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
View view = layoutInflater.inflate(R.layout.write_tab, null); 
// 创建一个PopuWidow对象 
popup = new PopupWindow(view, LinearLayout.LayoutParams.MATCH_PARENT,320); 
// 设置焦点在弹窗上 
popup.setFocusable(true); 
// 设置允许在外点击消失 
popup.setOutsideTouchable(true); 
// 设置弹窗消失事件监听 
popup.setOnDismissListener(new OnDismissListener() { 
public void onDismiss() { 
// TODO Auto-generated method stub 
image.setImageResource(R.drawable.toolbar_plus); 
} 
}); 
// 这个是为了点击“返回Back”也能使其消失，并且并不会影响你的背景 
popup.setBackgroundDrawable(new BitmapDrawable()); 
popup.setTouchInterceptor(new OnTouchListener() { 
public boolean onTouch(View view, MotionEvent event) { 
if(event.getAction() == MotionEvent.ACTION_OUTSIDE) { 
popup.dismiss(); 
image.setImageResource(R.drawable.toolbar_plus); 
return true; 
} 
return false; 
} 
}); 
} 
if(!popup.isShowing()) { 
popup.showAsDropDown(parent, Gravity.CENTER, 0); 
} 
} 
} 

tab.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" > 
<FrameLayout 
android:id="@+id/l1" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" > 
<FrameLayout 
android:id="@android:id/tabcontent" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
/> 
<TabWidget 
android:id="@android:id/tabs" 
android:layout_width="fill_parent" 
android:layout_height="10.0px" 
android:visibility="gone" /> 
<RelativeLayout 
android:layout_width="fill_parent" 
android:layout_height="fill_parent"> 
<include 
android:layout_alignParentBottom="true" 
android:id="@+id/tab1" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
layout = "@layout/test" /> 
</RelativeLayout> 
</FrameLayout> 
</TabHost> 

test.xml:

复制代码代码如下:

 
<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:background="@drawable/toolbar_bg" > 
<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:layout_gravity="bottom" 
android:gravity="center_horizontal" 
android:orientation="horizontal" > 
<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:orientation="vertical" 
android:layout_weight="1" > 
<ImageView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="top|center" 
android:src="@drawable/tab_timefeed_opacity" 
android:visibility="visible" /> 
<TextView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="bottom|center" 
android:text="好友动态" 
android:textSize="10.0dip" 
android:visibility="visible" /> 
</LinearLayout> 
<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:orientation="vertical" 
android:layout_weight="1" > 
<ImageView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="top|center" 
android:src="@drawable/tab_feedback_opacity" 
android:visibility="visible" /> 
<TextView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="bottom|center" 
android:text="与我相关" 
android:textSize="10.0dip" 
android:visibility="visible" /> 
</LinearLayout> 
<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:orientation="vertical" 
android:layout_weight="1" /> 
<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:orientation="vertical" 
android:layout_weight="1" > 
<ImageView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="top|center" 
android:src="@drawable/tab_myzone_opacity" 
android:visibility="visible" /> 
<TextView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="bottom|center" 
android:text="主页" 
android:textSize="10.0dip" 
android:visibility="visible" /> 
</LinearLayout> 
<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:orientation="vertical" 
android:layout_weight="1" > 
<ImageView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="top|center" 
android:src="@drawable/tab_applist_opacity" 
android:visibility="visible" /> 
<TextView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="bottom|center" 
android:text="应用" 
android:textSize="10.0dip" 
android:visibility="visible" /> 
</LinearLayout> 
</LinearLayout> 
<FrameLayout 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_weight="1" > 
<ImageView 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center" 
android:src="@drawable/toolbar_write_bg" /> 
</FrameLayout> 
<FrameLayout 
android:id="@+id/btn_ck" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center" 
android:layout_weight="1" > 
<ImageView 
android:id="@+id/image1" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center" 
android:layout_marginTop="2.0dip" 
android:src="@drawable/toolbar_plus" /> 
</FrameLayout> 
</FrameLayout> 

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

您可能感兴趣的文章:

Android面向单Activity开发示例解析
这篇文章主要为大家介绍了Android面向单Activity开发示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
android仿iphone主题效果的主菜单
这篇文章主要为大家详细介绍了android仿iphone主题效果的主菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Flutter Widget开发之Focus组件图文详解
这篇文章主要为大家介绍了Flutter Widget开发之Focus组件图文详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Android利用ViewPager实现用户引导界面效果的方法
这篇文章主要介绍了Android利用ViewPager实现用户引导界面效果的方法,结合实例形式详细分析了Android软件功能界面的初始化、view实例化、动画功能实现与布局相关技巧,需要的朋友可以参考下
2016-07-07
android实现下拉菜单三级联动
这篇文章主要为大家详细介绍了android实现下拉菜单三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
基于android样式与主题(style&theme)的详解
本篇文章是对android中的样式与主题(style&theme)进行了详细的分析介绍，需要的朋友参考下
2013-06-06
Android Mms之:短信发送流程(图文详解)
本篇文章是对Android中的短信发送流程进行了详细的分析介绍，需要的朋友参考下
2013-05-05
Flutter投票组件使用方法详解
这篇文章主要为大家详细介绍了Flutter投票组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
Android 单双击实现的方法步骤
这篇文章主要介绍了Android 单双击实现的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
Adnroid打造通用的带进度条的WebView
这篇文章主要为大家详细介绍了Adnroid打造通用的带进度条的WebView的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09