Sure, here is the translation: ViewPager2 堆叠式页面转换器

huangapple go评论85阅读模式
英文:

ViewPager2 Stack PageTransform

问题

我需要一些关于 ViewPager2PageTransformer 的帮助。

我的 ViewPager2 中有3个页面。
每个页面都应该被下一个页面部分覆盖。
此外,这些页面都应该紧紧居中,只能侧滑。

示例:
页面1:蓝色
页面2:紫色
页面3:绿色

页面1被页面2部分覆盖,页面2被页面3部分覆盖。

我已经设置第3页可以首先显示,通过将 currentItem 设置为2。

您可以看到绿色的页面,如果向右滑动,您应该能够看到紫色的页面(即使在滑动过程中)。
然后,如果您将紫色的页面向右滑动,您应该可以看到蓝色的页面。
页面不应该移动(除了向侧边移动,当然)。

类似于这个示例,但重叠的方式相反,因为我从第3页开始,且不改变缩放。(透明度的变化 是完全可以的,也是期望的)。

希望有人能够帮助我,提前感谢。

英文:

I need some help with a PageTransformer for ViewPager2.

I have 3 pages in my ViewPager2.
Each page should be overlapped by the next.
In addition, the pages should all be firmly in the middle and only be slidable to the side.

<br><br>
Example:<br>
Page 1: blue color<br>
Page 2: purple color<br>
Page 3: green color

Page 1 is overlapped by Page 2 and page 2 is overlapped by Page 3.

I have set that the 3rd page can be seen first by setting the currentItem to 2

You can see the green page and if you push it to the right you should be able to see the purple page (even while pushing)
If you then push the purple page to the right you should see the blue page
And the pages should not move (except to the side of course)

Something similar to this but the overlap the other way around because i start at page 3 and without changing the scaling. (The alpha change is totally okay and wanted)

I hope someone can help me and thanks in advance

答案1

得分: 1

几个小时的尝试后我得到了期望的结果

class StackTransformer : ViewPager2.PageTransformer {
    override fun transformPage(view: View, position: Float) {
        view.apply {
            when {
                position < -1 -> {
                    alpha = 0f
                }
                position <= 0 -> {
                    alpha = 1 - position
                    translationX = width * -position
                    ViewCompat.setTranslationZ(this, -1f)
                }
                position <= 1 -> {
                    alpha = 1f
                    translationX = 0f
                    ViewCompat.setTranslationZ(this, 0f)
                }
                else -> {
                    alpha = 0f
                }
            }
        }
    }
}
英文:

After a few hours of trying, I have the desired result

class StackTransformer : ViewPager2.PageTransformer {
    override fun transformPage(view: View, position: Float) {
        view.apply {
            when {
                position &lt; -1 -&gt; {
                    alpha = 0f
                }
                position &lt;= 0 -&gt; {
                    alpha = 1 - position
                    translationX = width * -position
                    ViewCompat.setTranslationZ(this, -1f)
                }
                position &lt;= 1 -&gt; {
                    alpha = 1f
                    translationX = 0f
                    ViewCompat.setTranslationZ(this, 0f)
                }
                else -&gt; {
                    alpha = 0f
                }
            }
        }
    }
}

huangapple
  • 本文由 发表于 2020年4月11日 00:16:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/61144287.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定