viewPager2 预展示下一个 页面

4 阅读1分钟

viewPager2 预展示下一个 fragment

1 修改ItemDecoration

class ItemDecoration : RecyclerView.ItemDecoration() {
  val previewWidth: Int = 30.dp // 预览部分宽度
  val pageMargin: Int = 30.dp // 页面间距

  override fun getItemOffsets(
    outRect: Rect,
    view: View,
    parent: RecyclerView,
    state: RecyclerView.State,
  ) {
    super.getItemOffsets(outRect, view, parent, state)
    val position = parent.getChildAdapterPosition(view)
    val itemCount = state.itemCount
    when (position) {
    // 因 如需预览 则 一般非最后一个不需要右边的边距,需直接展示,则 可能 与最后一个展示的边距不一样
    itemCount - 1 -> {
        // 最后一页:正常边距
        outRect.set(0, 0, 15.dp, 0)
      }
      else -> {
      	// 只设置了右侧的边距,如果需要左侧的 则修改第一个参数
        outRect.set(0, 0, pageMargin + previewWidth, 0)
      }
    }
  }
}

2 修改PageTransformer

 binding.viewPager.setPageTransformer { page, position ->
    when {
      position <= 0 -> {
        // 当前页面
        page.translationX = 0f
        page.scaleX = 1f
        page.scaleY = 1f
      }

      position <= 1 -> {
        // 下一个页面(预览)
        val offset = -page.width * position * 0.1f
        page.translationX = offset

        // 设置层叠顺序
        page.translationZ = -position * 10
      }
    }
  }

3 预加载

binding.viewPager.offscreenPageLimit = 2