Viewpager 和 TabLayout 的联动问题

来源：互联网发布：中美贸易顺差数据编辑：程序博客网时间：2024/04/25 20:22

最近老是被问到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'

1 0