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

亦凉 2021-09-10 11:56 582阅读 0赞

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

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

最终效果：[源码免费下载][Link 1]

![20150307225008271][]

# 一、布局 #

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>

效果：

![Center][]

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>

效果：

![Center 1][]

3、整体布局

将上面两个加到activity\_main.xml中去

效果：

![20150307223553250][]

效果还可以，底下菜单栏是有背景的，有点儿白色的，所以看得不是很清，一来微信是选中的

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>

效果：

![20150307224215092][]

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、效果：

![20150307225008271][]

# 三、思路说明    #

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][Evankaka]原创作品。转载请注明出处[http://blog.csdn.net/evankaka][Evankaka]

[Evankaka]: http://blog.csdn.net/evankaka
[Link 1]: http://download.csdn.net/detail/evankaka/8481619
[20150307225008271]: /images/20210811/8591ba81185941f3ba081f8724246801.png
[Center]: /images/20210811/4cdd6c1489614e06851fd599d5c3141d.png
[Center 1]: /images/20210811/c8e1bd0fde80438bb030b7ce34ecba2c.png
[20150307223553250]: /images/20210811/1140a3895efe4b08a760da9131a3fcc5.png
[20150307224215092]: /images/20210811/6824124e74d148bb9d32a43a29191ab3.png