ViewPager+TabLayout+Fragment 的联动效果

实现这个效果需要以下几步
1.导入design包
2.创建若干个fragment
3.创建MyFragmentPagerAdapter继承FragmentPagerAdapter
4.在MainActivity中实现联动
先看效果图：

1.导入design包

compile 'com.android.support:design:25.3.1'

2.创建3个fragment
3.创建ViewPAger的Adapter

public class MyFragmentPageAdapter extends FragmentPagerAdapter {

    //用来存放多个fragment
    private List<Fragment> fragmentList;
    //TabLayout内的标题
    private String[] mTitles = new String[]{"Tab 1", "Tab 2", "Tab 3"};
    public MyFragmentPageAdapter(FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        this.fragmentList=fragmentList;
    }

    @Override
    public Fragment getItem(int position) {

        return fragmentList.get(position);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

4.修改activity_main布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ff88" //背景色
        app:tabIndicatorColor="#f00"   //tab文字下方的那条线的颜色
        app:tabIndicatorHeight="4dp"   //tab文字下方的那条线的高度
        app:tabMode="fixed"            // 底部tab布局不可滑动,如果为scrollable，则超出屏幕宽度可以水平滚动
        app:tabSelectedTextColor="#FFFF00"  //tab被选中的时候文字的颜色
        app:tabTextColor="#FFFFFF">         //tab未被选中时文字的颜色
    </android.support.design.widget.TabLayout>

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

    </android.support.v4.view.ViewPager>

</LinearLayout>

5.在MainActivity中实现联动效果

public class MainActivity extends AppCompatActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private FragmentManager fragmentManager;
    private MyFragmentPageAdapter myFragmentPageAdapter;
    private List<Fragment> fragments=new ArrayList<>();  //用来添加所有的fragment
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabLayout= (TabLayout) findViewById(R.id.tab_layout);
        mViewPager= (ViewPager) findViewById(R.id.view_pager);
        fragmentManager=getSupportFragmentManager();
        fragments.add(new Fragment1());
        fragments.add(new Fragment2());
        fragments.add(new Fragment3());
        myFragmentPageAdapter=new MyFragmentPageAdapter(fragmentManager,fragments);
        mViewPager.setAdapter(myFragmentPageAdapter);

        //将TabLayout和ViewPager绑定在一起
        mTabLayout.setupWithViewPager(mViewPager);

    }
}

做好这些工作之后就可以实现ViewPager和TabLayout的联动了
参考博客：
https://www.jianshu.com/p/ce1d060573ba