viewpager2是什么？
滑动视图允许您通过水平手指手势或滑动在同级屏幕（例如标签页）之间进行导航。此导航模式也称为“水平分页”。本主题介绍了如何创建具有滑动视图（以便在标签页之间切换）的标签页布局，以及如何显示标题条而不是标签页。
大部分app的首页都是底部带有导航图的可滑动的若干个视图组成的，像微信啊这些都是，这种页面使用viewPage2都可以很轻松的实现，另外一种实现方式是使用BottomNavigationView来实现，这种实现方式请参照Android Navigation Architecture Component 使用详解,但我觉得第二种实现方式更适用于同一个页面内fragment的跳转，同级别导航还是用viewpager2更好。
viewpager2的来源
viewpager2的前身是viewpager，谷歌推出viewpager2的原因就是为了去替代viewpager，至于原因好像是因为viewpager不能复用view，具体我也不知道，因为现在viewpager2已结很成熟的原因，我一直没接触viewpager。如果你需要将项目中viewpager变为viewpage2，请参考从 ViewPager 迁移到 ViewPager2。viewpager2的实现原理是recycleview，具体怎么实现的如果有必要我会试着去分析他的原理。
viewpager2的简单使用
我这里采用tablayout+viewpager2来实现顶部带有标签页的activity
至于什么是tablayout，请阅读Tablayout使用全解，一篇就够了(请注意和tablelayout区分开)
首先我们先创建一个fragment的通用类
class PageFragment : Fragment() {
private var mColors: List<Int>? = null
private var mPosition = 0
override fun onCreate(@Nullable savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
if (arguments != null) {
mColors = arguments!!.getSerializable(COLORS) as List<Int>?
mPosition = arguments!!.getInt(POSITION)
}
}
@Nullable
override fun onCreateView(
inflater: LayoutInflater,
@Nullable container: ViewGroup?,
@Nullable savedInstanceState: Bundle?
): View {
return inflater.inflate(com.example.viewpager2demo.R.layout.item_page, container, false)
}
override fun onViewCreated(view: View, @Nullable savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
container.setBackgroundResource(mColors!![mPosition])
tvTitle.text = "Item $mPosition"
}
companion object {
private const val COLORS = "colors"
private const val POSITION = "position"
fun newInstance(colors: List<Int?>?, position: Int): PageFragment {
val args = Bundle()
args.putSerializable(COLORS, colors as ArrayList<Int?>?)
args.putInt(POSITION, position)
val fragment = PageFragment()
fragment.arguments = args
return fragment
}
}
}
需要注意的地方：
if (arguments != null) {
mColors = arguments!!.getSerializable(COLORS) as List<Int>?
mPosition = arguments!!.getInt(POSITION)
}
这里是接收上一个fragment传过来的参数，具体传参是在
fun newInstance(colors: List<Int?>?, position: Int): PageFragment {
val args = Bundle()
args.putSerializable(COLORS, colors as ArrayList<Int?>?)
args.putInt(POSITION, position)
val fragment = PageFragment()
fragment.arguments = args
return fragment
}
传参方式也是由argument来传递，这一点和Navigation跳转传递参数是一样的。不清楚的可以看一下我的另一篇文章jetpack组件---导航框架：navigation。
item_page.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container"
android:layout_height="match_parent">
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
这里没什么好说的，就是一个fragment通用视图，加一个TextView区分不同的fragment，在实际开发中往往每个fragment都有不同的视图。
viewpager2最重要的一点是需要将此布局挂接到 FragmentStateAdapter
所以我们先创建一个类去继承并实现他的方法
internal class ViewPagerFragmentStateAdapter(val colors: List<Int>, fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
override fun getItemCount(): Int {
return colors.size
}
override fun createFragment(position: Int): Fragment {
return PageFragment.newInstance(colors, position)
}
}
FragmentStateAdapter有两个必要方法，第一个是
override fun getItemCount(): Int {
return colors.size
}
这就类似于recycleviewAdapter里的getItemCount()方法，在recycleview中它为了得到item的条数，在FragmentStateAdapter中它是为了得到滑动视图的个数
override fun createFragment(position: Int): Fragment {
return PageFragment.newInstance(colors, position)
}
这个方法是返回一个fragment，我们利用了PageFragment里面自己定义的全局方法newInstance()。
MainActivity：
class MainActivity : AppCompatActivity() {
private val colors: MutableList<Int> = ArrayList()
private var mAdapter: ViewPagerFragmentStateAdapter? = null
override fun onCreate(@Nullable savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
mAdapter = ViewPagerFragmentStateAdapter(colors, this)
viewpager2.adapter = mAdapter
for (i in 0..3) {
val tab: TabLayout.Tab = tablayout.newTab()
tab.text = "TAB $i"
tablayout.addTab(tab)
}
// 添加页签选中监听
tablayout.addOnTabSelectedListener(object : OnTabSelectedListener {
override fun onTabSelected(tab: TabLayout.Tab?) {
viewpager2.currentItem = tab!!.position
}
override fun onTabUnselected(tab: TabLayout.Tab?) {
}
override fun onTabReselected(tab: TabLayout.Tab?) {
}
})
/* tablayout.addOnTabSelectedListener(object : OnTabSelectedListener {
override fun onTabSelected(tab: TabLayout.Tab) {
viewpager2.currentItem = tab.position
}
override fun onTabUnselected(tab: TabLayout.Tab) {}
override fun onTabReselected(tab: TabLayout.Tab) {}
})*/
// 注册页面变化的回调接口
viewpager2.registerOnPageChangeCallback(object : OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
tablayout.setScrollPosition(position, 0f, false)
}
})
}
init {
colors.add(R.color.black)
colors.add(R.color.material_on_primary_emphasis_high_type)
colors.add(R.color.cardview_dark_background)
colors.add(R.color.design_default_color_primary)
}
}
这个就是主页面的代码了，我们分开看一下。
init {
colors.add(R.color.black)
colors.add(R.color.material_on_primary_emphasis_high_type)
colors.add(R.color.cardview_dark_background)
colors.add(R.color.design_default_color_primary)
}
最底部的init方法就是创建一个不同颜色的list集合作为创建fragment适配器的参数，从上面我们看到ViewPagerFragmentStateAdapter需要传入两个参数，第一个是一个颜色集合，实现不同的颜色以区分fragment，第二个参数是FragmentActivity，这是一个必传的参数。
mAdapter = ViewPagerFragmentStateAdapter(colors, this)
viewpager2.adapter = mAdapter
这两句代码就是创建适配器，并指定适配器为布局代码里viewpager2的适配器。
for (i in 0..3) {
val tab: TabLayout.Tab = tablayout.newTab()
tab.text = "TAB $i"
tablayout.addTab(tab)
}
这几句是给tablayout顶部标签命名，用for循环分别取名为TAB0---TAB3。注意：这里有一个使用tablayout的坑我直接写成
tablayout.addtab(Tablayout.Tab().text="Tab $i")
就会抛出空指针异常：Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.google.android.material.tabs.TabLayout$TabView.setContentDescription(java.lang.CharSequence)' on a null object reference，不知道为啥，我看好像不只我一个人遇到这个问题，很多人都写过这个坑了，比如android tab选项卡使用及踩坑。
tablayout.addOnTabSelectedListener(object : OnTabSelectedListener {
override fun onTabSelected(tab: TabLayout.Tab?) {
viewpager2.currentItem = tab!!.position
}
override fun onTabUnselected(tab: TabLayout.Tab?) {
}
override fun onTabReselected(tab: TabLayout.Tab?) {
}
})
这是顶部tablayout的选中事件，我们需要点击顶部tablayout时切换fragment，所以需要在它的选中事件内部做
viewpager2.currentItem = tab!!.position
就是让选中的下标值等于viewpager2组件需要显示的视图下标值，这样就可以坐到切换fragment了。
viewpager2.registerOnPageChangeCallback(object : OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
tablayout.setScrollPosition(position, 0f, false)
}
})
最后这个和上面的差不多，我们点击顶部tab是viewpager2里的fragment要变化，同样的，当viewpager2变化时顶部tab也要跟着变化，这段代码的作用就是这个。
好了，viewpager2差不多就是这些，放一张效果图：
参考资料
从 ViewPager 迁移到 ViewPager2
使用 ViewPager2 创建包含标签的滑动视图
ViewPager2原理解析
