Android仿QQ空间底部菜单示例代码
Android仿QQ空间底部菜单示例代码
发布时间：2017-01-07 来源：查字典编辑
摘要：之前曾经在网上看到Android仿QQ空间底部菜单的Demo，发现这个Demo有很多Bug，布局用了很多神秘数字。于是研究了一下QQ空间底部...

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

1

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只是仿着来玩，可能有些地方写得不怎么规范。如果有什么问题，希望大家可以指出，谢谢！

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新安卓软件开发学习
热门安卓软件开发学习
编程开发子分类