Przewidywane przejście wstecz w oknie tworzenia wiadomości

Gest przewidywanego przejścia wstecz to funkcja nawigacji za pomocą gestów, która pozwala użytkownikom wyświetlić podgląd miejsca, do którego doprowadzi ich przesunięcie wstecz. Funkcja przewidywania wstecz płynnie integruje się z Compose, aby ułatwić nawigację w aplikacji. Użytkownicy mogą płynnie i intuicyjnie wracać do poprzednich ekranów w aplikacji. Rysunek 1 przedstawia, jak to działa w przypadku przykładowej aplikacji SociaLite.

Z tego przewodnika dowiesz się, jak za pomocą funkcji przewidywania odzyskiwania hasła:

• Włączanie gestu przewidywanego przejścia wstecz
• Włączanie domyślnych animacji systemowych
• Włączanie przewidywanego przejścia wstecz za pomocą funkcji Nawigacja w edytorze
• Integracja z przejściami elementów współdzielonych
• Obsługa prognozowanego tekstu w komponentach Material Compose
• Ręczne uzyskiwanie dostępu do postępów w PredictiveBackHandler
• Testowanie animacji przewidywanego przejścia wstecz

Włączanie gestu przewidywanego przejścia wstecz

Aby włączyć animacje przewidywanego przejścia wstecz, musisz wyrazić zgodę na obsługę przewidywanego gestu. Aby to zrobić, dodaj ciąg „android:enableOnBackInvokedCallback="true” do tagu <application> lub do poszczególnych tagów <activity> w pliku AndroidManifest.xml.

Włączanie domyślnych animacji systemowych

Animacje systemowe dotyczące przejścia do ekranu głównego, przełączania aktywności i przełączania zadań są dostępne na urządzeniach z Androidem 15 lub nowszym w przypadku aplikacji, które zostały przeniesione do obsługiwanych interfejsów API do obsługi przejścia wstecz.

• Powrót do ekranu głównego: przenosi użytkownika na ekran główny.
• Przejścia między aktywnościami: przejścia między aktywnościami w aplikacji.
• Przejścia między zadaniami: przejścia między zadaniami.

Te animacje są domyślnie włączone na Androidzie 15 i nowszych. Na urządzeniach z Androidem 13 lub 14 użytkownicy mogą włączyć te opcje w Opcjach programisty.

Aby uzyskać animacje systemowe, zaktualizuj zależność AndroidX Activity do wersji 1.6.0 lub nowszej.

Włączanie przewidywanego przejścia wstecz za pomocą funkcji Nawigacja w edytorze

Aby korzystać z funkcji przewidywanego cofnięcia w komponencie Nawigacja, upewnij się, że używasz biblioteki navigation-compose 2.8.0 lub nowszej.

Nawigacja. Funkcja tworzenia automatycznie przechodzi między ekranami, gdy użytkownik przesunie palcem w lewo:

Podczas nawigacji możesz tworzyć niestandardowe przejścia za pomocą elementów popEnterTransition i popExitTransition. Te modyfikatory umożliwiają określenie sposobu animacji ekranów wejścia i wyjścia z poziomu NavHost. Możesz ich używać do tworzenia różnych efektów, takich jak skalowanie, zanikanie czy przesuwanie.

W tym przykładzie element scaleOut jest używany w elemencie popExitTransition, aby zmniejszyć rozmiar ekranu podczas przewijania w dół. Dodatkowo parametr transformOrigin określa punkt, wokół którego odbywa się animacja skalowania. Domyślnie jest to środek ekranu (0.5f, 0.5f). Możesz zmienić tę wartość, aby skalowanie było oparte o inny punkt.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

Ten kod daje taki wynik:

popEnterTransition i popExitTransition sterują animacjami podczas wyjmowania elementów ze stosu, na przykład za pomocą gestu wstecz. Możesz też użyć enterTransition i exitTransition, aby zdefiniować animacje wchodzenia i wychodzenia z komponentów, a nie tylko animacji przewidywanego cofnięcia. Jeśli ustawisz tylko enterTransition i exitTransition, będą one używane zarówno do zwykłej nawigacji, jak i do wyjmowania elementów ze stosu. Jednak dzięki elementom popEnterTransition i popExitTransition możesz tworzyć różne animacje przewijania w teście.

Integracja z przejściami elementów współdzielonych

Przejścia między elementami współdzielonymi zapewniają płynne połączenie wizualne między elementami składowymi z współdzielanymi treściami, które często służą do nawigacji.

Aby używać elementów wspólnych w komponowaniu nawigacji, zapoznaj się z artykułem Przewidywanie powrotów z elementami wspólnymi.

Obsługa prognozowanego tworzenia kopii zapasowej za pomocą komponentów Material Compose

Wiele komponentów w bibliotece Material Compose zostało zaprojektowanych tak, aby działały bezproblemowo z przewidywającymi gestami wstecz. Aby włączyć w tych komponentach przewidujące animacje cofnięcia, dodaj do projektu najnowszą zależność Material3 (androidx.compose.material3:material3-*:1.3.0 lub nowszą).

Komponenty Material Design, które obsługują animacje przewidywanego przejścia wstecz:

• SearchBar
• ModalBottomSheet
• ModalDrawerSheet/DismissibleDrawerSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

SearchBar i ModalBottomSheet animują się automatycznie za pomocą gestów przewidywanego przejścia wstecz. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet i DismissibleNavigationDrawer wymagają przekazania wartości drawerState do odpowiednich komponentów treści arkusza.

Ręczne uzyskiwanie dostępu do postępów za pomocą PredictiveBackHandler

Komponent PredictiveBackHandler[5] w Jetpack Compose umożliwia przechwycenie gestu wstecz i dostęp do jego postępów. Możesz reagować na gesty użytkownika w czasie rzeczywistym, tworząc niestandardowe animacje lub zachowania na podstawie tego, jak daleko użytkownik przesuwa palcem.

Aby korzystać z funkcji PredictiveBackHandler, musisz mieć zainstalowaną wersję androidx.activity:activity:1.6.0 lub nowszą.

PredictiveBackHandler udostępnia Flow<BackEventCompat>, który emituje zdarzenia reprezentujące postępy w wykonaniu gestu wstecz. Każde zdarzenie zawiera takie informacje jak:

• progress: wartość zmiennoprzecinkowa od 0 do 1 wskazująca postęp gestu wstecz (0 = gest rozpoczęty, 1 = gest zakończony).
• touchX i touchY: współrzędne X i Y zdarzenia dotyku.

Ten fragment kodu pokazuje podstawowe użycie funkcji PredictiveBackHandler:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

Przykład: integracja z panelem nawigacji

Ten przykład pokazuje, jak za pomocą PredictiveBackHandler wdrożyć niestandardową animację w aplikacji, aby zapewnić płynne działanie panelu nawigacyjnego w odpowiedzi na gesty wstecz w aplikacji JetLagged:

W tym przykładzie PredictiveBackHandler służy do:

• Śledź postępy gestu wstecz.
• Zaktualizuj translationX szuflady na podstawie postępu gestu.
• Użyj velocityTracker, aby płynnie otworzyć lub zamknąć szufladę w zależności od prędkości gestu, gdy gest zostanie zakończony lub anulowany.

Testowanie animacji przewidywanego przejścia wstecz

Jeśli nadal używasz Androida 13 lub Androida 14, możesz przetestować animację powrotu do ekranu głównego.

Aby przetestować tę animację, wykonaj te czynności:

1. Na urządzeniu wybierz Ustawienia > System > Opcje programisty.
2. Wybierz Animacje przewidywanego przejścia wstecz.
3. Uruchom zaktualizowaną aplikację i użyj gestu wstecz, aby zobaczyć, jak działa.

W Androidzie 15 i nowszych ta funkcja jest domyślnie włączona.

Dodatkowe materiały

• Ćwiczenie z programowania dotyczące dodawania animacji przewidywanego przejścia wstecz
• Zaawansowane animacje układu w Compose Video