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

👨‍🎓作者简介：一位喜欢写作，计科专业大三菜鸟

🏡个人主页：starry陆离

如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦

首先这部分笔记是接着上一个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()。

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

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

6.Tablayout和ViewPager滑动同步

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

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

7.Gitee源码

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