ViewPager2 简单使用

1.viewpager2概念及特点

ViewPager2 是 ViewPager 库的改进版本，可提供增强型功能并解决使用 ViewPager 时遇到的一些常见问题。

1.1 ViewPager2 的优势

• 垂直方向支持
  除了支持传统的水平分页之外，ViewPager2 还支持垂直分页。您可以通过设置 ViewPager2 元素的 android:orientation 属性为其启用垂直分页：

<androidx.viewpager2.widget.ViewPager2
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:orientation="vertical" />
    

• 从右到左支持

ViewPager2 支持从右到左 (RTL) 分页。系统会根据语言区域在适当的情况下自动启用 RTL 分页，不过您也可以通过设置 ViewPager2 元素的 android:layoutDirection 属性为其手动启用 RTL 分页：

<androidx.viewpager2.widget.ViewPager2
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layoutDirection="rtl" />
    

• 可修改的 Fragment 集合
  ViewPager2 支持对可修改的 Fragment 集合进行分页浏览，在底层集合发生更改时调用 notifyDatasetChanged() 来更新界面。
  这意味着，您的应用可以在运行时动态修改 Fragment 集合，而 ViewPager2 会正确显示修改后的集合。

• DiffUtil
  ViewPager2 在 RecyclerView 的基础上构建而成，这意味着它可以访问 DiffUtil 实用程序类。这一点带来了多项优势，但最突出的一项是，这意味着 ViewPager2 对象本身会利用 RecyclerView 类中的数据集更改动画。

• 支持嵌套的可滚动元素
  在嵌套的滚动视图与包含它的 ViewPager2 对象方向相同的情况下，ViewPager2 本身并不支持该滚动视图。例如，在垂直方向的 ViewPager2 对象内，垂直滚动视图无法滚动。
  为了支持方向相同的 ViewPager2 对象内的滚动视图，如果您希望改为滚动嵌套的元素，则必须对 ViewPager2 对象调用 requestDisallowInterceptTouchEvent()。ViewPager2 嵌套滚动示例展示了一种使用通用自定义封装容器布局解决此问题的办法。
  参考：https://developer.android.com/training/animation/vp2-migration?hl=zh-cn#nested-scrollables

1.2 ViewPager2 API

//是否接收外界事件
viewPager.isUserInputEnabled 
//viewpager的方向
viewPager.orientation 

//跳转到指定位置，是否有平滑效果
viewPager.setCurrentItem(card, smoothScroll)

//页面切换的时候，执行动效
viewPager.setPageTransformer(mAnimator)

/**
 * PageTransformer 是个接口，
 * 重写方法transformPage（view ,pos）
 *
 */
private val mAnimator = ViewPager2.PageTransformer { page, position ->
    val absPos = Math.abs(position)
    page.apply {
        //设置view的rotation
        this.rotation = if (rotateCheckBox.isChecked) position * 360 else 0f
        //设置view的tranlationXY
        this.translationY = if (translateY) absPos * 500f else 0f
        this.translationX = if (translateX) absPos * 500f else 0f
        if (scaleCheckBox.isChecked) {
            val scale = if (absPos > 1) 0F else 1 - absPos
            //设置view的scaleXY
            this.scaleX = scale
            this.scaleY = scale
        } else {
            this.scaleX = 1f
            this.scaleY = 1f
        }
    }
}

2 使用方式

2.1 viewpager2+ view

使用viewpager+recycler.Adapter+view的形式完成

class CardViewAdapter : RecyclerView.Adapter<CardViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardViewHolder {
        return CardViewHolder(CardView(LayoutInflater.from(parent.context), parent))
    }

    override fun onBindViewHolder(holder: CardViewHolder, position: Int) {
        holder.bind(Card.DECK[position])
    }

    override fun getItemCount(): Int {
        return Card.DECK.size
    }
}

class CardViewHolder internal constructor(private val cardView: CardView) :
    RecyclerView.ViewHolder(cardView.view) {
    internal fun bind(card: Card) {
        cardView.bind(card)
    }
}


open class CardViewActivity : BaseCardActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //设置适配器
        viewPager.adapter = CardViewAdapter()
    }
}

2.2 viewpager2+ fragment

viewpager2+FragmentStateAdapter+fragment

 viewPager.adapter = object : FragmentStateAdapter(this) {
            override fun createFragment(position: Int): Fragment {
                return CardFragment.create(Card.DECK[position])
            }

            override fun getItemCount(): Int {
                return Card.DECK.size
            }
        }

2.3 viewpager2+ tablayout

主要借助于TabLayoutMediator类绑定tablayout和viewpager2

  tabLayout = findViewById(R.id.tabs)
  TabLayoutMediator(tabLayout, viewPager) { tab, position ->
      tab.text = Card.DECK[position].toString()
  }.attach()