1. Wprowadzenie
Material Design to system do tworzenia odważnych i atrakcyjnych produktów cyfrowych. Łącząc styl, budowanie marki, interakcję i ruch w ramach spójnego zestawu zasad i komponentów, zespoły zajmujące się poszczególnymi produktami i usługami mogą w pełni wykorzystać swój potencjał projektowy.
Material Komponenty (MDC) pomagają deweloperom wdrażać interfejs Material Design. MDC, stworzona przez zespół inżynierów i projektantów UX w Google, zawiera dziesiątki pięknych i funkcjonalnych komponentów interfejsu. Jest dostępny na Androida, iOS, internet oraz Flutter.material.io/develop |
Czym jest system animacji Material Design na Androida?
System Material Motion na Androida to zbiór wzorców przejść w bibliotece MDC-Android, który może pomóc użytkownikom zrozumieć aplikację i poruszać się po niej, zgodnie z wytycznymi Material Design.
Oto 4 główne wzorce przejść z użyciem materiału:
- Przekształcenie kontenera: przejścia między elementami interfejsu, które zawierają kontener. tworzy widoczne połączenie między dwoma różnymi elementami interfejsu, płynnie przekształcając jeden element w drugi.
- Wspólna oś: przejścia między elementami interfejsu, które są powiązane przestrzenną lub nawigacyjną. korzysta z udostępnianego przekształcenia na osi x, y lub z, aby wzmocnić relacje między elementami.
- Przenikanie: przejścia między elementami interfejsu, które nie są ze sobą ściśle powiązane. używa sekwencyjnego zanikania i zanikania ze skalą elementu przychodzącego.
- Zanikanie: opcja używana w przypadku elementów interfejsu, które pojawiają się lub znikają na ekranie.
Biblioteka MDC-Android zawiera klasy przejść dla tych wzorców, utworzone na podstawie biblioteki AndroidX Migrate (androidx.transition) oraz Android Przenoszenie Framework (android.transition):
AndroidX
- Dostępne w pakiecie
com.google.android.material.transition - Obsługuje interfejs API poziomu 14 lub nowszego
- Obsługuje fragmenty i wyświetlenia, ale nie Aktywności ani Windowsa.
- Zawiera wycofane poprawki błędów i spójne działanie na różnych poziomach interfejsu API
Struktura
- Dostępne w pakiecie
com.google.android.material.transition.platform - Obsługuje interfejs API poziomu 21 lub nowszego
- Obsługuje fragmenty, widoki, aktywności i okna
- Poprawki błędów nie zostały przeniesione i mogą różnić się w zależności od poziomu interfejsu API
W tym ćwiczeniu w Codelabs będziesz używać przejścia Material Design, które są oparte na bibliotece AndroidaX. Oznacza to, że skupisz się głównie na fragmentach i widokach danych.
Co utworzysz
Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak tworzyć przejścia z przykładowej aplikacji e-mail na Androida o nazwie Reply z użyciem Kotlin. Pokażemy Ci, jak korzystać z przejścia z biblioteki MDC-Android do dostosowania wyglądu i sposobu działania aplikacji.
Otrzymasz kod startowy aplikacji Reply, a Ty wykorzystasz w niej te przejścia Material Design, które możesz zobaczyć w tym GIF-ie z ukończonego ćwiczenia w Codelabs:
- Przejście ze przekształcenia kontenera ze strony listy e-mailowej na stronę z informacjami o e-mailu
- Przejście ze Przekształcenia kontenera ze strony typu FAB na stronę tworzenia e-maila
- Wspólna oś Z – przejście z ikony wyszukiwania na stronę widoku wyszukiwania
- Przejście zanikanie przez strony skrzynki pocztowej
- Przejście z przekształcenia kontenera z elementu adresu e-mail na widok karty
Czego potrzebujesz
- Podstawowa wiedza o programowaniu na Androida i Kotlin
- Android Studio (pobierz tę aplikację stąd, jeśli jeszcze jej nie masz)
- Emulator Androida lub urządzenie (dostępne w Android Studio).
- Przykładowy kod (patrz następny krok)
Jak oceniasz swój poziom doświadczenia w tworzeniu aplikacji na Androida?
2. Konfigurowanie środowiska programistycznego
Uruchamianie Androida Studio
Gdy otworzysz Android Studio, powinno wyświetlić się okno „Welcome to Android Studio”. Jeśli jednak uruchamiasz Androida Studio po raz pierwszy, wykonaj czynności opisane w kreatorze konfiguracji Android Studio, używając wartości domyślnych. Pobranie i zainstalowanie niezbędnych plików może potrwać kilka minut, więc w każdej sekcji możesz pozostawić je uruchomione w tle.
Opcja 1. Sklonowanie z GitHuba aplikacji startowej z programowania
Aby skopiować to ćwiczenie z programowania z GitHuba, uruchom te polecenia:
git clone https://github.com/material-components/material-components-android-motion-codelab.git cd material-components-android-motion-codelab
Opcja 2. Pobierz plik ZIP aplikacji startowej z programowania
Aplikacja startowa znajduje się w katalogu material-components-android-motion-codelab-develop.
Wczytywanie kodu startowego w Android Studio
- Gdy kreator zakończy konfigurację i wyświetli się okno Witamy w Android Studio, kliknij Otwórz istniejący projekt Android Studio.
- Przejdź do katalogu, w którym został zainstalowany przykładowy kod, i wybierz katalog przykładowy, aby otworzyć projekt.
- Poczekaj, aż Android Studio skompiluje i zsynchronizuje projekt, zgodnie ze wskaźnikami aktywności u dołu okna Android Studio.
- W tym momencie Android Studio może zgłaszać błędy kompilacji, ponieważ brakuje w nim pakietu Android SDK lub narzędzi do kompilacji, takich jak ten poniżej. Postępuj zgodnie z instrukcjami w Android Studio, aby zainstalować lub zaktualizować te aplikacje i zsynchronizować projekt. Jeśli nadal masz problemy, postępuj zgodnie z instrukcjami podanymi w przewodniku dotyczącym aktualizowania narzędzi za pomocą Menedżera SDK.
Sprawdzanie zależności projektu
Projekt wymaga zależności od biblioteki MDC-Android. Ta zależność powinna już być widoczna w pobranym przykładowym kodzie, ale przyjrzyjmy się konfiguracji, aby się upewnić.
Przejdź do pliku build.gradle modułu app i upewnij się, że blok dependencies zawiera zależność od MDC-Android:
implementation 'com.google.android.material:material:1.2.0'
Uruchamianie aplikacji startowej
- Upewnij się, że konfiguracja kompilacji po lewej stronie wybranego urządzenia to
app. - Aby skompilować i uruchomić aplikację, naciśnij zielony przycisk Uruchom / Graj.
- Jeśli masz już urządzenie z Androidem na liście dostępnych urządzeń, w oknie Wybierz cel wdrożenia przejdź do kroku 8. W przeciwnym razie kliknij Create New Virtual Device (Utwórz nowe urządzenie wirtualne).
- Na ekranie Wybierz sprzęt wybierz telefon, na przykład Pixel 3, i kliknij Dalej.
- Na ekranie Obraz systemu wybierz najnowszą wersję Androida, najlepiej najwyższy poziom interfejsu API. Jeśli aplikacja nie jest zainstalowana, kliknij widoczny link Pobierz i dokończ pobieranie.
- Kliknij Dalej.
- Na ekranie Urządzenie wirtualne z Androidem (AVD) pozostaw ustawienia bez zmian i kliknij Zakończ.
- W oknie docelowym wdrożenia wybierz urządzenie z Androidem.
- Kliknij OK.
- Android Studio kompiluje aplikację, wdraża ją i automatycznie otwiera na urządzeniu docelowym.
Gotowe! Kod startowy strony głównej Reply powinien być uruchomiony w Twoim emulatorze. Powinna wyświetlić się skrzynka odbiorcza z listą e-maili.
Opcjonalnie: spowalnianie animacji na urządzeniu
Ponieważ ćwiczenie w Codelabs wymaga szybkich, ale dopracowanych przejść, warto spowolnić animacje na urządzeniu, aby zobaczyć najdrobniejsze szczegóły przejść. Można to zrobić za pomocą poleceń powłoki adb lub kafelka Szybkich ustawień. Pamiętaj, że te metody spowalniania animacji mają też wpływ na animacje na urządzeniu poza aplikacją Reply.
Metoda 1. Polecenia powłoki ADB
Aby 10-krotnie spowolnić animacje na urządzeniu, możesz uruchomić te polecenia w wierszu poleceń:
adb shell settings put global window_animation_scale 10
adb shell settings put global transition_animation_scale 10
adb shell settings put global animator_duration_scale 10
Aby przywrócić normalne działanie animacji na urządzeniu, uruchom te polecenia:
adb shell settings put global window_animation_scale 1
adb shell settings put global transition_animation_scale 1
adb shell settings put global animator_duration_scale 1
Metoda 2. Kafelek Szybkich ustawień
Aby skonfigurować kafelek Szybkich ustawień, możesz też najpierw włączyć na urządzeniu ustawienia programisty:
- Otwórz „Ustawienia” urządzenia. aplikacja
- Przewiń w dół i kliknij „Informacje o emulowanym urządzeniu”.
- Przewiń w dół i szybko kliknij „Numer kompilacji”. dopóki nie włączysz ustawień programisty
Następnie wykonaj te czynności, wciąż w „Ustawieniach” urządzenia. , aby włączyć kafelek Szybkich ustawień:
- Kliknij ikonę wyszukiwania lub pasek wyszukiwania u góry ekranu.
- Wpisz „kafelki” w polu wyszukiwania
- Kliknij „kafelki Szybkich ustawień dla dewelopera”. wiersz
- Kliknij „Skala animacji okna”. Przełącz
Na koniec podczas ćwiczenia w programowaniu wysuń obszar powiadomień systemowych z góry ekranu i za pomocą ikony 
przełącz się między animacjami o niskiej i normalnej szybkości.
3. Zapoznaj się z kodem przykładowej aplikacji
Spójrzmy na kod. Opublikowaliśmy aplikację, która wykorzystuje bibliotekę Jetpack Navigation komponentu do przechodzenia między kilkoma różnymi fragmentami kodu w ramach jednej aktywności MainActivity:
- HomeFragment: wyświetla listę adresów e-mail.
- EmailFragment: pojedynczy, pełny e-mail;
- ComposeFragment: umożliwia tworzenie nowego e-maila.
- SearchFragment: wyświetla widok wyszukiwania.
navigation_graph.xml
Aby dowiedzieć się, jak skonfigurowano wykres nawigacji w aplikacji, otwórz plik navigation_graph.xml w katalogu app -> src -> main -> res -> navigation:
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/navigation_graph"
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name="com.materialstudies.reply.ui.home.HomeFragment"
android:label="HomeFragment">
<argument...>
<action
android:id="@+id/action_homeFragment_to_emailFragment"
app:destination="@id/emailFragment" />
</fragment>
<fragment
android:id="@+id/emailFragment"
android:name="com.materialstudies.reply.ui.email.EmailFragment"
android:label="EmailFragment">
<argument...>
</fragment>
<fragment
android:id="@+id/composeFragment"
android:name="com.materialstudies.reply.ui.compose.ComposeFragment"
android:label="ComposeFragment">
<argument...>
</fragment>
<fragment
android:id="@+id/searchFragment"
android:name="com.materialstudies.reply.ui.search.SearchFragment"
android:label="SearchFragment" />
<action
android:id="@+id/action_global_homeFragment"
app:destination="@+id/homeFragment"
app:launchSingleTop="true"
app:popUpTo="@+id/navigation_graph"
app:popUpToInclusive="true"/>
<action
android:id="@+id/action_global_composeFragment"
app:destination="@+id/composeFragment" />
<action
android:id="@+id/action_global_searchFragment"
app:destination="@+id/searchFragment" />
</navigation>
Zwróć uwagę na to, że obecne są wszystkie wymienione powyżej fragmenty, a domyślny fragment uruchamiania jest ustawiony na HomeFragment w app:startDestination="@id/homeFragment". Ta definicja XML wykresu docelowego fragmentu, jak również działania, zawiera informacje dla wygenerowanego kodu nawigacyjnego Kotlin, który napotkasz podczas podłączania przejść.
activity_main.xml
Następnie przyjrzyj się układowi activity_main.xml w katalogu app -> src -> main -> res -> layout. Zobaczysz sekcję NavHostFragment skonfigurowaną za pomocą powyższego wykresu nawigacyjnego:
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="@navigation/navigation_graph"/>
Ten element NavHostFragment wypełnia ekran i obsługuje wszystkie zmiany dotyczące pełnoekranowej nawigacji po fragmentach w aplikacji. Komponent BottomAppBar i jego zakotwiczone FloatingActionButton (również w języku: activity_main.xml) są układane nad bieżącym fragmentem wyświetlanym przez interfejs NavHostFragment i dlatego będą wyświetlane lub ukryte w zależności od miejsca docelowego fragmentu w przykładowym kodzie aplikacji.
Dodatkowo BottomNavDrawerFragment w usłudze activity_main.xml to dolna szuflada zawierająca menu umożliwiające przełączanie się między różnymi skrzynkami pocztowymi. Jest ono warunkowo wyświetlane przy użyciu przycisku logo odpowiedzi BottomAppBar.
MainActivity.kt
Aby zobaczyć przykładowe działanie nawigacji, otwórz plik MainActivity.kt w katalogu app -> src -> main -> java -> com.materialstudies.reply.ui. Znajdź funkcję navigateToSearch(). Powinna wyglądać tak:
private fun navigateToSearch() {
val directions = SearchFragmentDirections.actionGlobalSearchFragment()
findNavController(R.id.nav_host_fragment).navigate(directions)
}
Tutaj możesz zobaczyć, jak możesz przejść do strony widoku wyszukiwania bez niestandardowych przejść. Podczas tego ćwiczenia w programie zagłębisz się w MainActivity w Reply, i omówisz 4 główne fragmenty, aby skonfigurować przejścia w materiałach, które będą współpracowały z różnymi działaniami nawigacyjnymi w aplikacji.
Teraz, gdy znasz już kod startowy, zaimplementujmy pierwsze przejście.
4. Dodaj przejście z listy e-mailowej na stronę z informacjami o e-mailu w ramach transformacji kontenera
Najpierw musisz dodać przejście po kliknięciu e-maila. Na potrzeby tej zmiany nawigacji dobrze sprawdza się wzorzec przekształcenia kontenera, ponieważ służy do przejść między elementami interfejsu, które zawierają kontener. Ten wzorzec tworzy widoczne połączenie między 2 elementami interfejsu.
Zanim dodasz kod, uruchom aplikację Reply i kliknij e-maila. Powinien wykonać proste cięcie skokowe, co oznacza, że ekran będzie zastępowany brakiem przejścia:
Zacznij od dodania atrybutu transitionName do elementu MaterialCardView w pliku email_item_layout.xml, jak w tym fragmencie:
email_item_layout.xml
android:transitionName="@{@string/email_card_transition_name(email.id)}"
Nazwa przejścia przyjmuje zasób ciągu znaków z parametrem. Musisz użyć identyfikatora każdego adresu e-mail, aby mieć pewność, że każdy transitionName w naszym EmailFragment jest unikalny.
Masz już ustawioną nazwę przejścia elementu listy e-mailowej, więc zróbmy to samo w układzie szczegółów e-maila. W narzędziu fragment_email.xml ustaw transitionName obiektu MaterialCardView na ten zasób ciągu znaków:
fragment_email.xml
android:transitionName="@string/email_card_detail_transition_name"
W usłudze HomeFragment.kt zastąp kod w polu onEmailClicked poniższym fragmentem, aby utworzyć mapowanie z widoku początkowego (elementu listy e-mailowej) i widoku końcowego (ekranu z informacjami e-mail):
HomeFragment.kt
val emailCardDetailTransitionName = getString(R.string.email_card_detail_transition_name)
val extras = FragmentNavigatorExtras(cardView to emailCardDetailTransitionName)
val directions = HomeFragmentDirections.actionHomeFragmentToEmailFragment(email.id)
findNavController().navigate(directions, extras)
Po skonfigurowaniu instalacji hydraulicznej możesz utworzyć przekształcenie kontenera. W metodzie EmailFragment onCreate ustaw sharedElementEnterTransition na nowe wystąpienie MaterialContainerTransform (importując wersję com.google.android.material.transition zamiast com.google.android.material.transition.platform), dodając ten fragment kodu:
EmailFragment.kt
sharedElementEnterTransition = MaterialContainerTransform().apply {
drawingViewId = R.id.nav_host_fragment
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
scrimColor = Color.TRANSPARENT
setAllContainerColors(requireContext().themeColor(R.attr.colorSurface))
}
Teraz spróbuj ponownie uruchomić aplikację.
Wszystko zaczyna się wyświetlać. Gdy klikniesz e-maila na liście e-maili, przekształcenie kontenera powinno rozwinąć element listy do pełnoekranowej strony z informacjami. Pamiętaj jednak, że naciśnięcie Wstecz nie powoduje zwijania e-maila z powrotem na listę. Dodatkowo lista e-mailowa znika natychmiast na początku przejścia i ma szare tło okna. To jeszcze nie koniec.
Aby poprawić przejście powrotne, dodaj do metody onViewCreated w elemencie HomeFragment.kt te 2 wiersze:
HomeFragment.kt
postponeEnterTransition()
view.doOnPreDraw { startPostponedEnterTransition() }
Spróbuj ponownie uruchomić aplikację. Po otwarciu e-maila naciśnięcie przycisku Wstecz spowoduje zwinięcie go z powrotem na listę. Super! Ulepszamy animację.
Problem z listą e-mailową wynika z tego, że podczas przechodzenia do nowego fragmentu przy użyciu komponentu nawigacji obecny fragment jest natychmiast usuwany i zastępowany nowym, przychodzącym fragmentem. Aby lista e-mailowa była widoczna nawet po zastąpieniu, możesz dodać przejście wyjściowe do HomeFragment.
Dodaj poniższy fragment kodu do metody HomeFragment onEmailClicked, aby lista adresów e-mail była subtelnie skalowana w poziomie przy wychodzeniu i z powrotem przy otwieraniu:
HomeFragment.kt
exitTransition = MaterialElevationScale(false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialElevationScale(true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
Aby przejście MaterialElevationScale zostało zastosowane do całego ekranu głównego, a nie do poszczególnych widoków w hierarchii, oznacz RecyclerView w elemencie fragment_home.xml jako grupę przejścia.
fragment_home.xml
android:transitionGroup="true"
Na tym etapie powinno być w pełni działające przekształcenie kontenera. Kliknięcie e-maila powoduje rozwinięcie pozycji na liście do ekranu szczegółów, a jednocześnie cofanie się listy. Naciśnięcie przycisku wstecz zwija ekran ze szczegółami e-maila z powrotem do elementu listy i skaluje go w górę na liście e-maili.
5. Dodaj przejście przekształcenia kontenera ze strony typu FAB na stronę tworzenia e-maila
Wróćmy do przekształcenia kontenera i dodamy przejście z pływającego przycisku polecenia do elementu ComposeFragment, rozwijając przycisk PPP do nowego e-maila do napisania przez użytkownika. Najpierw uruchom aplikację ponownie i kliknij przycisk FAB, aby zobaczyć, że po uruchomieniu ekranu tworzenia e-maila nie ma żadnego przejścia.
Mimo że używamy tej samej klasy przejścia, sposób skonfigurowania tej instancji będzie inny, ponieważ nasz przycisk PPP znajduje się w regionie MainActivity, a element ComposeFragment znajduje się wewnątrz kontenera hosta nawigacji MainActivity.
W narzędziu ComposeFragment.kt dodaj poniższy fragment kodu do metody onViewCreated, pamiętając, aby zaimportować wersję androidx.transition metody Slide.
ComposeFragment.kt
enterTransition = MaterialContainerTransform().apply {
startView = requireActivity().findViewById(R.id.fab)
endView = emailCardView
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
scrimColor = Color.TRANSPARENT
containerColor = requireContext().themeColor(R.attr.colorSurface)
startContainerColor = requireContext().themeColor(R.attr.colorSecondary)
endContainerColor = requireContext().themeColor(R.attr.colorSurface)
}
returnTransition = Slide().apply {
duration = resources.getInteger(R.integer.reply_motion_duration_medium).toLong()
addTarget(R.id.email_card_view)
}
Oprócz parametrów używanych do konfigurowania poprzedniego przekształcenia kontenera parametry startView i endView ustawiane są tu ręcznie. Zamiast używać atrybutów transitionName, które informują system Android Migrate, które widoki należy przekształcić, możesz w razie potrzeby określić je ręcznie.
Teraz uruchom aplikację ponownie. Przycisk PPP powinien pojawić się na ekranie tworzenia (zobacz GIF na końcu tego kroku).
Podobnie jak w poprzednim kroku, musisz dodać przejście do elementu HomeFragment, aby nie znikało po usunięciu i zastąpieniu elementem ComposeFragment.
Skopiuj poniższy fragment kodu do metody navigateToCompose w MainActivity przed wywołaniem NavController navigate.
MainActivity.kt
currentNavigationFragment?.apply {
exitTransition = MaterialElevationScale(false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialElevationScale(true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
}
To wszystko na dziś. Powinno nastąpić przejście z przycisku PPP do ekranu tworzenia wiadomości, który będzie podobny do tego:
6. Dodaj przejście z ikony wyszukiwania na stronę widoku wyszukiwania na wspólnej osi Z
W tym kroku dodamy przejście z ikony wyszukiwania do widoku wyszukiwania na pełnym ekranie. Ponieważ zmiana nawigacji nie wymaga trwałego kontenera, możemy użyć przejścia we wspólnej osi Z, aby wzmocnić relację przestrzenną między dwoma ekranami i wskazać przesunięcie o jeden poziom wyżej w hierarchii aplikacji.
Zanim dodasz kolejny kod, uruchom aplikację i kliknij ikonę wyszukiwania w prawym dolnym rogu ekranu. Powinno to spowodować wyświetlenie ekranu wyszukiwania bez żadnego przejścia.
Aby rozpocząć, znajdź metodę navigateToSearch w narzędziu MainActivity i dodaj ten fragment kodu przed wywołaniem metody NavController navigate, aby skonfigurować wyjście bieżącego fragmentu i ponownie wprowadzić MaterialSharedAxis przejścia na osi Z.
MainActivity.kt
currentNavigationFragment?.apply {
exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
}
Następnie dodaj poniższy fragment kodu do metody onCreate w SearchFragment, która konfiguruje przejścia typu „Enter” i „MaterialSharedAxis”.
SearchFragment.kt
enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
Aby przejście MaterialSharedAxis zostało zastosowane do całego ekranu wyszukiwania, a nie do poszczególnych widoków w hierarchii, oznacz LinearLayout w elemencie fragment_search.xml jako grupę przejścia.
fragment_search.xml
android:transitionGroup="true"
Znakomicie. Teraz uruchom aplikację jeszcze raz i dotknij ikony wyszukiwania. Ekrany głównego i widoku wyszukiwania powinny jednocześnie zanikać i skalować dokładnie wzdłuż osi Z, tworząc płynny efekt między obydwoma ekranami.
7. Dodawanie przejścia między stronami skrzynki pocztowej
W tym kroku dodamy przejście między różnymi skrzynkami pocztowymi. Ponieważ nie chcemy podkreślać relacji przestrzennej ani hierarchicznej, do przeprowadzenia prostej „zmiany” użyjemy zanikania. między listami adresów e-mail.
Zanim dodasz kolejny kod, uruchom aplikację, dotknij logo Odpowiedz na dolnym pasku aplikacji i zmień skrzynki pocztowe. Lista adresów e-mail powinna się zmienić bez konieczności przenoszenia.
Na początek znajdź metodę navigateToHome w narzędziu MainActivity i dodaj ten fragment kodu przed wywołaniem metody NavController navigate w celu skonfigurowania przejścia MaterialFadeThrough bieżącego fragmentu.
MainActivity.kt
currentNavigationFragment?.apply {
exitTransition = MaterialFadeThrough().apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
}
Następnie otwórz HomeFragment. W narzędziu onCreate ustaw dla parametru enterTransition fragmentu nowe wystąpienie MaterialFadeThrough.
HomeFragment.kt
enterTransition = MaterialFadeThrough().apply {
duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
Uruchom aplikację ponownie. Po otwarciu dolnego panelu nawigacji i zmianie skrzynek pocztowych bieżąca lista e-maili powinna zanikać i skalować w poziomie, a nowa lista zanika i skaluje się. Super!
8. Dodaj przejście z elementu z adresem e-mail na widok karty w ramach przekształcenia kontenera
W tym kroku dodasz przejście, które przekształci element w wyskakującą kartę. Używane jest tu przekształcenie kontenera, aby poinformować użytkownika, że działanie wykonane w wyskakującym okienku wpłynie na element, z którego pochodzi ono.
Zanim dodasz kod, uruchom aplikację Reply, kliknij e-maila i kliknij „Odpowiedz”. kliknij przycisk typu FAB, a potem kliknij element kontaktu odbiorcy. Element powinien od razu zniknąć, a karta z adresami e-mail kontaktu powinna pojawić się bez animacji.
W tym kroku będziesz pracować w domenie ComposeFragment. Do układu ComposeFragment dodano już elementy odbiorcy (domyślnie widoczne) oraz kartę odbiorcy (domyślnie niewidoczną). Element odbiorcy i ta karta to 2 widoki, między którymi utworzysz przekształcenie kontenera.
Aby rozpocząć, otwórz ComposeFragment i znajdź metodę expandChip. Ta metoda jest wywoływana po kliknięciu podanego chip. Dodaj ten fragment kodu nad wierszami, które zamienią widoczność recipientCardView i chip. Spowoduje to uruchomienie przekształcenia kontenera zarejestrowanego przez beginDelayedTransition.
ComposeFragment.kt
val transform = MaterialContainerTransform().apply {
startView = chip
endView = binding.recipientCardView
scrimColor = Color.TRANSPARENT
endElevation = requireContext().resources.getDimension(
R.dimen.email_recipient_card_popup_elevation_compat
)
addTarget(binding.recipientCardView)
}
TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)
Jeśli uruchomisz aplikację teraz, element powinien przekształcić się w kartę z adresami e-mail odbiorcy. Teraz skonfigurujemy przejście powrotne, aby zwinąć kartę z powrotem do elementu.
W metodzie collapseChip w ComposeFragment dodaj poniższy fragment kodu, aby zwinąć kartę z powrotem do elementu.
ComposeFragment.kt
val transform = MaterialContainerTransform().apply {
startView = binding.recipientCardView
endView = chip
scrimColor = Color.TRANSPARENT
startElevation = requireContext().resources.getDimension(
R.dimen.email_recipient_card_popup_elevation_compat
)
addTarget(chip)
}
TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)
Uruchom aplikację ponownie. Kliknięcie elementu powinno rozwinąć element na kartę, a kliknięcie karty spowoduje zwinięcie karty z powrotem do elementu. Super!
9. Wszystko gotowe
Biblioteka MDC-Android, wykorzystująca mniej niż 100 wierszy kodu Kotlin i kilka podstawowych znaczników XML, pomogła stworzyć piękną przejścia w dotychczasowej aplikacji, która jest zgodna z wytycznymi Material Design, a także wygląda i działa spójnie na wszystkich urządzeniach z Androidem.
Dalsze kroki
Aby dowiedzieć się więcej o systemie Material Motion, zapoznaj się ze specyfikacją i pełną dokumentacją dla programistów oraz spróbuj dodać do swojej aplikacji przejścia w stylu Material.
Dziękujemy za wypróbowanie ruchu Material Design. Mamy nadzieję, że to ćwiczenie z programowania Ci się podobało.