首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何实现显示上一页和下一页以及更大的焦点页面的ViewPager

如何实现显示上一页和下一页以及更大的焦点页面的ViewPager
EN

Stack Overflow用户
提问于 2014-08-22 12:26:13
回答 1查看 5K关注 0票数 8

我正在尝试创建一些东西,可以在viewpager上显示我的页面,让它具有良好的感觉和设计,我检查了这个link,它以某种方式帮助了我,也遵循了这个link如何实现它,但我最终遇到了一些问题。首先,对于运行在API11以下(API8是我的目标)的设备来说,它不会真正工作或看起来很好。其次,我不能让聚焦的页面比上一页和下一页更大。为了设计,我想让它看起来像这样:

希望有人可以帮助我在这或任何其他方式来实现这一点。

EN

回答 1

Stack Overflow用户

发布于 2018-02-23 23:53:03

请先阅读this。然后应用您自己的PageTransformer实现。如下所示:

代码语言:javascript
运行
复制
public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.5f;
    private static final float MAX_SCALE = 0.8f;
    private static final float MIN_FADE = 0.2f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) {
            view.setAlpha(MIN_FADE);
        } else if (position < 0) {
            view.setAlpha(1 + position * (1 - MIN_FADE));
            view.setTranslationX(-pageWidth * MAX_SCALE * position);
            ViewCompat.setTranslationZ(view, position);
            float scaleFactor = MIN_SCALE
                    + (MAX_SCALE - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else if (position == 0) {
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(MAX_SCALE);
            ViewCompat.setTranslationZ(view, 0);
            view.setScaleY(MAX_SCALE);
        } else if (position <= 1) {
            ViewCompat.setTranslationZ(view, -position);
            view.setAlpha(1 - position * (1 - MIN_FADE));
            view.setTranslationX(pageWidth * MAX_SCALE * -position);

            float scaleFactor = MIN_SCALE
                    + (MAX_SCALE - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else {
            view.setAlpha(MIN_FADE);
        }
    }
}

您还需要控制子绘图顺序,以将当前选定的视图设置在顶部(仅当视图相互重叠时才需要):

代码语言:javascript
运行
复制
public class MyPager extends ViewPager {
    public MyPager(Context context) {
        this(context, null);
    }

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

    @Override
    protected int getChildDrawingOrder(int childCount, int i) {
        if(i == childCount - 1) {
            return getCurrentItem();
        } else {
            return i >= getCurrentItem()? i + 1 : i;
        }
    }
}

如果屏幕上有更多可见页面,请将ViewPager.setOffscreenPageLimit设置为2或更多。

结果如下:

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25439543

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档