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

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

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

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

android:id="@+id/tab"

android:layout_width="0dp"

android:layout_height="40dp"

android:layout_weight="1"

>

android:id="@+id/mvp"

android:layout_width="match_parent"

android:layout_height="match_parent">

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的关联就结束了,就可以实现横滑了。下面附上一张我曾经做的仿今日头条的顶部滑动的效果图。


tablayout与viewpager的适配实现仿今日头条的联动横滑_第1张图片

你可能感兴趣的:(tablayout与viewpager的适配实现仿今日头条的联动横滑)