tablayout与viewpager的适配实现仿今日头条的联动

tablayout与viewpager的关联适配还是非常重要的，很多软件现在都开始做这个功能。之前我们使用其他的控件，但是官方最近推出的tablayout还是非常好用的，所以拿出来和大家分享。

1.首先是我们布局文件的代码编写。

先在自己的工程中导入一个依赖compile'com.android.support:design:25.0.1'

<android.support.design.widget.TabLayout

android:id="@+id/tab"

android:layout_width="0dp"

android:layout_height="40dp"

android:layout_weight="1"

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

<android.support.v4.view.ViewPager

android:id="@+id/mvp"

android:layout_width="match_parent"

android:layout_height="match_parent">

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

2.然后在我们activity里面先添加一些假数据和接口，这样我们方便展示效果

private voidinitData() {

list=newArrayList<>();

list.add(newPathData("推荐",path+"&page=1"));

list.add(newPathData("野史",path+"&page=2"));

list.add(newPathData("后宫",path+"&page=3"));

list.add(newPathData("解密",path+"&page=4"));

list.add(newPathData("推荐",path+"&page=1"));

list.add(newPathData("野史",path+"&page=2"));

list.add(newPathData("后宫",path+"&page=3"));

list.add(newPathData("解密",path+"&page=4"));

}

3.然后我们给tablayout赋值，这也是比较重要的一步，

tab.setTabMode(TabLayout.MODE_FIXED);

这行代码的意思是充满当前页面，效果是不能滑动的，如果想要能够滑动，可以设置另外一个属性。(tab.setTabMode(TabLayout.MODE_SCROLLABLE);)

tab.addTab(tab.newTab().setText(list.get(0).getTitle()));

tab.addTab(tab.newTab().setText(list.get(1).getTitle()));

tab.addTab(tab.newTab().setText(list.get(2).getTitle()));

tab.addTab(tab.newTab().setText(list.get(3).getTitle()));

4.然后就是我们viewpager的适配器了，这里我们动态添加的是fragment，所以我们用的是fragment的适配器

classViewPagerAdapterextendsFragmentPagerAdapter{

publicViewPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

publicCharSequence getPageTitle(intposition) {

returnlist.get(position).getTitle();

}

@Override

publicFragment getItem(intposition) {

returnFragmentMain.newInstance(list.get(position));

}

@Override

public intgetCount() {

returnlist.size();

}

}

5.最后一步，也可以说是最为关键的一步，将tablayout与viewpager关联在一起

//给viewpager设置适配器

vp.setAdapter(newViewPagerAdapter(getSupportFragmentManager()));

//联系tab与viewpger

tab.setupWithViewPager(vp);

到这里，tablayout与viewpager的关联就结束了，就可以实现横滑了。下面附上一张我曾经做的仿今日头条的顶部滑动的效果图。