Android仿QQ空间底部菜单示例代码
2018-10-12 13:54
941 查看
之前曾经在网上看到Android仿QQ空间底部菜单的Demo,发现这个Demo有很多Bug,布局用了很多神秘数字。于是研究了一下QQ空间底部菜单的实现,自己写了一个,供大家参考。效果如下图所示:
1、实现原理很简单,底部菜单是一个水平分布的LinearLayout,里面又是五个LinearLayout,它们的layout_weight都为1,意味着底部菜单的子控件将屏幕宽度平均分为5部分。五个LinearLayout除了中间那个,其余都在里面放置ImageView和TextView(中间先空着,什么都不放,后面用来放底盘和加号的)。
2、中间的加号和底盘是用FramLayout实现的,现在底部居中的位置放置底盘,然后在相同位置放置加号,就搞定了。
3、设置加号的触摸事件,弹窗是用PopupWindow实现的,然后再把加号的图片替换成乘号就搞定了。代码如下所示:
ButtomMenuActivity.java:
tab.xml:
test.xml:
这个Demo只是仿着来玩,可能有些地方写得不怎么规范。如果有什么问题,希望大家可以指出,谢谢!
![](http://files.jb51.net/file_images/article/201306/201306171634394.gif?201351716350)
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只是仿着来玩,可能有些地方写得不怎么规范。如果有什么问题,希望大家可以指出,谢谢!
您可能感兴趣的文章:
相关文章推荐
- ios实现底部PopupWindow的示例代码(底部弹出菜单)
- Android底部弹窗的实现示例代码
- android4.0.3去掉底部状态栏statusbar,全屏显示示例代码
- android特效集锦系列之六 仿QQ空间底部菜单
- Android中封装RecyclerView实现添加头部和底部示例代码
- android SectorMenuView底部导航扇形菜单的实现代码
- Android TabLayout 实现底部Tab的示例代码
- Android底部菜单(中间功能键)仿qq空间客户端
- Android仿QQ空间底部菜单
- Android仿QQ空间底部菜单
- ImageView 实现Android colorPikcer 选择器的示例代码
- Android的PopWindow动画实现底部滑出菜单
- android判断动画已结束示例代码
- iOS实现只有底部边框线的输入框示例代码
- android 保持菜单一直在底部的实现方法
- android PopupWindow实现从底部弹出或滑出选择菜单或窗口
- android代码里面写布局简单示例
- Android 分页控件制成底部菜单.
- 【Android应用开发】 Universal Image Loader ( 使用简介 | 示例代码解析 )
- [Android阅读代码]圆形旋转菜单CircleMenu