Android仿微信底部菜单栏+顶部菜单栏

Posted 2022-07-28 大前端圈

        本文要实现仿微信微信底部菜单栏+顶部菜单栏，采用ViewPage来做，每一个page对应一个XML，当手指在ViewPage左右滑动时，就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮，同时如果点击底部菜单按钮，左右滑动page(其实就是xml)并且改变相应按钮的亮度。

最终效果：源码免费下载

一、布局

1、顶部菜单布局，命名为top_layout.xml

[html]

  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="45dp"  
5.     android:background="@drawable/title_bar" >  
6.     <TextView  
7.         android:layout_width="wrap_content"  
8.         android:layout_height="wrap_content"  
9.         android:layout_marginLeft="20dp"  
10.         android:text="微信"  
11.         android:layout_centerVertical="true"  
12.         android:textColor="#ffffff"  
13.         android:textSize="20sp"  
14.         android:textStyle="bold"  
15.         />  
16.     <ImageButton   
17.         android:id="@+id/top_add"  
18.         android:layout_width="wrap_content"  
19.         android:layout_height="wrap_content"  
20.         android:background="@drawable/top_add"  
21.         android:layout_centerVertical="true"  
22.         android:layout_alignParentRight="true"  
23.         />  
24.        <ImageButton   
25.         android:id="@+id/top_search"  
26.         android:layout_width="wrap_content"  
27.         android:layout_height="wrap_content"  
28.         android:background="@drawable/top_search"  
29.         android:layout_centerVertical="true"  
30.         android:layout_toLeftOf="@id/top_add"  
31.         />  
32. </RelativeLayout>  

效果：

2、底部菜单布局bottom_layout.xml

[html]

  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="60dp"  
5.     android:background="@drawable/bottom_bar"  
6.     android:orientation="horizontal" >  
7.    
8.     <LinearLayout  
9.         android:id="@+id/id_tab_weixin"  
10.         android:layout_width="0dp"  
11.         android:layout_height="match_parent"  
12.         android:layout_weight="1"  
13.         android:gravity="center"  
14.         android:orientation="vertical" >  
15.  <!-- android:clickable="false" 是为了防止ImageButton截取了触摸事件 ，这里事件要给它的上一级linearlayout-->  
16.         <ImageButton  
17.              android:id="@+id/id_tab_weixin_img"  
18.             android:layout_width="wrap_content"  
19.             android:layout_height="wrap_content"  
20.             android:background="#00000000"  
21.             android:clickable="false"  
22.             android:src="@drawable/tab_weixin_pressed" />  
23.   
24.         <TextView  
25.             android:layout_width="wrap_content"  
26.             android:layout_height="wrap_content"  
27.             android:text="微信"  
28.           />  
29.     </LinearLayout>  
30.   
31.     <LinearLayout  
32.          android:id="@+id/id_tab_address"  
33.         android:layout_width="0dp"  
34.         android:layout_height="match_parent"  
35.         android:layout_weight="1"  
36.         android:gravity="center"  
37.         android:orientation="vertical" >  
38.   
39. 以上是关于Android仿微信底部菜单栏+顶部菜单栏的主要内容，如果未能解决你的问题，请参考以下文章

    android 仿微信demo————微信顶部操作栏加号按钮实现（弹出子菜单）

    Android实战项目 仿微信底部导航栏

    Android实战项目 仿微信底部导航栏

    Android实战项目 仿微信底部导航栏

    Android 仿微信长按列表弹出PopupMenu菜单栏

    android 底部菜单栏实现（转）