如何使用ViewPager2

自2019年2月7日以来，时间不多了，Google发布了Android版本的ViewViewr2 。 有关此版本的更多信息，请参见此处 。 现在让我们看一下ViewPager2的全部含义。

新功能

• 支持从右到左的布局，
• 支持垂直方向
• 改进了PageChangeListener 。

有什么变化？

• 将PagerAdapter替换为RecyclerView.Adapter ，
• FragmentStatePagerAdapter替换为FragmentStateAdapter。

ViewPager2是为Android X发布的，因此，如果要使用它，则您的项目应使用AndroidX。让我们看看如何使用这个新的ViewPager2。

添加依赖

将以下依赖项添加到应用程序级别的build.gradle文件中：

 dependencies { implementation "androidx.viewpager2:viewpager2:1.0.0-alpha01" } 

之后，同步您的项目。

客制化

将ViewPager2小部件添加到您的Activity或片段中：

 <androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2" android:layout_width="match_parent" android:layout_height="match_parent"/> 

让我们为将在ViewPager2中显示的页面创建一个布局：

item_page.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/tvTitle" android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_centerInParent="true" tools:text= "item" android:textSize="32sp" android:layout_height="wrap_content" /> </RelativeLayout> 

接下来，我们需要为ViewPager2创建一个适配器。 这是最有趣的。 为此，我们可以使用RecyclerView.Adapter 。 那不是很酷吗？

ViewPagerAdapter.kt

 class ViewPagerAdapter : RecyclerView.Adapter<PagerVH>() { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerVH = PagerVH(LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)) override fun getItemCount(): Int = colors.size override fun onBindViewHolder(holder: PagerVH, position: Int) = holder.itemView.run { tvTitle.text = "item $position" container.setBackgroundResource(colors[position]) } } class PagerVH(itemView: View) : RecyclerView.ViewHolder(itemView) 

这与我们用于常规RecyclerView的适配器相同，并且与ViewPager2相同。

最后一步，为ViewPager2安装适配器：

 class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) viewPager2.adapter = ViewPagerAdapter() } } 

仅此而已！ 与使用旧的ViewPager和PagerAdapter时，我们得到的结果相同：

垂直滚动

以前，您必须使用第三方库来实现垂直滚动，因为 到目前为止，谷歌还没有提供这样的机会。 现在，此新ViewPager2支持垂直滚动。 只需在ViewPager2中更改方向，即可启用垂直滚动。 很简单！

 viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL 

结果如下：

使用FragmentStateAdapter

您也可以像以前的ViewPager一样将片段用作页面。 为此有一个FragmentStateAdapter。 让我们看看如何使用它。

首先，我们需要创建一个片段：

 class PagerFragment : Fragment() { override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { return inflater.inflate(R.layout.item_page, container, false) } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { arguments?.let { container.setBackgroundResource(it.getInt("color")) tvTitle.text = "Item ${it.getInt("position")}" } } } 

现在，我们将为ViewPager2创建一个适配器。 我们将FragmentManager传递给其构造函数，该构造函数将管理片段：

 class ViewPagerFragmentStateAdapter(fm: FragmentManager) : FragmentStateAdapter(fm) { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun getItem(position: Int): Fragment = PagerFragment().apply { arguments = bundleOf( "color" to colors[position], "position" to position ) } override fun getItemCount(): Int = colors.size } 

现在，在ViewPager2中安装此新适配器，您已完成：

 viewPager2.adapter = ViewPagerFragmentStateAdapter(supportFragmentManager) 

改进了OnPageChangeCallback

在旧的ViewPager中，OnPageChangeListner接口旨在接收页面更改/滚动事件。 这非常不方便，因为 即使我们不想onPageScrollStateChanged ，我们也需要重写所有三个方法（ onPageScrollStateChanged ， onPageScrolled ， onPageSelected ）。

 oldViewPager.addOnPageChangeListener(object:ViewPager.OnPageChangeListener{ override fun onPageScrollStateChanged(state: Int) { //   } override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) { //   } override fun onPageSelected(position: Int) { // ,    } }) 

现在，我们有了OnPageChangeCallback ，这是一个具有非抽象方法的抽象类。 从字面上看，这意味着我们不需要重新定义所有这些方法，我们可以简单地重新定义我们需要或想要使用的方法。 因此，例如，我们可以跟踪页面更改事件：

 viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageSelected(position: Int) { super.onPageSelected(position) //    } }) 

注意！

由于ViewPager2是Alpha版，因此旧版ViewPager的某些功能尚未实现或在此版本中无法正常使用。

根据文档的已知问题：

• ClipToPadding，
• 没有与TabLayout集成，
• 屏幕外没有控制权，
• 无法设置页面宽度（默认为100％）

有关已知问题的更多信息在此处 。 我希望所有这些问题将在下次更新中得到解决。 我期待这个新ViewPager2的稳定版本。 在此之前，给大家好的代码！