Android Viewpager火种像UI一样具有3D卡堆栈外观

Question

我正在尝试使用ViewPager在Android中创建一个类似火炬的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吗？

Answer 1

这就是我设置它的方式 - 它有点hacky，因为我手动触发了transformPage我的评论中提到的方法：

Android ViewPager手动调用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);
    }
}