Android ViewPager - 在左右显示页面预览

Question

我正在使用 Android 的 ViewPager 。我想要做的是在左侧和右侧显示页面的预览。我已经看到我可以在哪里使用否定 pageMargin 来显示右侧的预览。

 setPageMargin(-100);

无论如何，我也可以显示左侧的预览吗？它基本上类似于我正在寻找的画廊小部件。

原文由 Brian Boyle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

ViewPager2 的 Kotlin 扩展解决方案

---

1. Activity 或 Fragment 中的单行实现。

    binding.viewpager2.setPreviewBothSide(R.dimen._20sdp,R.dimen._35sdp)

1. 在项目中的 HorizontalMarginItemDecoration.kt 文件中添加以下代码

   import android.content.Context
   import android.graphics.Rect
   import android.view.View
   import androidx.annotation.DimenRes
   import androidx.recyclerview.widget.RecyclerView
   import androidx.viewpager2.widget.ViewPager2

   class HorizontalMarginItemDecoration(context: Context, @DimenRes horizontalMarginInDp: Int) :
       RecyclerView.ItemDecoration() {
       private val horizontalMarginInPx: Int =
           context.resources.getDimension(horizontalMarginInDp).toInt()

       override fun getItemOffsets(
           outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State
       ) {
           outRect.right = horizontalMarginInPx
           outRect.left = horizontalMarginInPx
       }
   }

   fun ViewPager2.setPreviewBothSide(@DimenRes nextItemVisibleSize: Int,@DimenRes currentItemHorizontalMargin: Int) {
       this.offscreenPageLimit = 1
       val nextItemVisiblePx = resources.getDimension(nextItemVisibleSize)
       val currentItemHorizontalMarginPx = resources.getDimension(currentItemHorizontalMargin)
       val pageTranslationX = nextItemVisiblePx + currentItemHorizontalMarginPx
       val pageTransformer = ViewPager2.PageTransformer { page: View, position: Float ->
           page.translationX = -pageTranslationX * position
           page.scaleY = 1 - (0.25f * kotlin.math.abs(position))
       }
       this.setPageTransformer(pageTransformer)

       val itemDecoration = HorizontalMarginItemDecoration(
           context,
           currentItemHorizontalMargin
       )
       this.addItemDecoration(itemDecoration)
   }

1. 是的，你得到了这个惊人的输出

此答案 Albert Vila Calvo 答案的 优化版本

原文由 Nikunj Paradva 发布，翻译遵循 CC BY-SA 4.0 许可协议