Android Viewpager tinder like UI with 3D card stack appearance

后端 未结 3 2125
Happy的楠姐
Happy的楠姐 2021-02-06 08:12

I\'m trying to create a tinder-like UI in android using the ViewPager.

I have looked at this library: https://github.com/kikoso/Swipeable-Cards, but I\'d li

3条回答
  •  再見小時候
    2021-02-06 08:40

    So this was the way that I set it up - its a little hacky because I manually trigger the transformPage method as mentioned in my comment here:

    Android ViewPager manually call PageTransformer transformPage

    BUT, it works!

    @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);
        }
    }
    

提交回复
热议问题