閒話不多說，先上效果圖

可以看到我們要實現的效果有兩個：

1.滑動ViewPager的時候，頂部的黃色橫條跟著一起滑動。當滑動完畢的時候，ViewPager對應的標題的顏色發生改變。

2.當點選一個標題的時候，ViewPager顯示對應的Fragment，然後顏色也跟著改變，橫條位置也跟著改變。

橫條跟著ViewPager滑動的原理是動態地設定它的leftMargin。這個設定是在ViewPager的OnPagerChangedListener的onPageScrolled方法中實現的。關鍵程式碼如下

RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) tabLine.getLayoutParams();
params.leftMargin = (int) ((positionOffset+ position )* lineWidth);
tabLine.setLayoutParams(params);
 

改變顏色其實是先全部回覆初始的顏色，然後再根據相應的位置改變顏色。當點選標題的時候，通過ViewPager的setCurrentItem(position)來改變ViewPager。注意的是position是從0開始的。

/**
     * 初始化FragmentPagerAdapter
     */
    private void initAdapter() {
        fragmentList = new ArrayList<Fragment>();

        fragment1 = new PagerFragment1();
        fragment2 = new PagerFragment2();
        fragment3 = new PagerFragment3();

        fragmentList.add(fragment1);
        fragmentList.add(fragment2);
        fragmentList.add(fragment3);

        mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {


                return fragmentList.get(position);
            }



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

    private void initView() {
        tab1Text = (TextView) findViewById(R.id.tab1);
        tab2Text = (TextView) findViewById(R.id.tab2);
        tab3Text = (TextView) findViewById(R.id.tab3);

        onClickListener = new TabOnClickListener();

        tab1Text.setOnClickListener(onClickListener);
        tab2Text.setOnClickListener(onClickListener);
        tab3Text.setOnClickListener(onClickListener);

        tabLine = findViewById(R.id.tab_line);


        //初始化ViewPager，並且設定ViewPager的監聽器
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //因為這裡只有三個Tab,所有橫條的寬頻應該是螢幕的1/3
                int lineWidth = getLineWidth(3);

                //橫條隨著ViewPager一起滑動
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) tabLine.getLayoutParams();
                params.leftMargin = (int) ((positionOffset+ position )* lineWidth);
                tabLine.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int position) {
                //當ViewPager滑動完畢，改變標題顏色
                changeTabColor(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }





    /**
     *  根據標題的個數獲取橫條應該設定的寬度
     * @param tabCount
     * @return
     */
    public int getLineWidth(int tabCount){
        DisplayMetrics metric = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metric);
        int lineWidth = metric.widthPixels/tabCount;
        return lineWidth;
    }


    /**
     *
     * 根據ViewPager的位置改變對應標題的
     * @param position
     */
    private void changeTabColor(int position){
        resetTabColor();

        if(0 == position) {
            tab1Text.setTextColor(Color.parseColor("#ffec00"));
        }

        if(1 == position) {
            tab2Text.setTextColor(Color.parseColor("#ffec00"));
        }

        if(2 == position) {
            tab3Text.setTextColor(Color.parseColor("#ffec00"));
        }
    }


    /**
     * 重置標題的顏色
     */
    private void resetTabColor(){
        tab1Text.setTextColor(Color.parseColor("#ffffff"));
        tab2Text.setTextColor(Color.parseColor("#ffffff"));
        tab3Text.setTextColor(Color.parseColor("#ffffff"));
    }


    /**
     * 標題點選事件的監聽介面實現類
     */
    private class TabOnClickListener implements View.OnClickListener{

        @Override
        public void onClick(View v) {

            resetTabColor();
            switch (v.getId()){
                case R.id.tab1:
                    //設定當前的頁面
                    mViewPager.setCurrentItem(0);
                    //改變相應的Tab的字型顏色
                    tab1Text.setTextColor(Color.parseColor("#ffec00"));
                    break;

                case R.id.tab2:
                    //設定當前的頁面
                    mViewPager.setCurrentItem(1);
                    //改變相應的Tab的字型顏色
                    tab2Text.setTextColor(Color.parseColor("#ffec00"));
                    break;

                case R.id.tab3:
                    //設定當前的頁面
                    mViewPager.setCurrentItem(2);
                    tab3Text.setTextColor(Color.parseColor("#ffec00"));
                    break;
            }
        }
    }
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sanisy.study.MainActivity"
    android:orientation="vertical">



    <RelativeLayout
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        android:layout_height="64dp">

        <LinearLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="62dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tab1"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="62dp"
                android:gravity="center"
                android:textColor="#ffec00"
                android:text="頁面1"/>

            <TextView
                android:id="@+id/tab2"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="62dp"
                android:textColor="#ffffff"
                android:gravity="center"
                android:text="頁面2"/>

            <TextView
                android:id="@+id/tab3"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="62dp"
                android:textColor="#ffffff"
                android:gravity="center"
                android:text="頁面3"/>

        </LinearLayout>

        <View
            android:id="@+id/tab_line"
            android:layout_width="122dp"
            android:layout_height="5dp"
            android:layout_below="@id/tab_layout"
            android:background="#ffec00"/>

    </RelativeLayout>


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

</LinearLayout>