Android: анимация макета, как в новостном приложении Inshorts

эффект смахивания вверх и вниз, как в новостных приложениях inshorts, hike news, murmur.

весь макет плавно вверх/вниз.
проверить приложение по этой ссылке вкратце и шептать.

я пробовал этот код...

    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);
    }
    private class VerticalPageTransformer implements PageTransformer {

        @SuppressLint("NewApi")
        @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 <= 1) { // [-1,1]
                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);

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

    /**
     * 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));
    }

}

В MainActivity.java

VerticalViewPager Pager2;
PagerAdapter adapter;
String[] articleTitle;
String[] articleName;
String[] articleDiscription;

OnCreate()

Pager2=(VerticalViewPager)findViewById(R.id.pager);


// Pass results to ViewPagerAdapter Class
adapter = new ViewPagerAdapter(getActivity(), articleTitle, articleName,     articleDiscription, btnBack,articleImage);

// Binds the Adapter to the ViewPager
Pager2.setAdapter(adapter);

Activity_main.xml

<com.example.flipnews.VerticalViewPager
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/pager"
   />

В моем коде выполняется простое смахивание вверх-вниз, например, по этой ссылке. но я хочу создать лучший анимационный эффект, как в вышеупомянутых приложениях. или встроенный в телефон эффект фотогалереи.

Заранее спасибо.


person Viveka Patel    schedule 04.12.2015    source источник
comment
Здравствуй, Вивека... мы не можем помочь тебе в разработке... мы можем только помочь тебе решить проблемы с этой реализацией. Вам нужно попробовать это самостоятельно и опубликовать свой код с проблемами позже.   -  person Mariano Zorrilla    schedule 04.12.2015
comment
@Viveka, если вы нашли какую-либо библиотеку для этой анимации, дайте мне знать.   -  person Pankaj Arora    schedule 07.12.2015
comment
Я уже пробовал этот код, но не получил правильного вывода. Пожалуйста, проверьте мой код. - @МарианоЗоррилла   -  person Viveka Patel    schedule 07.12.2015
comment
я отредактировал свой пост .. я не использовал библиотеку для анимации. мой вопрос такой же для анимации. как я могу применить в своем коде??-@AndeloperDev   -  person Viveka Patel    schedule 07.12.2015
comment
На эту проблему подробно ответили в этой теме: - stackoverflow.com/questions/13477820 /android-vertical-viewpager   -  person Achillies    schedule 23.11.2016


Ответы (1)


Я нашел решение после многих исследований, надеюсь, оно будет полезно для других.

Совет: установите черный цвет фона пейджера для лучшего эффекта смахивания.

 private static class VerticalPageTransformer implements PageTransformer {
        private static float MIN_SCALE = 0.75f;

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

            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);
                //view.setTranslationX(1);
                view.setScaleX(1);
                view.setScaleY(1);
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);
                view.setTranslationX(-1 * view.getWidth() * position);

            } else if (position <= 1) { // (0,1]
                // Fade the page out.
                view.setAlpha(1 - position);

                view.setTranslationX(-1 * 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);
            }

        }
    }

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

}
person Viveka Patel    schedule 16.12.2015
comment
@Viveka У меня проблема, у моего пейджера просмотра есть сетка внутри него. при свайпе по сетке функция свайпа не работает - person Praneeth; 18.02.2016
comment
Привет, я попробовал ваш ответ, и он отлично работает. Я новичок в этом. Не могли бы вы дать мне краткое описание того, что именно вы здесь делаете, например view.setTranslationX(-1 * view.getWidth() * position); это? - person Vishnu; 17.07.2016
comment
Я имею в виду цель расчетов. - person Vishnu; 17.07.2016
comment
@Viveka Вы также добавили функцию замены правой и левой? - person Faisal Shaikh; 09.01.2018