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" >

         <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 mViews = new ArrayList();// 用来存放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、最新版微信文字也要跟着变化，这里没做改变

  林炳文Evankaka原创作品。http://blog.csdn.net/evankaka