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="#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、最新版微信文字也要跟着變化，這裏沒做改變

            林炳文Evankaka原創作品。轉載請註明出處http://blog.csdn.net/evankaka