Вертикальный ViewPager с плавной прокруткой и преобразованием страниц, как в приложении для коротких шорт

Я хотел сделать вертикальное ViewPager похожим на короткое приложение.

Я попробовал несколько решений, найденных в Stack Overflow и в Github. Все они имеют одинаковый способ реализации кода, и все они имеют одинаковую проблему с задержкой при прокрутке вверх и вниз (вертикальная прокрутка), вы можете увидеть в видео, но реализация дизайна такая же, как у коротких сцен.

Ссылка, которую я пробовал,

1) VerticalViewPager

2) DirectionViewPager

3) Репозитории Github

Я также пробовал использовать mFlingDistance, mMinimumVelocity и т. д. из класса Android Viewpager для увеличения броска в Viewpager. Но не повезло заставить его работать.

Ниже приведен мой класс 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 Решение: вместо вертикальной прокрутки используется диагональная прокрутка. Здесь можно посмотреть справочное видео.

Я также пробовал с ViewPager2 и с RecyclerView (с SnapHelper), но с < strong>viewpager2, у меня такая же проблема с диагональю. И с Snaphelper я не могу обеспечить эффект страницы, такой как шорты (см. Видео). Возможно, это будет возможно с помощью LinearLayoutManager RecyclerView, как я видел здесь. Но не удалось преобразовать анимацию моей страницы.

Так что любой может дать мне какой-либо намек или любую идею о

1) Как сделать плавную прокрутку с помощью вышеуказанного подхода? или

2) Как сделать так, чтобы переход страницы снизу подходил вертикально, а не диагонально? или

3) Или любым другим способом, если у вас есть люди.

заранее спасибо

Вы можете увидеть Класс Castorflex VerticalViewPager и использование того же класса VerticlePageTransform для преобразования страницы


person Ranjan    schedule 28.06.2019    source источник
comment
Недавно был пост об использовании MotionLayout для поведения смахивания. badootech.badoo.com/swipe-right-on-motion-layout- 641c1452d6a5 Возможно, что-то в этом роде подойдет вам.   -  person Froyo    schedule 08.07.2019
comment
Да, но он горизонтальный и есть стековая анимация. И я хочу анимацию как в шортах.   -  person Ranjan    schedule 09.07.2019
comment
Измените направление с горизонтального на вертикальное.   -  person Froyo    schedule 09.07.2019
comment
Я вижу только это, но есть две проблемы: одна — это бросок (например, viewpager или помощник по привязке recyclerview), а другая — короткие, такие как анимация.   -  person Ranjan    schedule 09.07.2019


Ответы (1)


Проверьте этот репозиторий Github 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);
    }
}
person Arindam Karmakar    schedule 10.07.2019
comment
Ваш пейджер вертикального просмотра также такой же, как и другие, поскольку все они страдают отставанием, если используются внутри другого пейджера просмотра (например, вертикального в горизонтальном). Я также написал это в самом вопросе, посмотрите на него. - person Ranjan; 10.07.2019