基于ViewPagerIndicator的UnderlinePageIndicator，ViewPager选项卡底部滑块衬线滑动控件

《基于ViewPagerIndicator的UnderlinePageIndicator，ViewPager选项卡底部滑块衬线滑动控件》

基于github上的第三方开源的ViewPagerIndicator的UnderlinePageIndicator（ 附：地址），自己写的一个在选项卡底部有衬线的滑动控件。

控件效果图如图所示。

有一个特别的效果是：头部的选项卡在ViewPager切换过程中，底部的滑块也随之动态渐渐滑动过渡。

代码：

MainActivity.java

package zhangphil.underline;

import java.util.ArrayList;

import com.viewpagerindicator.UnderlinePageIndicator;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.LinearLayout.LayoutParams;
import android.graphics.Color;
import android.os.Bundle;

/**
 * 基于第三方开源的ViewPagerIndicator的UnderlinePageIndicator，自己写的一个在选项卡底部有衬线的滑动控件。
 * 控件效果图如图所示。
 * 这里面有一个特别的效果是：头部的选项卡在ViewPager切换过程中，底部的滑块也随之动态渐渐滑动过渡。
 *
 * */

public class MainActivity extends ActionBarActivity {

	private LinearLayout mLinearLayout;
	private ArrayList<Fragment> mArryList;
	private ViewPager mPager;

	// 未被选中的选项卡字体颜色
	private int COLOR_NORMAL = Color.DKGRAY;

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

		mArryList = new ArrayList<Fragment>();
		// 初始化5个Fragment作为测试。
		for (int i = 0; i < 5; i++) {
			TestFragment f = (TestFragment) TestFragment.newInstance();
			f.id = i;
			mArryList.add(f);
		}

		PagerAdapter mAdapter = new MyFragmentAdapter(
				getSupportFragmentManager());

		mPager = (ViewPager) findViewById(R.id.pager);
		mPager.setAdapter(mAdapter);

		UnderlinePageIndicator mIndicator = (UnderlinePageIndicator) findViewById(R.id.indicator);
		mIndicator.setViewPager(mPager);
		mIndicator.setFades(false);
		mIndicator.setSelectedColor(0xff33B5E5);
		mIndicator
				.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

					@Override
					public void onPageSelected(int pos) {
						setIndicatorViewSelected(pos);
					}

					@Override
					public void onPageScrolled(int arg0, float arg1, int arg2) {

					}

					@Override
					public void onPageScrollStateChanged(int arg0) {

					}
				});

		mLinearLayout = (LinearLayout) findViewById(R.id.tab_LinearLayout);
		// 添加选项卡
		addIndicators();

		// 初始化，第0项被选中
		setIndicatorViewSelected(0);
	}

	// 添加Tab选项卡
	private void addIndicators() {
		for (int i = 0; i < getItemsCount(); i++) {
			View v = getIndicatorAt(i);
			addIndicatorItem(v, i);
		}
	}

	// 在这里设置被选中时候选项卡变化的效果
	private void setIndicatorViewSelected(int pos) {
		for (int i = 0; i < mLinearLayout.getChildCount(); i++) {
			if (i == pos) {
				View v = mLinearLayout.getChildAt(i);
				TextView tv = (TextView) v;
				// Android Holo 样式的蓝色
				tv.setTextColor(0xff33B5E5);
			} else {
				View v = mLinearLayout.getChildAt(i);
				TextView tv = (TextView) v;
				tv.setTextColor(COLOR_NORMAL);
			}
		}
	}

	protected int getItemsCount() {
		return mArryList.size();
	}

	// 在这里仅仅返回一个TextView作为选项卡的View。
	// 此处可以返回更丰富的View。
	protected View getIndicatorAt(int pos) {
		TextView v = new TextView(this);
		v.setGravity(Gravity.CENTER);
		v.setText("选项卡" + pos);
		v.setTextColor(COLOR_NORMAL);
		return v;
	}

	// 在线性布局里面依次添加一个View，为添加的View添加事件。
	private void addIndicatorItem(View view, final int index) {
		LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.MATCH_PARENT, 1);
		mLinearLayout.addView(view, index, params);
		view.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				// 当用户点击该View时候，设置ViewPager正确而Pager Item
				set(index);
			}
		});
	}

	private void set(int pos) {
		mPager.setCurrentItem(pos, true);
		setIndicatorViewSelected(pos);
	}

	// 仅仅用于测试的Fragment，用一个id标识。
	private static class TestFragment extends Fragment {

		public int id;

		public static Fragment newInstance() {
			return new TestFragment();
		}

		public View onCreateView(LayoutInflater inflater, ViewGroup container,
				Bundle savedInstanceState) {

			TextView v = new TextView(getActivity());
			v.setGravity(Gravity.CENTER);
			v.setTextSize(50f);
			v.setText("Fragment: " + id);

			return v;
		}
	}

	private class MyFragmentAdapter extends FragmentPagerAdapter {

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

		@Override
		public Fragment getItem(int position) {
			return mArryList.get(position);
		}

		@Override
		public int getCount() {
			return mArryList.size();
		}
	}
}

需要的布局文件：activity_main.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:orientation="vertical" >

    <LinearLayout
        android:id="@+id/tab_LinearLayout"
        android:layout_width="match_parent"
        android:layout_height="30dip"
        android:orientation="horizontal" />

    <com.viewpagerindicator.UnderlinePageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="7px" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#33B5E5" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>