先看下效果图：

 

这个需要用到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>

好了 ，基本就这些了   fragment的的那个xml  自己随意画吧， 那个开源库随后上传。