Android仿QQ空间底部菜单示例代码
程序员文章站
2023-01-02 08:35:40
之前曾经在网上看到android仿qq空间底部菜单的demo,发现这个demo有很多bug,布局用了很多神秘数字。于是研究了一下qq空间底部菜单的实现,自己写了一个,供大家...
之前曾经在网上看到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只是仿着来玩,可能有些地方写得不怎么规范。如果有什么问题,希望大家可以指出,谢谢!
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 图片缩放与旋转的实现详解