android - 具有平滑滚动和页面转换功能的垂直 ViewPager，如 inshorts 应用程序

Question

我想制作一个 Vertical ViewPager 看起来像 inshorts 应用程序。

我尝试了在 Stack Overflow 和 Github 中找到的几种解决方案。它们都有相同的代码实现方式，并且它们在上下滚动(垂直滚动)时都有相同的滞后问题，您可以在video中看到, 但设计实现与 inshorts 相同。

我试过的链接是，

1) VerticalViewPager

2) DirectionViewPager

3) Github Repos

我还尝试了 android 的 Viewpager 类中的 mFlingDistance、mMinimumVelocity 等，以增加 Viewpager 中的 fling。但没有让它发挥作用的运气。

下面是我的VerticalViewPager类

public class VerticalViewPager extends ViewPager {

    public VerticalViewPager(Context context) {
        super(context);
        init();
    }

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

    private void init() {
        // The majority of the magic happens here
        setPageTransformer(true, new VerticalPageTransformer());
        // The easiest way to get rid of the overscroll drawing that happens on the left and right
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    /**
     * Swaps the X and Y coordinates of your touch event.
     */
    private MotionEvent swapXY(MotionEvent ev) {
        float width = getWidth();
        float height = getHeight();

        float newX = (ev.getY() / height) * width;
        float newY = (ev.getX() / width) * height;

        ev.setLocation(newX, newY);

        return ev;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev){
        boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
        swapXY(ev); // return touch coordinates to original reference frame for any child views
        return intercepted;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapXY(ev));
    }
}

并使用 VerticaPageTransformer 类进行页面转换。

class VerticalPageTransformer implements ViewPager.PageTransformer {
     private static final float MIN_SCALE = 0.75f;
        @Override
        public void transformPage(View view, float position) {

            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);
                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);

                //set Y position to swipe in from top
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);
                view.setScaleX(1);
                view.setScaleY(1);

            } else if (position <= 1) { // [0,1]
                view.setAlpha(1);

                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);


                // Scale the page down (between MIN_SCALE and 1)
                float scaleFactor = MIN_SCALE
                        + (1 - MIN_SCALE) * (1 - Math.abs(position));
                view.setScaleX(scaleFactor);
                view.setScaleY(scaleFactor);

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }

        }

    }

对我有用的是 castorflex平滑滚动的解决方案，但是当我将 PageTransformer 应用于 castorflex 解决方案时，不是垂直滚动而是对角滚动。您可以看到 reference video在这里。

我也试过 ViewPager2使用 RecyclerView(使用 SnapHelper)但使用 viewpager2，我遇到了同样的对角线问题。使用 Snaphelper，我无法提供像内裤那样的页面效果(参见视频)。可能是，通过 RecyclerView 的 LinearLayoutManager 是可能的，正如我所见here .但是无法转换我的页面动画。

所以任何人都可以给我任何提示，或者任何想法

1) 如何使用上述方法实现平滑滚动？或

2) 如何从下面的方法而不是对角线进行垂直页面转换？或

3) 或者任何其他方式，如果你们有的话。

提前致谢

可以看到Castorflex's VerticalViewPager类，并使用相同的VerticlePageTransform类进行页面转换

Answer 1

Check this Github Repo https://github.com/dipanshukr/Viewpager-Transformation

---

SampleActivity.java

private void initViewPager() {
    VerticalViewPager viewPager = (VerticalViewPager) findViewById(R.id.vertical_viewpager);
    //viewPager.setPageTransformer(false, new ZoomOutTransformer());
    //viewPager.setPageTransformer(true, new StackTransformer());
    String title = "ContentFragment";
    viewPager.setAdapter(new ContentFragmentAdapter.Holder(getSupportFragmentManager())
            .add(ContentFragment.newInstance(title, 1))
            .add(ContentFragment.newInstance(title, 2))
            .add(ContentFragment.newInstance(title, 3))
            .add(ContentFragment.newInstance(title, 4))
            .add(ContentFragment.newInstance(title, 5))
            .set());
    // If you setting other scroll mode,
    // the scrolled fade is shown from either side of display.
    viewPager.setOverScrollMode(View.OVER_SCROLL_NEVER);
}

VerticalViewPager.java

public class VerticalViewPager extends ViewPager {

    public VerticalViewPager(Context context) {
        this(context, null);
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        setPageTransformer(false, new DefaultTransformer());
    }

    private MotionEvent swapTouchEvent(MotionEvent event) {
        float width = getWidth();
        float height = getHeight();

        float swappedX = (event.getY() / height) * width;
        float swappedY = (event.getX() / width) * height;

        event.setLocation(swappedX, swappedY);

        return event;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        boolean intercept = super.onInterceptTouchEvent(swapTouchEvent(event));
        //If not intercept, touch event should not be swapped.
        swapTouchEvent(event);
        return intercept;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapTouchEvent(ev));
    }
}

DefaultTransformer.java

public class DefaultTransformer implements ViewPager.PageTransformer {

    @Override
    public void transformPage(View view, float position) {
        float alpha = 0;
        if (0 <= position && position <= 1) {
            alpha = 1 - position;
        } else if (-1 < position && position < 0) {
            alpha = position + 1;
        }
        view.setAlpha(alpha);
        view.setTranslationX(view.getWidth() * -position);
        float yPosition = position * view.getHeight();
        view.setTranslationY(yPosition);
    }
}