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()。
// 获取适配器实例,注意区别这里传入的是getChildFragmentManager()
myHomeFragmentSVpTitleAdapter=new MyHomeFragmentSVpTitleAdapter(getChildFragmentManager(),fragmentList,titleList);
这是运行我们发现并没有看到TabLayout,这是因为我们没有将Tablayout和ViewPager绑定在一起
6.Tablayout和ViewPager滑动同步
通过一行代码就可以实现TabLayout与ViewPager绑定,实现互相变换
// 通过这个setupWithViewPager 方法设置一下,他们就可以实现TabLayout与ViewPager互相变换,
tabLayout.setupWithViewPager(viewPager);