Как да използвате Материални преходи в фрагментни транзакции

Моделите на дизайна на потребителския интерфейс на Android се промениха доста след пристигането на Material Design. Някога приложенията за Android бяха просто грозни, изоставайки по следите на дизайнерските решения на iOS. Нещата се промениха с Lollipop и Material Design, Android се превърна в свое нещо, вече не гледайки на конкуренцията. Материалните преходи играят голяма роля в тази промяна, но парадоксално те бяха представени за първи път в KitKat, малко преди Material Design да се разгърне напълно в Lollipop.

Намерението на тази статия е да покаже как да използваме Преходи в обхвата на фрагментните транзакции и по този начин създавайки смислени преходи, които подобряват UX на нашето приложение.

Обхват

Имаме тези 2 фрагмента:

Фрагмент 1Фрагмент 2

Fragment1 ще бъде на екрана, когато приложението стартира, а Fragment2 ще бъде зареден скоро след като не са необходими действия на потребителя. Тази фрагментна транзакция - по подразбиране - просто ще замести един фрагмент с другия, като приложим преход към тази FragmentTransaction можем да направим нашето приложение изящно да анимира тази промяна така:

Преход на фрагменти

Основи

  • Преходите от споделени елементи изискват Android SDK 21+, затова няма да разглеждаме решения за внедряване на Material Transitions преди Android 5.0.
  • Преходите ще имат обхвата на една Android активност.
  • Такава Android активност ще има единствено FrameLayout, който ще играе ролята на нашия контейнер за фрагменти.
  • Използваме няколко библиотеки в нашия проект, за да улесним живота си и да опростим нашия код, Butterknife за джаджите ни за оформление и retrolambda за използване на някои функции на Java8. Горещо ги препоръчваме и ги използваме във всички наши Android проекти.

Нашата дейност и нашите два фрагмента

Както нашата дейност, така и нашите 2 фрагмента са много прости. Това е нашата хостинг дейност:

Това ще бъдат нашите 2 фрагмента, и двата доста голи:

По-късно ще видим кода за използването на Преходи.

Разбиране на преходите

Следните понятия са ключови за разбирането на преходите:
· Сделки с фрагменти: ще зареждаме нашите Фрагменти, използвайки Транзакции, както е обичайно за използването на фрагменти, това не е обхватът на тази статия, те се използват, но не са обяснени подробно.
· Влезте / излезте от преходите.
· Преходи на споделени елементи.

Когато изпълняваме нашата транзакция с фрагмент, ще дефинираме Enter Transition за нашия нов фрагмент и Exit Transition за стария ни фрагмент. Всеки нов елемент, добавен към нашата дейност, ще следва Enter Transition, а елементите, които изчезват, ще използват Exit Transition.

Важно е да се разбере, че Enter / Exit Преходи се прилагат към самите фрагменти.

Споделените елементи са елементи, които съществуват и в двата фрагмента, участващи в транзакцията. Преходите от споделени елементи се прилагат към транзакцията с фрагменти.

синхронизиране

Ако погледнем нашия предварителен преглед на Прехода (началото на статията), ще видим, че 3 различни анимации са свързани с верига.

· Първо, текстът избледнява.
· След това логото се движи (и автоматично оразмерява).
· Последно, бутонът ни избледнява.

За да работи това, ще трябва да правим време анимациите си правилно. Текстът ще избледнее за времето, което сме задали на Изходния преход, което прилагаме към предварително заредения фрагмент.

Ходът, приложен към логото, забавя продължителността на предишния текст избледнява. На всичкото отгоре уточняваме продължителност на този ход и отчитаме тази продължителност за забавянето на изчезването на крайния бутон.

Споделени елементи в XML оформления

Още едно нещо е необходимо, за да функционира правилно целия процес. Нашите споделени елементи трябва да имат едно и също име на prehod в оформлението на фрагментите, участващи в Прехода. Това са фрагментите:

Забележете, че ImageView, който съдържа логото (единственият споделен елемент в прехода), има еднакво име на именуване и в двете оформления.

Кодът

Това е мястото, където Преходът всъщност се осъществява:

Всичко е доста направо, с изключение на продължителността / закъсненията за всяка конкретна анимация. Нека повторим тази част отново:

  1. Старите елементи изчезват с избледняване, което продължава 300 мс.
  2. Споделените елементи започват да се движат след 300мс и цялото движение отнема 1000мс.
  3. Новите елементи избледняват след 1300 мс и избледняват с продължителност 300 мс.

Какво постигнахме?

Ако изтеглите примерния проект и стартирате приложението, ще видите някои анимации на екрана на вашия смартфон, но ние направихме много повече тук, ние не анимираме неща, ние зареждаме нови фрагменти на екрана по безпроблемен начин. Ние създаваме смислени преходи между Fragments и подобряваме UX на нашето приложение.

Репозитория на проекта: https://github.com/Bynder/FragmentTransitionExample

PS: Преходите от активност са различен звяр, ако искате да постигнете Преход между фрагменти, принадлежащи към различни дейности, трябва да разгледате „Преходи на дейности“.