Viewpager 和 TabLayout 的联动问题

最近老是被问到ViewPager和TabLayout的滑动和怎样改变滑动条的颜色的问题，其实很简单的，只要它俩联动是不是就可以了呢？那又应该怎样联动呢？嘻嘻，废话不多说，开始喽！（代码里有详细的注释，我就不废话了）首先上效果图，在上代码：

activity_main.xml文件的布局：

<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"
   android:orientation="vertical"
    tools:context="com.zlw.myslef.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/viewpager"/>
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tablayout"/>

</LinearLayout>

fragment_one.xml文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="我是第一页"
        android:gravity="center"
        android:textColor="#ff55aa"/>

</LinearLayout>

fragment_two.xml文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是第二页"
        android:textColor="#22eeff" />
</LinearLayout>

OneFragment.java文件

// 建立一个类，继承fragment，写onCreateView的生命周期
public class OneFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_one,null);
        return view;
    }
}

TwoFragment.java文件

public class TwoFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_two,null);
        return view;
    }
}

写一个MainActivity的适配器：

public class MyAdapter extends FragmentPagerAdapter {

    private List<Fragment> pageList;
    private List<String> titleList;// 给tablayout 的标题添加数组

    public MyAdapter(FragmentManager fm, List<Fragment> pageList) {
        super(fm);
        this.pageList = pageList;
        // 给存储标题的集合初始化并放入标题
        titleList = new ArrayList<>();
        titleList.add("第一页");
        titleList.add("第二页");

    }

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

    @Override
    public int getCount() {
        return titleList != null ? titleList.size() : 0;
    }

    /**
     * 给Tablayout设置标题
     *
     * @param position 位置
     * @return 返回当前的位置标题
     */

    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position);
    }
}

MainActivity.java 文件

private ViewPager viewPager;
    private TabLayout tabLayout;
    private MyAdapter adapter;
    private List<Fragment> pageList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        pageList = new ArrayList<>();
        adapter = new MyAdapter(getSupportFragmentManager(),pageList);
        viewPager.setAdapter(adapter);
        // 让viewPager和Tablayout建立关联
        tabLayout.setupWithViewPager(viewPager);
        pageList.add(new OneFragment());
        pageList.add(new TwoFragment());
        // 更改滑动条的颜色
        tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#00F5FF"));
        // 更改选中和未选中的文字的颜色
        // 参数1: 未选中的
        // 参数2 : 选中的颜色
        tabLayout.setTabTextColors(Color.GRAY,Color.GREEN);

    }

嘿嘿 ，一定不要忘记加依赖哦：

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