Viewpager 和 TabLayout 的联动问题

最近老是被问到ViewPager和TabLayout的滑动和怎样改变滑动条的颜色的问题,其实很简单的,只要它俩联动是不是就可以了呢?那又应该怎样联动呢?嘻嘻,废话不多说,开始喽!(代码里有详细的注释,我就不废话了)首先上效果图,在上代码:
Viewpager 和 TabLayout 的联动问题_第1张图片

Viewpager 和 TabLayout 的联动问题_第2张图片

activity_main.xml文件的布局:

"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">

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



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 pageList;
    private List titleList;// 给tablayout 的标题添加数组

    public MyAdapter(FragmentManager fm, List 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 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'

你可能感兴趣的:(Viewpager 和 TabLayout 的联动问题)