Android寻呼机预览后视图

Question

我怎样才能在Android中获得类似这样的东西？

我已经用深度页面转换器实现了一个viewpager，但是我想不出在后面添加项目预览的方法。

Answer 1

您可以使用自定义 LayoutManager for RecyclerView 而不是 ViewPager。因此，您可以获得这样的UI效果。此处的示例代码。

Answer 2

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

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

}}

Answer 3

解决方案是这个图书馆:https://github.com/blipinsk/FlippableStackView