Android 中 viewpager 滑动指示器的实例代码

先看下效果图：

这个需要用到1个开源的 库，这个后面也会说下的。

工程目录：

1. MainActivity.java

public class MainActivity extends FragmentActivity {
 private ViewPagerFrameAdapter adapter;  //适配器（标题和内容）
private ViewPager mPager;        
private TabPageIndicator   tabbPageIndicator;   //
private UnderlinePageIndicatorEx underlinePageIndicator;
private int COUNT = 0;
private List<String> titles = new ArrayList<String>(); //标题
@Override
protected void onCreate(Bundle bundle) {
   super.onCreate(bundle);
   requestWindowFeature(Window.FEATURE_NO_TITLE);
   setContentView(R.layout.activity_main);
   //标题，这里自己造的假数据
   for (int j = 0; j < 3 ; j++){
    titles.add( "第"+ j +"标签卡");
   }
   mPager = (ViewPager)findViewById(R.id.pager);
   adapter = new ViewPagerFrameAdapter(getSupportFragmentManager(),titles);
   mPager.setAdapter(adapter);
   //得到指示器
   tabbPageIndicator = (TabPageIndicator) findViewById(R.id.tab_indicator);  
   tabbPageIndicator.setViewPager(mPager);
   //下标
   underlinePageIndicator = (UnderlinePageIndicatorEx)findViewById(R.id.underline_indicator);
   underlinePageIndicator.setViewPager(mPager);
   underlinePageIndicator.setFades(false);
   //设置指示器
   tabbPageIndicator.setOnPageChangeListener(underlinePageIndicator);
}
//adapter 没啥好说的 跟前面的一样
private class ViewPagerFrameAdapter extends FragmentStatePagerAdapter{
 private List<String> title; //页面标题头部数据
 public ViewPagerFrameAdapter(FragmentManager fm, List<String> title) {
  super(fm);
  this.title = title;
 }
 //根据position 返回 fragment
 @Override
 public Fragment getItem(int position) {
  return ArrayFragment.newInstance(position);
 }
 //size
 @Override
 public int getCount() {
   return title.size();
 }
 //顶部的title
 @Override
 public CharSequence getPageTitle(int position) {
  if (titles != null){
   return titles.get(position).toString();
  }
  return super.getPageTitle(position);
 }  
}
}

UnderlinePageIndicatorEx.java

//继承这个然后重写
public class UnderlinePageIndicatorEx extends UnderlinePageIndicator{
 public UnderlinePageIndicatorEx(Context context) {
  super(context, null);  
 }
 public UnderlinePageIndicatorEx(Context context, AttributeSet attrs) {
  super(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle);  
 }
 public UnderlinePageIndicatorEx(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);  
 }
 //自身的 ViewPage传递过去
 @Override
 public void setViewPager(ViewPager viewPager) {
  if (mViewPager == viewPager){
   return;
  }
//   if (mViewPager != null) {
//    mViewPager.setOnPageChangeListener(null);
//   }
  if (viewPager.getAdapter() == null) {
   throw new IllegalStateException(" pager 没有 加入 adapter");
  }
  mViewPager = viewPager;
//   mViewPager.setOnPageChangeListener(this);
  invalidate();
  post(new Runnable(){
   @Override public void run() {
    if (mFades) {
     post(mFadeRunnable);
    }
   }  
  });
 }
}

ArrayFragment.java

public class ArrayFragment extends Fragment{
private int position;
public ArrayFragment(int position){
 this.position = position;
}
 // 返回 viwePager 下面滑动的页面
public static ArrayFragment newInstance(int position){
 return new ArrayFragment(position);
}
@Override
public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
}
@Override
public void onDestroy() {
 super.onDestroy();
}
// 根据position 返回不同的view
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
  Bundle savedInstanceState) {
 View view = inflater.inflate(R.layout.layoutaa, null);  
 return view;
}
}

好了接下来是 布局xml了。

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical"
 >
<!-- 标题  和  标题下面的 指示器 -->
 <LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="35dp"
 android:orientation="vertical"
 android:background="@drawable/main_header_background">
   <com.viewpagerindicator.TabPageIndicator
    android:id="@+id/tab_indicator"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"/>
   <com.test.linepagerindictor.widget.UnderlinePageIndicatorEx
    android:id="@+id/underline_indicator"
    android:layout_height="3dip"
    android:layout_width="fill_parent"
    android:layout_alignParentBottom="true"/>
 </LinearLayout>  
 <android.support.v4.view.ViewPager
 android:id="@+id/pager"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"/>  
</LinearLayout>

接下来设置 滑动指示器的style 

<!-- 总 style 直接引用 这个 由 tab style 和 Indicator style 组成 -->
<style name="StyledAllIndicators" parent="@android:style/Theme.Light">
 <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
 <item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item>
</style>
<!-- tab的 style -->
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
 <item name="android:background">#00000000</item>
 <item name="android:textAppearance">@style/CustomTabPageIndicator_text</item>
 <item name="android:textColor">@color/selector_tab</item>
 <item name="android:textSize">20sp</item>
 <!-- 分割线，可有可无的 -->
 <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
 <item name="android:dividerPadding">10dip</item>
 <item name="android:showDividers">middle</item>
 <item name="android:paddingTop">4dp</item>
 <item name="android:paddingLeft">8dp</item>
 <item name="android:paddingBottom">4dp</item>
 <item name="android:paddingRight">8dp</item>
 <item name="android:fadingEdge">horizontal</item>
 <item name="android:fadingEdgeLength">8dp</item>
</style>
<style name="CustomTabPageIndicator_text" parent="android:TextAppearance.Medium">
 <item name="android:typeface">monospace</item>
</style>
<!-- 下标的指示器的颜色 -->
<style name="CustomUnderlinePageIndicator">
 <item name="selectedColor">#EB5548</item>
 <item name="android:background">#00000000</item>
 <item name="fadeLength">1000</item>
 <item name="fadeDelay">1000</item>
</style>

 selector_tab.xml     这个是 选择器 在style中引用的，是用来切换 被选中的背景色的

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#91D228" />
<item android:state_focused="true" android:color="#91D228" />
<item android:color="#dddddd" />
</selector>

来源：https://www.cnblogs.com/android100/archive/2013/11/15/android-viewpager.html