android - 类似 Snapchat 的 Viewpager 动画

Question

我正在尝试创建一个类似于 Snapchat Viewpager 的动画，其中左右 fragment 的背景淡入但内容滑入。所有这些都发生在相机 fragment (中心 fragment )保持静止时。就像左右 fragment 重叠在中心 fragment 上。

我看过多个教程，我能找到的最接近的是这个链接:OnPageChangeListener alpha crossfading

问题在于它仅在正确的 fragment 出现在 View 中时才起作用。而左侧 fragment 的背景不与中心 fragment 重叠。

代码:

public class CustomPageTransformer implements ViewPager.PageTransformer {
public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();
    View imageView = view.findViewById(R.id.image_view);
    View contentView = view.findViewById(R.id.content_area);

    if (position < -1) { // [-Infinity,-1)
        // This page is way off-screen to the left
    } else if (position <= 0) { // [-1,0]
        // This page is moving out to the left

        // Counteract the default swipe
        view.setTranslationX(pageWidth * -position);
        if (contentView != null) {
            // But swipe the contentView
            contentView.setTranslationX(pageWidth * position);
        }
        if (imageView != null) {
            // Fade the image in
            imageView.setAlpha(1 + position);
        }

    } else if (position <= 1) { // (0,1]
        // This page is moving in from the right

        // Counteract the default swipe
        view.setTranslationX(pageWidth * -position);
        if (contentView != null) {
            // But swipe the contentView
            contentView.setTranslationX(pageWidth * position);
        }
        if (imageView != null) {
            // Fade the image out
            imageView.setAlpha(1 - position);
        }
    } else { // (1,+Infinity]
        // This page is way off-screen to the right
    }
}

示例:

Official Snapchat App

上面的例子表明相机是静止的(不动的)，而发现页面的背景与相机 fragment (中心 fragment )重叠，但发现页面的内容是滑入的(也与相机 fragment 重叠)

如果你们中有人知道如何做到这一点，我将不胜感激。

Answer 1

您可以使用此库实现与 SnapChat 相同的 UI。该库还提供自定义功能，例如显示超过 3 个选项卡，还有许多功能可帮助您构建 Snap Like Viewpager。

SnapTabLayout