21

I want to implement Carousel using View Pager2 with preview of left and right page like this:

enter image description here

Initially I was using view pager1 which supported. Now I think it's removed

    viewPagerhost.setPageMargin(20);

Any idea how we can achieve this using View Pager 2

4

5 回答 5

29

MarginPageTransformer无法满足您的需求。

您必须使用自定义setPageTrarnsformer


步骤1

这是我的扩展方法。

您可以在本文 中查看详细信息

fun ViewPager2.setShowSideItems(pageMarginPx : Int, offsetPx : Int) {

    clipToPadding = false
    clipChildren = false
    offscreenPageLimit = 3

    setPageTransformer { page, position ->

        val offset = position * -(2 * offsetPx + pageMarginPx)
        if (this.orientation == ViewPager2.ORIENTATION_HORIZONTAL) {
            if (ViewCompat.getLayoutDirection(this) == ViewCompat.LAYOUT_DIRECTION_RTL) {
                page.translationX = -offset
            } else {
                page.translationX = offset
            }
        } else {
            page.translationY = offset
        }
    }

}

第2步

使用您的用例设置 pageMarginPx 和 offsetPx。

<resources>
    <dimen name="pageMargin">20dp</dimen>
    <dimen name="pagerOffset">30dp</dimen>
    <dimen name="pageMarginAndoffset">50dp</dimen>
</resources>

第 3 步

在 xml 中设置布局项的边距。

像这样

    <androidx.cardview.widget.CardView
            app:cardCornerRadius="12dp"

            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"

            android:layout_marginLeft="@dimen/pageMarginAndoffset"
            android:layout_marginRight="@dimen/pageMarginAndoffset"

            android:layout_width="match_parent"
            android:layout_height="match_parent">
于 2019-08-28T14:37:17.230 回答
19

现在我们需要setPageTransformer()使用Version 1.0.0-alpha05

新的功能

  • ItemDecorator引入了与 RecyclerView 一致的行为。
  • MarginPageTransformer引入以提供在页面之间(页面插图之外)创建空间的能力。
  • CompositePageTransformer引入以提供组合多个 PageTransformer 的能力。

示例代码

myViewPager2.setPageTransformer(new MarginPageTransformer(1500));

如果您想使用 View Pager2 实现 Carousel,请查看我之前的答案

于 2019-06-11T04:24:27.923 回答
3

我使用MJ Studio 的方法来创建我的自定义,该自定义PageTransformer也更改了页边距,如下所示:

class OffsetPageTransformer(
    @Px private val offsetPx: Int,
    @Px private val pageMarginPx: Int
) : ViewPager2.PageTransformer {

    override fun transformPage(page: View, position: Float) {
        val viewPager = requireViewPager(page)
        val offset = position * -(2 * offsetPx + pageMarginPx)
        val totalMargin = offsetPx + pageMarginPx

        if (viewPager.orientation == ViewPager2.ORIENTATION_HORIZONTAL) {
            page.updateLayoutParams<ViewGroup.MarginLayoutParams> {
                marginStart = totalMargin
                marginEnd = totalMargin
            }

            page.translationX = if (ViewCompat.getLayoutDirection(viewPager) == ViewCompat.LAYOUT_DIRECTION_RTL) {
                -offset
            } else {
                offset
            }
        } else {
            page.updateLayoutParams<ViewGroup.MarginLayoutParams> {
                topMargin = totalMargin
                bottomMargin = totalMargin
            }

            page.translationY = offset
        }
    }

    private fun requireViewPager(page: View): ViewPager2 {
        val parent = page.parent
        val parentParent = parent.parent
        if (parent is RecyclerView && parentParent is ViewPager2) {
            return parentParent
        }
        throw IllegalStateException(
            "Expected the page view to be managed by a ViewPager2 instance."
        )
    }
}

这样你就可以调用:

viewPager.setPageTransformer(OffsetPageTransformer(offsetPx, pageMarginPx))
于 2020-09-13T10:27:50.253 回答
0

你可以使用这个代码

   viewPager.setPageTransformer(new MarginPageTransformer(margin as PX));

但如果你想使用 DP,你可以使用下面的函数将 PX 转换为 DP

 private  int pxToDp(int px) {
    return (int) (px / Resources.getSystem().getDisplayMetrics().density);
}
于 2020-05-15T05:39:43.737 回答
0

MarginPageTransformer有助于定义页面之间的空间。

offscreenPageLimit让您定义应在屏幕外呈现多少页面。

代码示例:

viewPager2.offscreenPageLimit = 3
viewPager2.setPageTransformer(MarginPageTransformer({MARGIN AS PX}));
于 2020-07-29T08:33:42.463 回答