基于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;@Overrideprotected 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() {@Overridepublic void onPageSelected(int pos) {setIndicatorViewSelected(pos);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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() {@Overridepublic void onClick(View v) {// 当用户点击该View时候，设置ViewPager正确而Pager Itemset(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);}@Overridepublic Fragment getItem(int position) {return mArryList.get(position);}@Overridepublic 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>