Android viewpager preview behind view

问题

How can I get something like this sing viewpager in android?

I've implemented a viewpager with depth page transformer, but I cant figure out a way to add the preview of the items behind.

回答1:

The solution is this library: https://github.com/blipinsk/FlippableStackView

回答2:

Here's my solution. I hope it helps.

public class StackViewPager extends ViewPager {

private static final float FIRST_PAGE_SCALE = 0.9f;
private static final float SCALE_FACTOR = 0.1f; // each item scaled down on 10% of previous
private static final float OVERLAP_FACTOR = 0.5f;

public StackViewPager(final Context context) {
    super(context);
}

public StackViewPager(final Context context, final AttributeSet attrs) {
    super(context, attrs);
}

public void initStack(final int numberOfStacked) {
    setPageTransformer(true, new DepthPageTransformer(numberOfStacked, FIRST_PAGE_SCALE, SCALE_FACTOR, OVERLAP_FACTOR));
    setOffscreenPageLimit(numberOfStacked);
}

private final class DepthPageTransformer implements ViewPager.PageTransformer {

    private final int numberOfStacked;
    private final float alphaFactor;
    private final float scaleFactor;
    private final float firstPageScale;
    private final float overlapFactor;
    private final float firstOverlapPx;

    DepthPageTransformer(final int numberOfStacked, final float firstPageScale, final float scaleFactor, final float overlapFactor) {
        this.numberOfStacked = numberOfStacked;
        this.firstPageScale = firstPageScale;
        this.alphaFactor = 1f / numberOfStacked;
        this.scaleFactor = scaleFactor;
        this.overlapFactor = overlapFactor;
        this.firstOverlapPx = UIUtil.getDpInPx(8f);
    }

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

        if (position < -numberOfStacked || position > numberOfStacked) {

            ViewCompat.setAlpha(view, 0f);
            ViewCompat.setTranslationX(view, 0f);
            ViewCompat.setTranslationY(view, 0f);
            ViewCompat.setScaleX(view, 1f);
            ViewCompat.setScaleY(view, 1f);

        } else if (position <= 0f) { // first page

            ViewCompat.setAlpha(view, 1f);
            ViewCompat.setTranslationX(view, 0f);
            ViewCompat.setTranslationY(view, 0f);
            ViewCompat.setScaleX(view, firstPageScale);
            ViewCompat.setScaleY(view, firstPageScale);

        } else if (position <= 1) { // second page

            ViewCompat.setAlpha(view, 1f - alphaFactor * position);
            ViewCompat.setTranslationX(view, pageWidth * -position);
            ViewCompat.setTranslationY(view, -getTranslationY(pageHeight, position));
            float scale = getScale(position);
            ViewCompat.setScaleX(view, scale);
            ViewCompat.setScaleY(view, scale);

        } else { // staged pages

            ViewCompat.setAlpha(view, 1f - alphaFactor * position);
            ViewCompat.setTranslationX(view, pageWidth * -position);
            ViewCompat.setTranslationY(view, -getTranslationY(pageHeight, position));
            float scale = getScale(position);
            ViewCompat.setScaleX(view, scale);
            ViewCompat.setScaleY(view, scale);
        }
    }

    private float getScale(final float position) {
        return (float) Math.pow(1f - scaleFactor, position + 1f);
    }

    private float getTranslationY(final int pageHeight, final float position) {
        float overlap = firstOverlapPx * (1f - overlapFactor * (float) Math.pow(1f - overlapFactor, position - 1f));
        float scaledHeight = getScale(position - 1f) * pageHeight;
        return (pageHeight - scaledHeight) / 2 + overlap;
    }

}}

回答3:

You can use custom LayoutManager for RecyclerView instead ViewPager. So you can get UI effect like this. Example code here.

来源：https://stackoverflow.com/questions/37275411/android-viewpager-preview-behind-view