Android仿微信顶/底部菜单栏效果

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

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

<?xml version="1.0" encoding="utf-8"?> 
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="45dp" 
 android:background="@drawable/title_bar" > 
 <textview 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_marginleft="20dp" 
  android:text="微信" 
  android:layout_centervertical="true" 
  android:textcolor="#ffffff" 
  android:textsize="20sp" 
  android:textstyle="bold" 
  /> 
 <imagebutton 
  android:id="@+id/top_add" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:background="@drawable/top_add" 
  android:layout_centervertical="true" 
  android:layout_alignparentright="true" 
  /> 
  <imagebutton 
  android:id="@+id/top_search" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:background="@drawable/top_search" 
  android:layout_centervertical="true" 
  android:layout_toleftof="@id/top_add" 
  /> 
</relativelayout> 

效果：

2、底部菜单布局bottom_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="60dp" 
 android:background="@drawable/bottom_bar" 
 android:orientation="horizontal" > 
 
 <linearlayout 
  android:id="@+id/id_tab_weixin" 
  android:layout_width="0dp" 
  android:layout_height="match_parent" 
  android:layout_weight="1" 
  android:gravity="center" 
  android:orientation="vertical" > 
 <!-- android:clickable="false" 是为了防止imagebutton截取了触摸事件 ，这里事件要给它的上一级linearlayout--> 
  <imagebutton 
    android:id="@+id/id_tab_weixin_img" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:background="#00000000" 
   android:clickable="false" 
   android:src="@drawable/tab_weixin_pressed" /> 
 
  <textview 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:text="微信" 
   /> 
 </linearlayout> 
 
 <linearlayout 
   android:id="@+id/id_tab_address" 
  android:layout_width="0dp" 
  android:layout_height="match_parent" 
  android:layout_weight="1" 
  android:gravity="center" 
  android:orientation="vertical" > 
 
  <imagebutton 
    android:id="@+id/id_tab_address_img" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:background="#00000000" 
    android:clickable="false" 
   android:src="@drawable/tab_address_normal" /> 
 
  <textview 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:text="通讯录" 
   /> 
 </linearlayout> 
 
 <linearlayout 
  android:id="@+id/id_tab_frd" 
  android:layout_width="0dp" 
  android:layout_height="match_parent" 
  android:layout_weight="1" 
  android:gravity="center" 
  android:orientation="vertical" > 
 
  <imagebutton 
    android:id="@+id/id_tab_frd_img" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:background="#00000000" 
    android:clickable="false" 
   android:src="@drawable/tab_find_frd_normal" /> 
 
  <textview 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:text="发现" 
 /> 
 </linearlayout> 
 
 <linearlayout 
  android:id="@+id/id_tab_settings" 
  android:layout_width="0dp" 
  android:layout_height="match_parent" 
  android:layout_weight="1" 
  android:gravity="center" 
  android:orientation="vertical" > 
 
  <imagebutton 
    android:id="@+id/id_tab_settings_img" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:background="#00000000" 
   android:clickable="false" 
   android:src="@drawable/tab_settings_normal" /> 
 
  <textview 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:text="我" 
   /> 
 </linearlayout> 
 
</linearlayout> 

效果：

3、整体布局
将上面两个加到activity_main.xml中去

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:orientation="vertical" > 
 
 <include layout="@layout/top_layout" /> 
 
 <android.support.v4.view.viewpager 
  android:id="@+id/id_viewpage" 
  android:layout_width="fill_parent" 
  android:layout_height="0dp" 
  android:layout_weight="1" > 
 </android.support.v4.view.viewpager> 
" 
 
 <include layout="@layout/bottom_layout" /> 
 
</linearlayout> 

效果：

效果还可以，底下菜单栏是有背景的，有点儿白色的，所以看得不是很清，一来微信是选中的
4、定义viewpage的四个布局
因为要用viewpage要加四个page,每个page对应一个xml，所以这里定义四个xml.
tab01.xml

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:gravity="center" 
 android:orientation="vertical" > 
  <textview 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:text="这里是微信" 
  android:layout_centervertical="true" 
  android:textcolor="#000000" 
  android:textsize="40sp" 
  android:textstyle="bold" 
  /> 
 
</linearlayout> 

效果：

tab02.xml

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:gravity="center" 
 android:orientation="vertical" > 
  <textview 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:text="这里是通讯录" 
  android:layout_centervertical="true" 
  android:textcolor="#000000" 
  android:textsize="40sp" 
  android:textstyle="bold" 
  /> 
 
</linearlayout> 

效果：效果和上面一样，只是文字改了一下
tab03.xml

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:gravity="center" 
 android:orientation="vertical" > 
  <textview 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:text="这里是发现" 
  android:layout_centervertical="true" 
  android:textcolor="#000000" 
  android:textsize="40sp" 
  android:textstyle="bold" 
  /> 
 
</linearlayout> 

效果：效果和上面一样，只是文字改了一下
tab04.xml

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:gravity="center" 
 android:orientation="vertical" > 
  <textview 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:text="这里是我" 
  android:layout_centervertical="true" 
  android:textcolor="#000000" 
  android:textsize="40sp" 
  android:textstyle="bold" 
  /> 
 
</linearlayout> 

效果：效果和上面一样，只是文字改了一下
二、代码
1. mainactivity中把控件和viewpage初始化

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); 
 } 
 
} 

代码量很短，只有几百行，功能就可以实现了，注意这里去掉程序原本的标题栏我直接用了
requestwindowfeature(window.feature_no_title); 

2、效果：

三、思路说明
1、分别为顶部菜单栏和底部菜单栏新建一个布局
2、中间是viewpage,然后里面放四个page(tab01-tab04.xml)，注意，要通过适配器给viewpage提供内容.
3、监听viewpage和底部菜单栏按钮的事件（注意，这里的按钮放在一个linearlayout中，所以我们监听了linearlayout的触摸事件，而屏蔽了imgaebutton的触摸事件）
4、
public void onclick(view arg0) 
这里面监听的是底部菜单的触摸事件，根据触摸的控件，改变自身的亮度、改变viewpage显示的内容
mviewpager.setonpagechangelistener(new onpagechangelistener()  

这里监听的是viewpage左右滑动的事件，改变相应控件的亮度、改变viewpage显示的内容
四、不足之处
1、最新版微信上应该是左右滑动是有部分亮度变化的，这里直接转变过去了。
2、最新版微信文字也要跟着变化，这里没做改变

本文已被整理到了《android微信开发教程汇总》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助。