先放效果圖:




原理很簡單,監聽viewpager的onPagerScroll事件

 @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

利用裡面的引數position的值判斷viewpager滑動時的具體位置,並不斷設定toolbar和tablayout的背景顏色

利用int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_green), getResources().getColor(R.color.tab_blue));算出兩種顏色之間的過渡值,並利用這個過渡值顏色不斷設定背景色

核心程式碼如下:

  viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                ArgbEvaluator evaluator = new ArgbEvaluator();
                if (position == 0) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_blue)); //先設定第0頁時還沒有滑動時tablayout的顏色
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_blue));   //先設定第0頁時還沒有滑動時toolbar的顏色
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_green), getResources().getColor(R.color.tab_blue));
                    mTabLayout.setBackgroundColor(evaluate);//設定背景顏色為算出的兩種顏色之間的過渡色
                    toolbar.setBackgroundColor(evaluate);
                }
                if (0 < position && position < 1) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_blue));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_blue));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_blue), getResources().getColor(R.color.tab_green));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }

                if (position == 1) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_purple));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_purple));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_blue), getResources().getColor(R.color.tab_purple));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }

                if (1 < position && position < 2) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_purple));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_purple));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_purple), getResources().getColor(R.color.tab_blue));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }


                if (position == 2) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_pink));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_pink));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_purple), getResources().getColor(R.color.tab_pink));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }

                if (2 < position && position < 3) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_pink));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_pink));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_pink), getResources().getColor(R.color.tab_purple));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }

                if (position == 3) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_brown));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_brown));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_pink), getResources().getColor(R.color.tab_brown));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }

                if (3 < position && position < 4) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_brown));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_brown));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_brown), getResources().getColor(R.color.tab_pink));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }


            }

            @Override
            public void onPageSelected(int position) {


            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

 




1.在Android裡新建一個專案,選擇BlankActivity(1.這樣做生成專案時會自動匯入 android.support.design.widget.AppBarLayout所在的包com.android:design:22.2.1並且會自動為我們建立和應用Toolbar,這省去了我們不少的功夫)

2.在colors.xml裡增加幾種顏色

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="tab_pink">#ff80ab</color>
    <color name="tab_purple">#9575cd</color>
    <color name="tab_blue">#10B5DE</color>
    <color name="tab_green">#009688</color>
    <color name="tab_brown">#795548</color>
</resources>

3.activity_main裡的程式碼

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.colorfultablayout.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabIndicatorColor="#ffffff"
            app:tabSelectedTextColor="#FFFFFFFF"
            app:tabTextColor="#FFE0E0E0" />
    </android.support.design.widget.AppBarLayout>


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

        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>


4.mainActivity裡的程式碼

package com.example.administrator.colorfultablayout;

import android.animation.ArgbEvaluator;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    private Toolbar toolbar;
    private ViewPager viewPager;
    private FragAdapter mAdapter;
    private List<Fragment> fragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        initViewPager();
        InitTabLayout();


    }

    private void initViewPager() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                ArgbEvaluator evaluator = new ArgbEvaluator();
                if (position == 0) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_blue));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_blue));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_green), getResources().getColor(R.color.tab_blue));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }
                if (0 < position && position < 1) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_blue));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_blue));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_blue), getResources().getColor(R.color.tab_green));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }

                if (position == 1) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_purple));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_purple));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_blue), getResources().getColor(R.color.tab_purple));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }

                if (1 < position && position < 2) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_purple));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_purple));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_purple), getResources().getColor(R.color.tab_blue));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }


                if (position == 2) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_pink));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_pink));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_purple), getResources().getColor(R.color.tab_pink));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }

                if (2 < position && position < 3) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_pink));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_pink));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_pink), getResources().getColor(R.color.tab_purple));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }

                if (position == 3) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_brown));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_brown));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_pink), getResources().getColor(R.color.tab_brown));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }

                if (3 < position && position < 4) {
                    mTabLayout.setBackgroundColor(getResources().getColor(R.color.tab_brown));
                    toolbar.setBackgroundColor(getResources().getColor(R.color.tab_brown));
                    int evaluate = (Integer) evaluator.evaluate(positionOffset, getResources().getColor(R.color.tab_brown), getResources().getColor(R.color.tab_pink));
                    mTabLayout.setBackgroundColor(evaluate);
                    toolbar.setBackgroundColor(evaluate);
                }


            }

            @Override
            public void onPageSelected(int position) {


            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        fragments = new ArrayList<Fragment>();//viewpager裡每一頁
        fragments.add(new fragment1());
        fragments.add(new fragment1());
        fragments.add(new fragment1());
        fragments.add(new fragment1());
        mAdapter = new FragAdapter(getSupportFragmentManager(), fragments);

        viewPager.setAdapter(mAdapter);
    }

    private void InitTabLayout() {
        mTabLayout = (TabLayout) findViewById(R.id.tl);
        mTabLayout.setTabsFromPagerAdapter(mAdapter);
        mTabLayout.setupWithViewPager(viewPager);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

/**
 * viewpager的Adapter,負責渲染檢視
 */
class FragAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;


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

    public FragAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        if (position == 0) return "標題1";
        else if (position == 1) return "標題2";
        else if (position == 2) return "標題3";
        else if (position == 3) return "標題4";
        else return "其它";
    }

}