Android仿微信底部菜单栏+顶部菜单栏
来源:互联网 发布:编程处理浏览器兼容性 编辑:程序博客网 时间:2024/05/21 17:40
本文要实现仿微信微信底部菜单栏+顶部菜单栏,采用ViewPage来做,每一个page对应一个XML,当手指在ViewPage左右滑动时,就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮,同时如果点击底部菜单按钮,左右滑动page(其实就是xml)并且改变相应按钮的亮度。
一、布局
1、顶部菜单布局,命名为top_layout.xml
1
2
3
4
5
6
<!--?xml version=
1.0
encoding=utf-
8
?-->
<relativelayout android:background=
"@drawable/title_bar"
android:layout_height=
"45dp"
android:layout_width=
"match_parent"
xmlns:android=
"http://schemas.android.com/apk/res/android"
>
<textview android:layout_centervertical=
"true"
android:layout_height=
"wrap_content"
android:layout_marginleft=
"20dp"
android:layout_width=
"wrap_content"
android:text=
"微信"
android:textcolor=
"#ffffff"
android:textsize=
"20sp"
android:textstyle=
"bold"
>
<imagebutton android:background=
"@drawable/top_add"
android:id=
"@+id/top_add"
android:layout_alignparentright=
"true"
android:layout_centervertical=
"true"
android:layout_height=
"wrap_content"
android:layout_width=
"wrap_content"
>
<imagebutton android:background=
"@drawable/top_search"
android:id=
"@+id/top_search"
android:layout_centervertical=
"true"
android:layout_height=
"wrap_content"
android:layout_toleftof=
"@id/top_add"
android:layout_width=
"wrap_content"
>
</imagebutton></imagebutton></textview></relativelayout>
2、底部菜单布局bottom_layout.xml
1
2
3
4
5
<linearlayout android:background=
"@drawable/bottom_bar"
android:layout_height=
"60dp"
android:layout_width=
"match_parent"
android:orientation=
"horizontal"
xmlns:android=
"http://schemas.android.com/apk/res/android"
><linearlayout android:gravity=
"center"
android:id=
"@+id/id_tab_settings"
android:layout_height=
"match_parent"
android:layout_weight=
"1"
android:layout_width=
"0dp"
android:orientation=
"vertical"
><imagebutton android:background=
"#00000000"
android:clickable=
"false"
android:id=
"@+id/id_tab_settings_img"
android:layout_height=
"wrap_content"
android:layout_width=
"wrap_content"
android:src=
"@drawable/tab_settings_normal"
>
<textview android:layout_height=
"wrap_content"
android:layout_width=
"wrap_content"
android:text=
"我"
>
</textview></imagebutton></linearlayout>
</linearlayout>
3、整体布局
将上面两个加到activity_main.xml中去
1
2
3
4
5
<linearlayout android:layout_height=
"match_parent"
android:layout_width=
"match_parent"
android:orientation=
"vertical"
xmlns:android=
"http://schemas.android.com/apk/res/android"
xmlns:tools=
"http://schemas.android.com/tools"
>
<include layout=
"@layout/top_layout"
>
<include layout=
"@layout/bottom_layout"
>
</include></include></linearlayout>
效果还可以,底下菜单栏是有背景的,有点儿白色的,所以看得不是很清,一来微信是选中的
4、定义ViewPage的四个布局
因为要用ViewPage要加四个page,每个page对应一个xml,所以这里定义四个xml.
tab01.xml
1
2
3
4
5
<!--?xml version=
1.0
encoding=utf-
8
?-->
<linearlayout android:gravity=
"center"
android:layout_height=
"match_parent"
android:layout_width=
"match_parent"
android:orientation=
"vertical"
xmlns:android=
"http://schemas.android.com/apk/res/android"
>
<textview android:layout_centervertical=
"true"
android:layout_height=
"wrap_content"
android:layout_width=
"wrap_content"
android:text=
"这里是微信"
android:textcolor=
"#000000"
android:textsize=
"40sp"
android:textstyle=
"bold"
>
</textview></linearlayout>
tab02.xml
1
2
3
4
5
<!--?xml version=
1.0
encoding=utf-
8
?-->
<linearlayout android:gravity=
"center"
android:layout_height=
"match_parent"
android:layout_width=
"match_parent"
android:orientation=
"vertical"
xmlns:android=
"http://schemas.android.com/apk/res/android"
>
<textview android:layout_centervertical=
"true"
android:layout_height=
"wrap_content"
android:layout_width=
"wrap_content"
android:text=
"这里是通讯录"
android:textcolor=
"#000000"
android:textsize=
"40sp"
android:textstyle=
"bold"
>
</textview></linearlayout>
效果:效果和上面一样,只是文字改了一下
tab03.xml
1
2
3
4
5
<!--?xml version=
1.0
encoding=utf-
8
?-->
<linearlayout android:gravity=
"center"
android:layout_height=
"match_parent"
android:layout_width=
"match_parent"
android:orientation=
"vertical"
xmlns:android=
"http://schemas.android.com/apk/res/android"
>
<textview android:layout_centervertical=
"true"
android:layout_height=
"wrap_content"
android:layout_width=
"wrap_content"
android:text=
"这里是发现"
android:textcolor=
"#000000"
android:textsize=
"40sp"
android:textstyle=
"bold"
>
</textview></linearlayout>
tab04.xml
1
2
3
4
5
<!--?xml version=
1.0
encoding=utf-
8
?-->
<linearlayout android:gravity=
"center"
android:layout_height=
"match_parent"
android:layout_width=
"match_parent"
android:orientation=
"vertical"
xmlns:android=
"http://schemas.android.com/apk/res/android"
>
<textview android:layout_centervertical=
"true"
android:layout_height=
"wrap_content"
android:layout_width=
"wrap_content"
android:text=
"这里是我"
android:textcolor=
"#000000"
android:textsize=
"40sp"
android:textstyle=
"bold"
>
</textview></linearlayout>
二、代码
1. MainActivity中把控件和ViewPage初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
package
com.example.tabexample;
import
java.util.ArrayList;
import
java.util.List;
import
android.os.Bundle;
import
android.app.Activity;
import
android.support.v4.view.PagerAdapter;
import
android.support.v4.view.ViewPager;
import
android.support.v4.view.ViewPager.OnPageChangeListener;
import
android.view.LayoutInflater;
import
android.view.View;
import
android.view.ViewGroup;
import
android.view.Window;
import
android.widget.ImageButton;
import
android.widget.LinearLayout;
public
class
MainActivity
extends
Activity
implements
android.view.View.OnClickListener {
private
ViewPager mViewPager;
// 用来放置界面切换
private
PagerAdapter mPagerAdapter;
// 初始化View适配器
private
List<view> mViews =
new
ArrayList<view>();
// 用来存放Tab01-04
// 四个Tab,每个Tab包含一个按钮
private
LinearLayout mTabWeiXin;
private
LinearLayout mTabAddress;
private
LinearLayout mTabFrd;
private
LinearLayout mTabSetting;
// 四个按钮
private
ImageButton mWeiXinImg;
private
ImageButton mAddressImg;
private
ImageButton mFrdImg;
private
ImageButton mSettingImg;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initViewPage();
initEvent();
}
private
void
initEvent() {
mTabWeiXin.setOnClickListener(
this
);
mTabAddress.setOnClickListener(
this
);
mTabFrd.setOnClickListener(
this
);
mTabSetting.setOnClickListener(
this
);
mViewPager.setOnPageChangeListener(
new
OnPageChangeListener() {
/**
*ViewPage左右滑动时
*/
@Override
public
void
onPageSelected(
int
arg0) {
int
currentItem = mViewPager.getCurrentItem();
switch
(currentItem) {
case
0
:
resetImg();
mWeiXinImg.setImageResource(R.drawable.tab_weixin_pressed);
break
;
case
1
:
resetImg();
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break
;
case
2
:
resetImg();
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break
;
case
3
:
resetImg();
mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
break
;
default
:
break
;
}
}
@Override
public
void
onPageScrolled(
int
arg0,
float
arg1,
int
arg2) {
}
@Override
public
void
onPageScrollStateChanged(
int
arg0) {
}
});
}
/**
* 初始化设置
*/
private
void
initView() {
mViewPager = (ViewPager) findViewById(R.id.id_viewpage);
// 初始化四个LinearLayout
mTabWeiXin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);
// 初始化四个按钮
mWeiXinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);
}
/**
* 初始化ViewPage
*/
private
void
initViewPage() {
// 初妈化四个布局
LayoutInflater mLayoutInflater = LayoutInflater.from(
this
);
View tab01 = mLayoutInflater.inflate(R.layout.tab01,
null
);
View tab02 = mLayoutInflater.inflate(R.layout.tab02,
null
);
View tab03 = mLayoutInflater.inflate(R.layout.tab03,
null
);
View tab04 = mLayoutInflater.inflate(R.layout.tab04,
null
);
mViews.add(tab01);
mViews.add(tab02);
mViews.add(tab03);
mViews.add(tab04);
// 适配器初始化并设置
mPagerAdapter =
new
PagerAdapter() {
@Override
public
void
destroyItem(ViewGroup container,
int
position,
Object object) {
container.removeView(mViews.get(position));
}
@Override
public
Object instantiateItem(ViewGroup container,
int
position) {
View view = mViews.get(position);
container.addView(view);
return
view;
}
@Override
public
boolean
isViewFromObject(View arg0, Object arg1) {
return
arg0 == arg1;
}
@Override
public
int
getCount() {
return
mViews.size();
}
};
mViewPager.setAdapter(mPagerAdapter);
}
/**
* 判断哪个要显示,及设置按钮图片
*/
@Override
public
void
onClick(View arg0) {
switch
(arg0.getId()) {
case
R.id.id_tab_weixin:
mViewPager.setCurrentItem(
0
);
resetImg();
mWeiXinImg.setImageResource(R.drawable.tab_weixin_pressed);
break
;
case
R.id.id_tab_address:
mViewPager.setCurrentItem(
1
);
resetImg();
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break
;
case
R.id.id_tab_frd:
mViewPager.setCurrentItem(
2
);
resetImg();
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break
;
case
R.id.id_tab_settings:
mViewPager.setCurrentItem(
3
);
resetImg();
mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
break
;
default
:
break
;
}
}
/**
* 把所有图片变暗
*/
private
void
resetImg() {
mWeiXinImg.setImageResource(R.drawable.tab_weixin_normal);
mAddressImg.setImageResource(R.drawable.tab_address_normal);
mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
mSettingImg.setImageResource(R.drawable.tab_settings_normal);
}
}
</view></view>
1
requestWindowFeature(Window.FEATURE_NO_TITLE);
2、效果:
三、思路说明
1、分别为顶部菜单栏和底部菜单栏新建一个布局
2、中间是ViewPage,然后里面放四个Page(tab01-tab04.xml),注意,要通过适配器给ViewPage提供内容.
3、监听ViewPage和底部菜单栏按钮的事件(注意,这里的按钮放在一个LinearLayout中,所以我们监听了LinearLayout的触摸事件,而屏蔽了Imgaebutton的触摸事件)
4、
1
public
void
onClick(View arg0)
1
mViewPager.setOnPageChangeListener(
new
OnPageChangeListener()
四、不足之处
1、最新版微信上应该是左右滑动是有部分亮度变化的,这里直接转变过去了。
2、最新版微信文字也要跟着变化,这里没做改变
0 0
- android 底部菜单栏(仿微信顶部菜单栏)
- Android仿微信底部菜单栏+顶部菜单栏
- Android仿微信底部菜单栏+顶部菜单栏
- Android仿微信底部菜单栏+顶部菜单栏(附源码)
- Android仿微信底部菜单栏+顶部菜单栏(附源码)
- Android仿微信底部菜单栏+顶部菜单栏(附源码)
- Android的FragmentTabHost使用总结(顶部或底部菜单栏)
- Android的FragmentTabHost使用(顶部或底部菜单栏)
- android实现底部菜单栏
- android实现底部菜单栏
- Android底部菜单栏设计
- android底部菜单栏demo
- android底部菜单栏实现
- android底部菜单栏
- Android底部菜单栏
- Android--底部菜单栏实现
- android底部菜单栏demo
- android底部菜单栏demo .
- Command模式
- Android 查询端口
- C language tutorial Chapter fifth: function 3
- 安卓使用Root权限实现后台模拟全局按键、触屏事件方法(类似按键精灵)
- 大数据/数据挖掘/推荐系统/机器学习相关资源
- Android仿微信底部菜单栏+顶部菜单栏
- C语言函数库和文件
- MySQL 关于varchar
- 使用Maven导出工程依赖的jar包
- 排列数算法A(n,m)(n>=m)
- 两个超大数相乘
- 高级数据库及一步一步配置versant数据库
- 问题解决:继承抽象类时出现error LINK2001 无法解析的外部符号
- 使用位图字体工具BMFont从图片生成自定义字体