Использование ViewPager для создания эффекта перелистывания

Перелистывание экранов, это переход между объектами, растянутыми на весь экран. Такой способ является общим для интерфейсов, вроде мастеров настройки или слайдшоу. В этом уроке показано, как создать эффект перелистывания используя компонент ViewPager, предоставляемый библиотекой поддержки. ViewPager позволяет создавать такой эффект автоматически. Вот как выглядит этот эффект.

Слайд-анимация. Нажмите на экран для повторного просмотра.

Если вы хотите забежать вперед и посмотреть готовый пример, скачайте демо-проект, запустите и выберите пример Screen Slide. Смотрите следующие файлы:

  • src/ScreenSlidePageFragment.java
  • src/ScreenSlideActivity.java
  • layout/activity_screen_slide.xml
  • layout/fragment_screen_slide_page.xml

Создаем объекты

Создаем разметку, которую позже будем использовать во фрагментах. Следующий пример включает в себя текстовое поле:

Не забудьте также про строковый ресурс для данной разметки.

Создаем фрагмент

Создаем расширенный класс Fragment, который будет возвращать разметку. Разметку мы создадим в методе onCreateView(). Вы можете создавать экземпляры данного фрагмента в родительском явлении, всякий раз, когда вам нужно открыть новую страницу и показать ее пользователю:

Добавляем компонент ViewPager

Компонент ViewPager содержит встроенные жесты для переключения страниц, которые показывают анимацию перелистывания по умолчанию. Поэтому вам не надо создавать для этого что-либо еще. ViewPager использует адаптер PageAdapter в качестве поставщика новых страниц. В свою очередь PageAdapter использует класс фрагмента, который мы создали ранее.

Сначала создадим разметку, содержащую компонент ViewPager:

Создадим явление, которое делает следующее:

  • Устанавливает компонент, который будет размещаться в ViewPager.
  • Создает наследник абстрактного класса FragmentStatePagerAdapter и реализует метод getItem() для поставки экземпляров класса ScreenSlidePageFragment как новых страниц. Адаптер страниц также требует реализации метода getCount(), который возвращает количество страниц адаптера, который будет создан (В нашем примере 5).
  • Подключает PagerAdapter в ViewPager.
  • Обрабатывает аппаратную кнопку “назад”, перемещаясь обратно по виртуальному стеку фрагментов.

Настройка анимации с использованием PageTransformer

Для использования другой анимации, реализуйте интерфейс ViewPager.PageTransformer и поставьте его для ViewPager. Интерфейс предоставляет единственный метод transformPage(). В каждой точке перехода, этот метод вызывается однократно для каждой видимой страницы (как правило есть только одна видимая страница) и для соседних страниц. Например, если страница 3 видима и пользователь потащил экран к четвертой странице, метод transformPage() вызывается для двух страниц, для третей и четвертой, на каждом шаге жеста.

В вашей реализации метода transformPage(), вы можете создать собственную анимацию, определив, какие страницы должны быть преобразованы, основываясь на положении страниц на экране. Позиция передается в метод transformPage() в виде параметра position.

Параметр position показывает, где данная страница находится по отношению к центру экрана. Это динамическое свойство, которое меняется во время перелистывания страницы. Если страница заполняет экран, ее позиция равна 0. Если страница находится вблизи правой стороны экрана, ее позиция равна 1. Если пользователь на половине пути между двух страниц, первая имеет положение -0.5, а вторая 0.5. Взяв за основу позицию страницы на экране, вы можете создать собственную анимацию, установив свойства страниц с помощью методов setAlpha(), setTranslationX() или setScaleY().

После реализации интерфейса PageTransformer, вызовите метод setPageTransformer(), передав в нее объект вашего класса, чтобы применить собственную анимацию. Например, если вы назвали ваш класс ZoomOutPageTransformer, установить анимацию можно таким образом:

Трансформер Zoom-out

Этот трансформер сначала сжимает, а затем прячет страницу при прокрутке. Когда страница становится ближе к центру, она растет обратно до нормальных размеров.

Пример использования ZoomOutPageTransformer Щелкните по экрану, чтобы проиграть видео заново.

Трансформер с прозрачностью

Этот трансформер использует стандартную анимацию при прокрутке влево и анимацию с прозрачностью при прокрутке вправо.

Пример DepthPageTransformer Щелкните по экрану, чтобы проиграть видео заново.

Примечание: во время выполнения анимации с прозрачностью, стандартная анимация перелистывания еще имеет место быть, поэтому вы должны отключить анимацию перелистывания для отрицательного направления X. Например:

Следующий пример показывает как противодействовать стандартной анимации перелистывания в трансформере:

Добавить комментарий