Skip to content

Fragment+ViewPager+TabLayout实现主页的顶部页面导航

首先这部分笔记是接着上一个Module写的,所以前面的那部分代码就不再赘述。

要实现Fragment+ViewPager+TabLayout实现主页的顶部页面导航

其实主页就是一个Fragment里又嵌套了ViewPager,所以我们为了区别于其他三个模块,我不再使用MyFragment,而是新建一个MyHomeFragment,在其中我联动TabLyout再嵌套ViewPager

其实与在MainActivity中使用ViewPager类似

这里我们只是在Fragment里使用ViewPager。所以思路是一样的

  • 1.准备工作:创建布局,设置好TabLayout和ViewPager
  • 2.在MyHomeFragment中初始化控件
  • 3.创建MyHomeFragmentSVpTitleAdapter,同样的需要适配器
  • 4.初始化数据,绑定myHomeFragmentSVpTitleAdapter与viewPager
  • 5.TabLayout和ViewPager的联动

1.创建一个新的Fragment

2.修改布局

主页我用的是线性布局,Fragment默认是帧布局,注意要换过来。

这里TabLayout有一个重要的属性就是tabMode,常见取值有

  • fixed:固定的,无论多少个标题都显示出来,平均分配屏幕宽度
  • scrollable:可滑动的,小于等于5个默认居左固定,大于5个标题可滑动
  • auto:小于等于5个标题自动居中平铺,大于5个自动设置可滑动

3.获取控件

获取新建的fragment中的控件实例

4.创建适配器

构造主页MyHomeFragment里面的ViewPager的适配器

适配器的写法也是一样的,继承FragmentStatePagerAdapter类,然后重写其中的getItem和getCount方法,与给MainActivity中的ViewPager创建适配器不同的点在于,我们要给Fragment中传入一个标题(要放置在TabLayout中),所以我们又新重写了getPageTitle方法

一点点区别,返回当前的标题

5.绑定Adapter

回到MyHomeFragment中,初始化数据,绑定myHomeFragmentSVpTitleAdapter与viewPager

有一点点不同的地方是,这里获取Fragment不再是getSupportFragmentManager()方法,而是getChildFragmentManager()。

java
//        获取适配器实例,注意区别这里传入的是getChildFragmentManager()
        myHomeFragmentSVpTitleAdapter=new MyHomeFragmentSVpTitleAdapter(getChildFragmentManager(),fragmentList,titleList);

这是运行我们发现并没有看到TabLayout,这是因为我们没有将Tablayout和ViewPager绑定在一起

6.Tablayout和ViewPager滑动同步

通过一行代码就可以实现TabLayout与ViewPager绑定,实现互相变换

java
//        通过这个setupWithViewPager 方法设置一下,他们就可以实现TabLayout与ViewPager互相变换,
        tabLayout.setupWithViewPager(viewPager);

7.Gitee源码

Android_Java_Review: 学习--代码即笔记 (gitee.com)