Android Viewpager tinder 类似 UI，具有 3D 卡堆栈外观答案

【问题标题】：Android Viewpager tinder like UI with 3D card stack appearanceAndroid Viewpager tinder 类似 UI，具有 3D 卡堆栈外观
【发布时间】：2015-06-12 16:08:03
【问题描述】：

我正在尝试使用 ViewPager 在 android 中创建类似 tinder 的 UI。

我查看了这个库：https://github.com/kikoso/Swipeable-Cards，但我希望能够在向右滑动后看到上一张卡片，因此更喜欢 ViewPager。

我正在寻找的具体 UI 细节是：

将图像与当前视图下方的下一个视图的轮廓叠加。我已经能够通过 ViewPager.PageTransformer 接口实现视图的堆叠，但我无法获得 分页器内后续视图的堆栈轮廓 - 使其具有 3d 外观的部分 - 就像在这里 - 卡片堆叠在另一张卡片上 - http://i1.cdnds.net/14/38/300x522/friends-tinder-profiles-ross.jpg

这是我的 pageTransform 方法

public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();

    if (position < -1) { // [-Infinity,-1)
        // This page is way off-screen to the left.
        view.setAlpha(0);

    } else if (position <= 0) { // [-1,0]
        // Use the default slide transition when moving to the left page
        view.setAlpha(1);
        view.setTranslationX(0);
        view.setScaleX(1);
        view.setScaleY(1);
        view.setRotation(90*(position));

    } else if (position < 1) { // (0,1]
        // Fade the page out.
        view.setAlpha(1);

        // Counteract the default slide transition
        view.setTranslationX(pageWidth * -position);

        view.setScaleX(1);
        view.setScaleY(1);

    } else if (position==1) {
        view.setAlpha(1);
//      view.setPadding(0,15,0,0);
    }
    else { // (1,+Infinity]
        // This page is way off-screen to the right.
        view.setAlpha(0);
    }
}

viewPager 可以做到这一点吗？

【问题讨论】：

嗨。你找到解决办法了吗？
@jaffa 查看答案

标签： android android-viewpager

【解决方案1】：

这就是我设置它的方式——它有点笨拙，因为我手动触发了transformPage 方法，正如我在此处的评论中提到的那样：

Android ViewPager manually call PageTransformer transformPage

但是，它有效！

@Override
public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();

    if (position < -1) { // [-Infinity,-1)
        // This page is way off-screen to the left.
        view.setAlpha(0);

    } else if (position <= 0) { // [-1,0]
        // Use the default slide transition when moving to the left page
        view.setAlpha(1);
        view.setTranslationX(0);
        view.setTranslationY(0);
        view.setScaleX(1);
        view.setScaleY(1);
        view.setRotation(90*(position));

    } else if (position < 1) { // (0,1]
        // Fade the page out.
        view.setAlpha(1);
        view.setRotation(0);

        // Counteract the default slide transition
        view.setTranslationX(pageWidth * -position);
        view.setTranslationY(50*position);

        view.setScaleX(Math.max(0.9f, (1 - position)));
        view.setScaleY(Math.max(0.9f, (1 - position)));
        CardView cv = (CardView)view.findViewById(R.id.card_view);
        cv.setPadding(0,0,0,0);

    } else if (position==1) {
        view.setAlpha(1);
        view.setTranslationX(pageWidth*-position);
        view.setTranslationY(50*position);

        view.setScaleX(Math.max(0.9f, (1 - position)));
        view.setScaleY(Math.max(0.9f, (1 - position)));

    }

    else { // (1,+Infinity]
        // This page is way off-screen to the right.
        view.setAlpha(1);
    }
}

【讨论】：

【解决方案2】：

不能使用 PageTransformer 接口实现 tinder 效果，因为位置值只是 1 个轴值。您应该有其他值，例如 x、y 轴上的触摸点坐标，因为 tinder 效果使用三角函数。

【讨论】：

【解决方案3】：

您可以使用 Android Library Truffle-Shuffle 轻松完成此操作。您可以在卡片内添加 X 数量的卡片，其中包含任何 xml 内容。 https://github.com/intuit/truffle-shuffle

【讨论】：