实现ViewPager底部条跟着ViewPager滑动的效果

厚积薄发，每天写点小东西啊，时间长了，我相信我的实力会有所提升，这篇文章献给那些对ViewPager还不会用的同胞们，简单的例子，看明白ViewPager的底部条随ViewPager滑动而动的真相，如图：

当然了，大家要是有更好的实现方式可以交交我。话不多说，贴代码了

MainActivity.java

package com.viewpager.ui;

import java.util.ArrayList;

import com.nineoldandroids.view.ViewPropertyAnimator;
import com.viewpager.ui.fragment.Tab1Fragment;
import com.viewpager.ui.fragment.Tab2Fragment;
import com.viewpager.ui.fragment.Tab3Fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.Window;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {

	private ArrayList<Fragment> fragments;
	private ViewPager viewPager;
	private TextView tab1, tab2, tab3;
	private int line_width;
	private View view;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		tab1 = (TextView) findViewById(R.id.tab1);
		tab2 = (TextView) findViewById(R.id.tab2);
		tab3 = (TextView) findViewById(R.id.tab3);
		// tab下的下划线
		view = findViewById(R.id.line);
		// TextView字体大小缩放
		ViewPropertyAnimator.animate(tab1).scaleX(1.2f).setDuration(0);
		ViewPropertyAnimator.animate(tab1).scaleY(1.2f).setDuration(0);

		fragments = new ArrayList<Fragment>();
		fragments.add(new Tab1Fragment());
		fragments.add(new Tab2Fragment());
		fragments.add(new Tab3Fragment());
		// 设置下划线宽度
		line_width = getWindowManager().getDefaultDisplay().getWidth()
				/ fragments.size();
		view.getLayoutParams().width = line_width;
		view.requestLayout();

		viewPager = (ViewPager) findViewById(R.id.viewPager);
		viewPager.setAdapter(new FragmentStatePagerAdapter(
				getSupportFragmentManager()) {

			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return fragments.size();
			}

			@Override
			public Fragment getItem(int arg0) {
				// TODO Auto-generated method stub
				return fragments.get(arg0);
			}
		});
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				changeState(arg0);
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				float tagerX = arg0 * line_width + arg2 / fragments.size();
				ViewPropertyAnimator.animate(view).translationX(tagerX)
						.setDuration(0);
			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});

	}

	private void changeState(int arg0) {
		if (arg0 == 0) {
			tab1.setTextColor(getResources().getColor(R.color.green));
			tab2.setTextColor(getResources().getColor(R.color.gray_white));
			tab3.setTextColor(getResources().getColor(R.color.gray_white));
			ViewPropertyAnimator.animate(tab1).scaleX(1.2f).setDuration(200);
			ViewPropertyAnimator.animate(tab1).scaleY(1.2f).setDuration(200);
			ViewPropertyAnimator.animate(tab2).scaleX(1.0f).setDuration(200);
			ViewPropertyAnimator.animate(tab2).scaleY(1.0f).setDuration(200);
			ViewPropertyAnimator.animate(tab3).scaleX(1.0f).setDuration(200);
			ViewPropertyAnimator.animate(tab3).scaleY(1.0f).setDuration(200);
		} else if (arg0 == 1) {
			tab2.setTextColor(getResources().getColor(R.color.green));
			tab1.setTextColor(getResources().getColor(R.color.gray_white));
			tab3.setTextColor(getResources().getColor(R.color.gray_white));
			ViewPropertyAnimator.animate(tab2).scaleX(1.2f).setDuration(200);
			ViewPropertyAnimator.animate(tab2).scaleY(1.2f).setDuration(200);
			ViewPropertyAnimator.animate(tab1).scaleX(1.0f).setDuration(200);
			ViewPropertyAnimator.animate(tab1).scaleY(1.0f).setDuration(200);
			ViewPropertyAnimator.animate(tab3).scaleX(1.0f).setDuration(200);
			ViewPropertyAnimator.animate(tab3).scaleY(1.0f).setDuration(200);
		} else if (arg0 == 2) {
			tab3.setTextColor(getResources().getColor(R.color.green));
			tab1.setTextColor(getResources().getColor(R.color.gray_white));
			tab2.setTextColor(getResources().getColor(R.color.gray_white));
			ViewPropertyAnimator.animate(tab3).scaleX(1.2f).setDuration(200);
			ViewPropertyAnimator.animate(tab3).scaleY(1.2f).setDuration(200);
			ViewPropertyAnimator.animate(tab1).scaleX(1.0f).setDuration(200);
			ViewPropertyAnimator.animate(tab1).scaleY(1.0f).setDuration(200);
			ViewPropertyAnimator.animate(tab2).scaleX(1.0f).setDuration(200);
			ViewPropertyAnimator.animate(tab2).scaleY(1.0f).setDuration(200);
		}
	}

}

点击下载源码