Question

我怎样才能在Android中获得这样的东西唱歌viewpager？

我已经使用深度页面转换器实现了一个viewpager，但我无法找到一种方法来添加后面项目的预览。

Answer 1

解决方案就是这个库：https://github.com/blipinsk/FlippableStackView

Answer 2

您可以使用自定义LayoutManager for RecyclerView而不是ViewPager。因此，您可以获得UI效果like this。 Example code here

Answer 3

这是我的解决方案。我希望它有所帮助。

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

}}

Android viewpager预览后面的视图

3 个答案: