Android ViewPager2 setPageMargin 未解决

Posted 2023-02-16

【中文标题】Android ViewPager2 setPageMargin 未解决

【英文标题】：Android ViewPager2 setPageMargin unresolved

【发布时间】：2019-09-30 12:53:21

【问题描述】：

我想使用 View Pager2 实现 Carousel，并像这样预览左右页面：

最初我使用的是支持的 view pager1。现在我认为它已被删除

    viewPagerhost.setPageMargin(20);

知道如何使用 View Pager 2 实现这一目标

【问题讨论】：

issuetracker.google.com/issues/132249311 处创建了一个问题

请查看我的回答***.com/a/67771069/3586084

【参考方案1】：

MarginPageTransformer 无法满足您的需求。

您必须使用自定义 setPageTrarnsformer。

---

第一步

这是我的扩展方法。

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

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
        
    

第二步

根据您的用例设置 pageMarginPx 和 offsetPx。

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

第三步

在 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_
            android:layout_>

【讨论】：

那篇中篇文章是天赐之物。我所要做的就是将它转换为 java 并且它工作得非常简单。这是更好的答案。对于任何忽略此答案或链接的人，请务必阅读。它为我节省了几个小时。

你用“ViewCompat.getLayoutDirection(this) == ViewCompat.LAYOUT_DIRECTION_RTL”拯救我。它需要4个小时。谢谢人

此代码只是所附文章的副本。总之干得好。

如果无法通过xml设置marginLeft、marginRight，请在setPageTransformer()中使用下面的代码。例如：在合并布局中。 page.updateLayoutParams marginStart = 100 marginEnd = 100

它有效。感谢您的解决方案。

【参考方案2】：

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

新功能

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

示例代码

myViewPager2.setPageTransformer(new MarginPageTransformer(1500));

查看my previous answer if you want to implement Carousel using View Pager2

【讨论】：

这不会像 OP 要求的那样创建预览，这甚至是一个答案吗？它只是扩大了页面之间的差距。

【参考方案3】：

我使用MJ Studio's approach 来创建我的自定义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))

【参考方案4】：

您可以使用此代码

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

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

 private  int pxToDp(int px) 
    return (int) (px / Resources.getSystem().getDisplayMetrics().density);

【参考方案5】：

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

offscreenPageLimit 让您定义应在屏幕外渲染多少页面。

代码示例：

viewPager2.offscreenPageLimit = 3
viewPager2.setPageTransformer(MarginPageTransformer(MARGIN AS PX));