Slide in right android

Анимация фрагментов

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

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

Разметка для активности:

Создадим разметки для фрагментов.

fragment1.xml

fragment2.xml

Отличия между фрагментами — фоновый цвет (красный и зелёный) и текст, по которым будет проще различать фрагменты.

Фрагмент должен иметь свой класс. Для примера достаточно простейшего кода, где нужно указать разметку фрагмента.

Fragment1.java

По такому же принципу создайте класс для второго фрагмента самостоятельно.

Теперь перейдём к коду для главной активности:

В коде я закомментировал две строчки для анимации. В таком виде переключение между фрагментами происходит стандартным способом без анимации. Теперь раскомментируйте первую строчку transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);. В классе FragmentTransaction есть несколько готовых анимаций. С помощью метода setTransition(int transit) мы можем указать нужную анимацию и увидеть её в действии.

• TRANSIT_FRAGMENT_CLOSE
• TRANSIT_FRAGMENT_OPEN
• TRANSIT_FRAGMENT_FADE
• TRANSIT_NONE

Снова закомментируйте строку и раскомментируйте вторую строку transaction.setCustomAnimations(R.animator.slide_in_left, R.animator.slide_in_right);. Метод setCustomAnimations() позволяет указать собственную анимацию. Методу передаются два параметра. Первый параметр описывает анимацию для фрагмента, который появляется, а второй — описывает анимацию для фрагмента, который убирается с экрана устройства. Метод следует вызывать до появления фрагментов, иначе анимация не будет применена.

С методом setCustomAnimations() нужно быть осторожным при работе с фрагментами из support-библиотеки. В одной из версий библиотеки разработчики из Гугла всё поломали и код перестал работать. Неизвестно когда починят. Поэтому используйте стандартные фрагменты.

Для анимации нужно создать XML-файлы в папке res/animator (её тоже нужно создать вручную).

slide_in_left.xml

slide_in_right.xml

Элементы визуальных эффектов задаются в теге objectAnimator. У атрибута propertyName указывается свойство фрагмента, которое мы будем изменять при анимации, valueType указывает тип изменяемого параметра. Атрибуты valueFrom и valueTo указывают диапазон изменения параметра, указанного в propertyName. Если параметр valueFrom не указан, то значение берётся равное текущему. В нашем случае valueFrom равен -1280, это означает, что движение фрагмента по оси y будет начинаться со значения -1280 и перемещение будет происходить пока значение y не станет равным 0 для верхнего левого угла нашего фрагмента в течении 1500 миллисекунд (атрибут duration).

Тег set служит для объединения эффектов либо их разделения. В файле slide_in_right.xml используется атрибут ordering со значением together, что означает проигрывать эффекты одновременно, в противовес ему существует значение sequentially, которое требует последовательного отображения эффектов в анимации.

Переворачиваем карту

Напишем ещё один пример для закрепления материала.

Найдите в интернете две картинки, например, изображения карты и её рубашки. Подготовим четыре файла в папке res/animator.

card_flip_left_enter.xml

card_flip_left_exit.xml

card_flip_right_enter.xml

card_flip_right_exit.xml

В файле res/values/strings.xml добавьте пару новых ресурсов.

Теперь создадим два макета для двух фрагментов в папке res/layout. Фрагменты будут содержать по одной картинке.

fragment_card_front.xml

fragment_card_back.xml

Создаём два класса для фрагментов, которые загружают свои макеты.

Упростим макет активности.

Осталось написать код. Ещё раз напомню, что используйте стандартные фрагменты, а не из библиотеки совместимости.

Контейнер обрабатывает касание пальца как щелчок и переворачивает фрагмент на другой. Результат в видео.

Источник

Kyle Banks

Related Posts

Animations, when used correctly, can be a simple way to enhance the user experience of your products, adding a little bit of fun that a motionless view just doesn’t have. Today I’ll be demonstrating how to add some basic left and right sliding animations to your Views and Activities on Android.

First, here’s a look at the animation we’ll be creating. As you can see, the activities slide in and out of view based on the navigation direction appropriate for the transition:

Defining the Animations

For our purposes, we’ll need four animations in total, and we’ll be defining them through XML. Of the four animations, there are really two groups. The first is to move a view from its current position to a position out of view, and the second is to bring a view in from out of view.

slide_to_left.xml:

Animates from the current position, all the way to the left and out of view.

slide_to_right.xml:

Animates from the current position, all the way to the right and out of view.

slide_from_left.xml:

Animates from out of view on the left, into view.

slide_from_right.xml:

Animates from out of view on the right, into view.

Each of the animations has a duration value of @integer/slide_animation_duration, which is defined in integers.xml like so:

This helps to keep consistency between all animations, and ensures that they all move at the same speed.

On a View

Animating a single View is straightforward, we just load the animation from the XML and apply it to the view:

I prefer to create a helper class for these groups of related animations, especially if they are going to be common within the application:

After this helper class is created, we can use it from anywhere in our application like so:

Between Activities

Just as easy is animating the transition between Activities. The Activity class provides us with a method called overridePendingTransition that we can use to set the animation of the exiting and entering Activities, like so:

Calling overridePendingTransition after the call to startActivity will ensure that the newly started Activity runs the enterAnimationId and the current Activity runs the exitAnimationId.

Using the animations we defined earlier, we can have the new Activity slide in from the right of the view, and the current Activity slide out of view to the left, like so:

Similarly, when the new Activity is finished, we can perform the reverse animation to have the finished Activity slide out of view to the right, and the previous Activity slide back into view from the left:

This gives a smooth transition back and forth between the Activities that may be preferable to you than the default Activity transition animation.

Keeping Consistency

In most of my applications I create a BaseActivity class that all my Activities extend, and put common functionality shared by all in there, such as logging and displaying fragments for example. Since I generally like to have all Activity transitions to be consistent throughout the app, I find this to be a perfect candidate for the BaseActivity:

You can also go so far as to override the startActivity and finish methods to directly call these two methods as well, so that your Activities never need to worry about calling them directly. Just be sure that you always call the super method, and to override all variations such as startActivityForResult.

Now you can be sure that if you decide to change your transition animations, you only have to update them in one place, and that all of your Activities are animating consistently.

Bonus: Handling the Back Button

Note that this isn’t applicable if you override the finish method, because finish will eventually be called anyways when the back button is pressed.

The animation when finishing your Activity above is great when you call finish directly, but what if the user clicks the device’s back button to finish the Activity? Simply override the onBackPressed method and add your transition:

Bonus: Animating Toolbar and TabLayout Background Colors

Another slick touch you can add your applications is animating the background color of your Toolbar and TabLayout!

Источник

Анимация фрагментов в Android

Всем доброго времени суток. Этот пост хочу посвятить теме фрагментов для Android. На Хабре есть уже переводы и некоторые статьи, которые упоминают о том, как начать работать с фрагментами под Android. Например, статья Fragments API в Android 3.0. В ней находится описание того, что такое фрагменты и в какой версии Android они доступны, поэтому те, кто ещё не добрался до неё могут при желании ознакомиться, я же не буду пересказывать этого в своём посте. Поэтому сразу перейду к делу.

Начало работы

Скажу только кратко, что фрагменты — это компоненты UI пользователя, которые могут использоваться с помощью класса Activity для отображение пользовательских данных, но их жизненный цикл от него не зависит. Функционал, которым наделены фрагменты имеет более широкий функционал для работы с ними, чем Activity, поэтому их использование для разработчиков имеет не малое значение, если они хотят, чтобы их приложение имело более современный по нынешним нормам интерфейс пользователя.

Теперь перейдём к сути поста. Разработчиками Google фрагменты были наделены, на мой взгляд, отличной поддержкой анимации отображения самого фрагмента. Об этом и пойдёт далее речь. Я искал по Хабру посты на данную тематику, но так ничего и не нашёл, поэтому сейчас поделюсь своими знаниями.

Создаём проект

Давайте создадим небольшой проект. Я создал проект под свой Samsung Nexus S, там у меня стоит версия Android 4.1.2, собственно её я и использовал (Api Level 16). Сам проект я назвал FragmentsAnimationTest.

Для демонстрации нам понадобится главное активити и его лейаут, пара фрагментов, каждый также со своим лейаутом и ещё пара xml-файлов для самой анимации, о которых я расскажу позже.

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

Сначала расположим элементы главного активити в файле activity_main.xml:

Из кода видно, что используется главный лейаут — RelativeLayout, достаточно удобный при работе с фрагментами, в него помещаются два стандартных элемента FrameLayout — собственно, он и будет являться контейнером для фрагментов и кнопка, которой будем переключать фрагменты между собой. Пока что всё должно быть предельно просто.

Дальше займёмся нашими фрагментами. Создадим для них разметки и сами классы:
fragment1.xml

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

В классах также должно быть всё понятно, если знакомы с темой фрагментов. В них просто указывается какой именно леаут будет использоваться при отображении конкретного фрагмента и всё.

Теперь приступим к самому вкусному. Поработаем с классом главной активити, вот её код:

Разберём что именно происходит в нашей активити. Сначала создаются оба фрагмента, которые, как уже говорилось, будут поочерёдно менять друг друга. Далее указываем строкой ft = getFragmentManager().beginTransaction() получаем FragmentTransaction, с помощью которой мы сможем взаимодействовать с нашими фрагментами, но это всё есть в статье, которую я указывал ранее. Прежде, чем перейти к разбору следующего кода, сделаю небольшое отступление.

Существует две возможности создавать анимацию для отображения фрагментов:

• 1ый способ — это подключение стандартной анимации с помощью метода setTransition(int transit). В классе FragmentTransaction есть несколько уже предописанных анимаций.
• 2ой способ — это именно то, что нас интересует в данной теме, реализация кастомной анимации. Осуществляется с помощью метода setCustomAnimations()

Теперь вернёмся к разбору нашего кода. Посмотрим на следующую строку ft.setCustomAnimations(R.animator.slide_in_left, R.animator.slide_in_right), тут происходит подключение анимации ко всем фрагментам, с которыми будет происходить работа до завершения транзакции, до строки ft.commit(). Что же именно происходит? В setCustomAnimations передаётся два параметра. Первый параметр описывает анимацию, для отображения фрагмента, который появляется, а второй — описывает анимацию для фрагмента, который сменяется, т.е. убирается с экрана устройства. Важно упомянуть, что данный метод следует вызвать до появления фрагментов, в противном случае, анимация не будет применена.

Пара сток-комментариев — это для того, чтобы можно было попробовать поиграться с предописанной анимацией, достаточно их раскомментировать и закомментировать предыдущую строку — ft.setCustomAnimations(R.animator.slide_in_left, R.animator.slide_in_right), в обоих случаях, хотя это и необязательно.

Давайте разберём код активити до конца и перейдём к созданию самой анимации.

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

Создаём анимацию

Перейдём к главной части нашей темы. Научимся создавать саму анимацию. Способ создания анимации здесь немного отличается от того, как мы привыкли это делать в ранних версиях Android. Реализация проходит следующим образом. Для на чала нужно создать папку animator в папке ресурсов приложения, это будет выглядеть так — res/animator/. Сюда мы должны положить xml-файлы, которые будут описывать как именно должна проигрываться анимация. Поместим их туда:
slide_in_left.xml

Теперь подробно их разберём. Элементы самих визуальных эффектов описываются в теге objectAnimator, каждый такой тег говорит об описании нового эффекта анимации. Теперь посмотрим на сами атрибуты. Первый атрибут в файле slide_in_left.xml — это interpolator, у него имеется несколько значений, о них можно более подробно узнать из документации Property Animation. Interpolator отвечает за то, чтобы отобразить определённым способом в течении определённого времени наш фрагмент. Далее у нас следует атрибут propertyName, в нём указывается с какое именно свойство фрагмента мы будем изменять при анимации, в нашем примере первым идёт y, а valueType указывает какого типа у нас именяемый параметр. В книге Pro Android 4 аргументируется эта ситуация тем, что если посмотреть на метод setX() в классе View, то станет понятно, что он принимает значение типа float, с методом setY() дело обстоит также, отсюда и значение floatType.

Далее идут не маловажные атрибуты valueFrom и valueTo, они указывают от какого до какого значания изменять значение указаннное в propertyName, в нашем первом случае это y. Если параметр valueFrom не указан, то значение берётся равное текущему. В нашем случае valueFrom равен -1280, это означает, что движение фрагмента по оси y будет начинаться со значения -1280, это значение было выбрано из-за того, что оно находится за пределами экрана устройства и перемещение будет происходить пока значение y не станет равным 0 для верхнего левого угла нашего фрагмента в течении 1500 миллисекунд. И, наконец, duration — атрибут указывает сколько именно будет длиться наш анимированный эффект в миллисекундах.

И последний нюанс, который я хочу описать. Глядя в какой-либо из файлов описания анимации, можно заметить тэг set, в который помещены все эффекты анимации, он служит для объединения эффектов либо их разделения. В файле slide_in_right.xml используется атрибут ordering в теге set, в нашем случае он имеет значение together, что означает проигрывать эффекты одновременно, в противовес ему существует значение sequentially, которое требует последовательного отображения эффектов в анимации, что очень удобно в некоторых случаях.

Собственно и всё. В файле slide_in_right.xml приведен пример как можно использовать другие свойства для анимирования, например alpha-канал. Надеюсь данная статья пригодится тем, кому не всё равно как будет выглядеть его приложение.

Как вы сами понимаете, уважаемые хабраюзеры, скрины не смогут отобразить результат работы.

Литература и источники, которые использовались при написании поста были упомянуты в ходе самой статьи.

Источник