Android Viewpager火種像UI一樣具有3D卡堆棧外觀

Question

我正在嘗試使用ViewPager在Android中創建一個類似火炬的UI。

我看過這個庫： https://github.com/kikoso/Swipeable-Cards ： 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);
    }
}

Answer 2

您無法使用PageTransformer接口實現火箭效果，因為位置值只是1軸值。 您應該有其他值，例如x，y軸上的觸摸點坐標，因為tinder效果使用三角函數。

Answer 3

您可以使用Android Library Truffle-Shuffle輕松完成此操作。 您可以在卡內添加任意xml內容的X卡。 https://github.com/intuit/truffle-shuffle