Android仿QQ空间底部菜单

来源：互联网发布：基于nodejs的cms 编辑：程序博客网时间：2024/05/14 22:33

之前曾经在网上看到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 stubimage.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只是仿着来玩，可能有些地方写得不怎么规范。如果有什么问题，希望大家可以指出，谢谢！

谢谢大家的支持！以前一直要大家留邮箱发代码实在太麻烦了，所以Shamoo把代码上传到资源。链接：点击打开链接

需要一分资源分，大家评论一下那一分就还回来了，别恨我，哈哈~~