Android仿微信底部菜单栏+顶部菜单栏（附源码）

            林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

        本文要实现仿微信微信底部菜单栏+顶部菜单栏，采用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="#00