android仿微信顶部菜单栏的实现

仿微信顶部菜单栏的实现，效果如图：

源码：

1、PageFragment

package com.example.winxintop;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class PageFragment extends Fragment {

	public static final String ARG = "arg";

	private TextView text;
	private int position;

	public static PageFragment newInstance(int position) {
		PageFragment pageFragment = new PageFragment();
		Bundle b = new Bundle();
		b.putInt(ARG, position);
		pageFragment.setArguments(b);
		return pageFragment;
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		position = getArguments().getInt(ARG, 0);
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment_page, container, false);
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		text = (TextView) getView().findViewById(R.id.text);
		text.setText(String.valueOf(position));
	}
}

2、PageFragment的布局fragment_page：

<?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:background="@android:color/darker_gray"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="18sp" />

</LinearLayout>

3、MainActivity

package com.example.winxintop;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements OnClickListener {
	private TextView text1, text2, text3;
	private ImageView tabLine;
	private ViewPager pager;

	private DisplayMetrics dm = new DisplayMetrics();
	private int tabWidth;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		tabWidth = dm.widthPixels / 3;
		initView();
	}

	private void initView() {
		text1 = (TextView) findViewById(R.id.text1);
		text1.setOnClickListener(this);
		text2 = (TextView) findViewById(R.id.text2);
		text2.setOnClickListener(this);
		text3 = (TextView) findViewById(R.id.text3);
		text3.setOnClickListener(this);
		tabLine = (ImageView) findViewById(R.id.tabLine);
		pager = (ViewPager) findViewById(R.id.pager);

		pager.setAdapter(new FragmentAdapter(getSupportFragmentManager()));
		pager.setOnPageChangeListener(new PageListener());

		Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
				R.drawable.tab_line);
		Bitmap b = Bitmap.createBitmap(bitmap, 0, 0, tabWidth, 8);// 设置tab的宽度和高度
		tabLine.setImageBitmap(b);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.text1:
			pager.setCurrentItem(0);
			break;
		case R.id.text2:
			pager.setCurrentItem(1);
			break;
		case R.id.text3:
			pager.setCurrentItem(2);
			break;
		default:
			break;
		}
	}

	/**
	 * 页面适配器
	 */
	public class FragmentAdapter extends FragmentPagerAdapter {

		public FragmentAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int arg0) {
			return PageFragment.newInstance(arg0);
		}

		@Override
		public int getCount() {
			return 3;
		}
	}

	/**
	 * 监听
	 */
	public class PageListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			Matrix matrix = new Matrix();
			// 设置激活条的最终位置
			switch (arg0) {
			case 0:
				// 使用set直接设置到那个位置
				matrix.setTranslate(0, 0);
				break;
			case 1:
				matrix.setTranslate(tabWidth, 0);
				break;
			case 2:
				matrix.setTranslate(tabWidth * 2, 0);
				break;
			}
			// 在滑动的过程中，计算出激活条应该要滑动的距离
			float t = (tabWidth) * arg1;
			// 使用post追加数值
			matrix.postTranslate(t, 0);
			tabLine.setImageMatrix(matrix);
		}

		@Override
		public void onPageSelected(int arg0) {
			text1.setTextColor(Color.BLACK);
			text2.setTextColor(Color.BLACK);
			text3.setTextColor(Color.BLACK);
			switch (arg0) {
			case 0:
				text1.setTextColor(Color.parseColor("#ff008000"));
				break;
			case 1:
				text2.setTextColor(Color.parseColor("#ff008000"));
				break;
			case 2:
				text3.setTextColor(Color.parseColor("#ff008000"));
				break;

			default:
				break;
			}
		}
	}
}

4、MainActivity的布局activity_main：

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/text1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="聊天"
            android:textColor="#ff008000"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="发现"
            android:textColor="#000000"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="#000000"
            android:textSize="18sp" />
    </LinearLayout>

    <ImageView
        android:id="@+id/tabLine"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@null"
        android:scaleType="matrix"
        android:src="@drawable/tab_line" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

源码下载地址：http://download.csdn.net/detail/u013985004/8013065