Zaktualizuj aplikację, aby obsługiwać przyszłe gesty cofania

1. Wprowadzenie

W Androidzie 13 dodaliśmy interfejsy API, które stanowią podstawę przyszłej obsługi gestu przewidywanego przejścia wstecz.

Ta funkcja pozwoli użytkownikowi wyświetlić podgląd wyniku gestu przejścia wstecz, zanim go w pełni wykona. Dzięki temu będzie mógł zdecydować, czy pozostać na bieżącym ekranie, czy wykonać działanie i wrócić do ekranu głównego, poprzedniej aktywności lub wcześniej odwiedzonej strony w widoku WebView. Oto przykład:

Aby obsługiwać gest przewidywanego przejścia wstecz, w Androidzie 13 dodaliśmy nowy interfejs API platformy na poziomie okna OnBackInvokedCallback. Ten interfejs API zastępuje interfejs KeyEvent.KEYCODE_BACK i wszystkie klasy platformy, które używają OnBackPressed. Planujemy wycofać te interfejsy i klasy, a w następnej głównej wersji Androida po wersji 13 konieczna będzie migracja. Szczegółowe informacje znajdziesz w dokumentacji.

W tym ćwiczeniu naprawimy fragment ankiety, który implementuje WebView.

Cel tych ćwiczeń z programowania

Z tego ćwiczenia w Codelabs dowiesz się, jak przygotować aplikację AndroidX, która przechwytuje systemowy przycisk Wstecz, poprzez migrację, która umożliwi obsługę gestu przewidywanego przejścia wstecz w WebView. W tym celu użyjesz interfejsów API, które implementują model nawigacji wstecznej z wyprzedzeniem. Innymi słowy, aby nowe animacje działały, system musi z wyprzedzeniem wiedzieć, czy aplikacja przechwytuje gest nawigacji wstecz.

Co utworzysz

W tym laboratorium kodowania użyjesz bibliotek interfejsu AndroidX API do obsługi gestów Wstecz w aplikacji Sunflower.

Czego się nauczysz

• Jak przechwycić wywołanie wstecz w przypadku Androida X
• Jak przywrócić zdarzenie Wstecz w systemie
• Inne opcje obsługi gestów Wstecz
• Nowy interfejs użytkownika w Androidzie 13 i nowszych wersjach, który zapewnia nawigację przy użyciu gestu przewidywanego przejścia wstecz

Czego potrzebujesz

• Android Studio
• Urządzenie z Androidem z włączoną nawigacją przy użyciu gestów
• (Opcjonalnie) Git

2. Planowanie obsługi gestu przewidywanego przejścia wstecz

Gest przewidywanego przejścia wstecz jest automatycznie obsługiwany w przypadku aplikacji, które korzystają z domyślnego przechodzenia wstecz. Aby ją włączyć, wystarczy wyrazić zgodę na enableOnBackInvokedCallback, jak opisano w artykule Włączanie gestu przewidywanego przejścia wstecz.

Użyj interfejsów AndroidX API, aby wdrożyć tę funkcję.

Te warsztaty są przeznaczone dla aplikacji, które już korzystają z AndroidaX.

Aby obsługiwać przechodzenie wstecz, zaimplementujesz funkcje OnBackPressedDispatcher i OnBackPressedCallback.

Inne opcje

Mamy inne opcje obsługi tej funkcji, w zależności od różnych potrzeb Twojej aplikacji:

• W przypadku aplikacji, które nie mogą korzystać z AndroidX – jeśli to Twój przypadek, mamy dla Ciebie rozwiązanie. Używaj nowych klas platformy OnBackInvokedDispatcher i OnBackInvokedCallback, które wprowadzamy w Androidzie 13. Umożliwiają one korzystanie z interfejsów API wyprzedzających bez konieczności używania AndroidaX. Szczegóły znajdziesz w dokumentacji.
• W przypadku aplikacji, których nie można tymczasowo przenieść – jeśli to Twój przypadek, mamy dla Ciebie rozwiązanie. Możesz zrezygnować z gestu przewidywanego przejścia wstecz, jeśli nie możesz teraz przejść na biblioteki AndroidX ani interfejsy API platformy. Szczegóły znajdziesz w dokumentacji.

3. Zanim zaczniesz

Instalowanie Androida Studio

Zainstaluj Android Studio i pakiet SDK Androida 13.

Uzyskiwanie urządzenia

Aby uruchomić aplikację utworzoną w ramach tego kursu, możesz użyć wirtualnego lub fizycznego urządzenia z Androidem.

Włączanie nawigacji przy użyciu gestów

Jeśli uruchomisz nową instancję emulatora z poziomem interfejsu API 29, nawigacja gestami może nie być domyślnie włączona. Aby włączyć nawigację przy użyciu gestów, wybierz Ustawienia systemu > System > Nawigacja w systemie > Nawigacja przy użyciu gestów.

Pobierz kod

Kod możesz uzyskać na jeden z tych sposobów:

Pobierz plik ZIP

Pobierz plik ZIP (początek)

Pobieranie przez Git

Jeśli wolisz pobrać kod za pomocą Git, wykonaj te czynności:

1. Zainstaluj Git.
2. Sklonuj gałąź starter-code lub main, aby pobrać aplikację na potrzeby tego ćwiczenia:

Terminal.

// Get starter app.
git clone --branch starter-code \
https://github.com/android/codelab-handling-back-navigation.git

Uruchamianie aplikacji

Wykonaj te czynności:

1. Otwórz i skompiluj aplikację w Android Studio.
2. Utwórz nowe urządzenie wirtualne i wybierz Tiramisu. Możesz też podłączyć urządzenie fizyczne z interfejsem API na poziomie 33 lub wyższym.
3. Uruchom aplikację Sunflower.

Następnie określisz punkt odniesienia i przeanalizujesz problematyczną sytuację w aplikacji Sunflower.

4. Ustalenie wartości odniesienia

Punktem wyjścia jest aplikacja Sunflower, która zawiera ankietę wyświetlaną w komponencie WebView, który słabo obsługuje gesty wstecz. Gdy użytkownik przesuwa palcem od lewej lub prawej krawędzi, aby wrócić w widoku WebView, aplikacja przenosi go do poprzedniego fragmentu zamiast do poprzedniej strony, co powoduje utratę wszystkich nieprzesłanych danych.

Zobacz wersję demonstracyjną

Zacznijmy od ekranu głównego i przejdźmy przez główny proces w aplikacji, aby sprawdzić, jak działa funkcja WebView.

1. Na ekranie domyślnym aplikacji Sunflower kliknij LISTA ROŚLIN.

2. W katalogu roślin kliknij dowolną roślinę. (W tym przykładzie użyjemy awokado).

3. Na ekranie informacji o roślinie, którą klikniesz, kliknij ikonę kciuka w górę (w prawym górnym rogu), aby ocenić roślinę.

4. Zacznij wypełniać ankietę, ale zatrzymaj się na pytaniu nr 3.

5. Aby użyć gestu Wstecz, przesuń palcem od lewej (lub prawej) krawędzi ekranu do środka. Pamiętaj, że zamiast przenosić Cię do pytania nr 2 w ankiecie, przesunięcie palcem w lewo spowoduje przejście do fragmentu ze szczegółami rośliny (w tym przykładzie do strony z informacjami o awokado). Powoduje to utratę odpowiedzi i negatywnie wpływa na wygodę użytkowników.

Zacznijmy teraz rozwiązywać te problemy.

5. Włącz gest przewidywanego przejścia wstecz

Nasza aplikacja korzysta już z AndroidaX, więc będziesz używać interfejsów API przechodzenia wstecz. Te usługi obsługują już model wyprzedzający.

Docelowa wersja Androida 13

W projekcie Studio aplikacji zaktualizuj konfigurację kompilacji aplikacji, aby była kierowana na Androida 13, jak pokazano w tym fragmencie kodu.

build.gradle (projekt)

buildscript {
   ext {
       // Sdk and tools
       minSdkVersion = 29
       compileSdkVersion = 33
       targetSdkVersion = 33
   }
...
}

Uaktualnij zależności

W pliku build.gradle ustaw wartość appCompatVersion na 1.6.0 lub wyższą.

build.gradle (projekt)

buildscript {
   ext {

    // App dependencies
    appCompatVersion = '1.6.0-rc01' // Built original with changes

...
}

Zaktualizuj do AndroidX Activity 1.6.0 lub nowszej.

build.gradle (moduł)

dependencies {
    implementation "androidx.activity:activity-ktx:1.6.0"
    ...
}

Włącz gest przewidywanego przejścia wstecz

Aby włączyć interfejsy API gestu przewidywanego przejścia wstecz, ustaw w pliku manifestu wartość enableOnBackInvokedCallback na true.

AndroidManifest.xml

<application
   ...
   android:enableOnBackInvokedCallback="true" // Enables this feature.
   ... >
...
</application>

Deklarowanie i rejestrowanie OnBackPressedCallback do obsługi gestów Wstecz

Utwórz wywołanie zwrotne i zastąp metodę handleOnBackPressed, aby obsługiwać gesty Wstecz. W przypadku WebView użyjmy gestu Wstecz, aby wrócić do poprzednich stron, aż nie będzie już żadnych stron.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
  val onBackPressedCallback = object: OnBackPressedCallback(true) {
    override fun handleOnBackPressed() {
      when {
        webView.canGoBack() -> webView.goBack()
      }
    }
  }
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)
}

Wypróbuj to, co udało Ci się stworzyć

Teraz sprawdzisz, czy nawigacja w WebView działa prawidłowo.

1. W Android Studio ponownie skompiluj i uruchom aplikację.
2. Podobnie jak w przypadku pierwszej wersji demonstracyjnej kliknij wybraną roślinę, a potem ikonę „Lubię to”. Następnie wypełnij ankietę, aż dojdziesz do pytania nr 3.
3. Aby cofnąć się, przesuń palcem od lewej (lub prawej) krawędzi ekranu do środka. Widok WebView powinien przekierować Cię do pytania nr 2 w ankiecie.

To dokładnie takie zachowanie, jakiego oczekujemy. Jesteśmy jednak dopiero w połowie drogi – problem nie został jeszcze całkowicie rozwiązany. Zobaczmy, co to oznacza:

4. Od pytania 2 przesuń palcem z powrotem do pytania 1, a następnie przesuń palcem jeszcze raz, aby wrócić do fragmentu ze szczegółami rośliny.

Zwróć uwagę, że nie możesz wrócić z pytania 1 do fragmentu ze szczegółami rośliny. Dzieje się tak, ponieważ:

• Komponent WebView obsługuje przechodzenie wstecz, unikając opuszczania komponentu WebView podczas korzystania z przechodzenia wstecz.
• Gdy aplikacja nie potrzebuje już przechodzenia wstecz, musi je zwrócić do systemu. Aby to naprawić, przejdź do następnej sekcji.

6. Poprawianie gestu wstecz

W poprzednim kroku nasza aplikacja przechwyciła gest Wstecz, ale nie przekazała go do fragmentu z informacjami o roślinie. W efekcie użytkownicy nie mogą opuścić aplikacji i utknęli w komponencie WebView, co pogarsza ich wrażenia.

Włączanie i wyłączanie przechodzenia wstecz za pomocą OnBackPressedCallback

1. Zastąp metodę doUpdateVisitedHistory, aby określić, czy przechodzenie wstecz powinno zostać przechwycone. Logika obsługi przechodzenia wstecz jest następująca:
   • Jeśli w komponencie WebView jest więcej stron, do których można wrócić (webView.canGoBack()), należy włączyć metodę OnBackPressedCallback.
   • Jeśli w widoku WebView nie ma już stron, do których można wrócić, metoda OnBackPressedCallback powinna być wyłączona. W rezultacie gest Wstecz spowoduje powrót do fragmentu znajdującego się na samej górze stosu wstecznego.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  ...
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)

  disableOnBackPressedCallback(webView, onBackPressedCallback)
  }
}

private fun disableOnBackPressedCallback(webView: WebView, onBackPressedCallback: OnBackPressedCallback) {
  webView.webViewClient = object: WebViewClient() {
    override fun doUpdateVisitedHistory(view: WebView?, url: String?, isReload: Boolean) {
      // Disable the on-back press callback if there are no more questions in the
      // WebView to go back to, allowing us to exit the WebView and go back to
      // the fragment.
      onBackPressedCallback.isEnabled = webView.canGoBack()

    }
  }
}

2. Aby ponownie przetestować WebView, wypełnij ankietę jeszcze raz, aż dojdziesz do pytania nr 3.
3. Za pomocą gestów Wstecz wróć do widoku szczegółów rośliny. Nie powinno to sprawić Ci problemu.

Zwróć uwagę, że możemy teraz zamknąć WebView i wrócić do fragmentu ze szczegółami rośliny bez żadnych problemów.

Oto przykład, jak to wszystko powinno wyglądać po poprawieniu:

Wyświetlanie podglądu nowej animacji gestu powrotu do ekranu głównego

W przyszłych wersjach Androida zaczniesz korzystać z gestu przewidywanego przejścia wstecz, jak pokazano na poniższej animacji. Zdecydowanie zalecamy jak najszybsze wprowadzenie tych zmian.

Możesz wyświetlić podgląd nowej nawigacji przy użyciu gestów powrotu do ekranu głównego, włączając opcję dla programistów.

7. Gratulacje

Gratulacje! Obejmujesz wiele treści. Mamy nadzieję, że teraz lepiej rozumiesz opcje i interfejsy API, które pozwolą Ci zacząć aktualizować aplikację pod kątem gestu przewidywanego przejścia wstecz dostępnego w Androidzie.

Omówione zagadnienia

• Jak włączyć w aplikacji możliwość korzystania z interfejsów API obsługujących gest przewidywanego przejścia wstecz
• Jak przechwytywać wywołania wstecz w Androidzie X
• Jak przywrócić przechodzenie wstecz do systemu
• Inne opcje obsługi gestów Wstecz
• Nowy interfejs użytkownika w Androidzie 13, który zapewnia gest przewidywanego przejścia wstecz

Ukończone ćwiczenia z programowania

Pobierz plik ZIP (ukończono)

// Get completed app.
git clone --branch main \
https://github.com/android/codelab-handling-back-navigation.git

Dodatkowe materiały

• Przewodnik dla programistów

Dokumentacja

• OnBackPressedDispatcher i OnBackPressedCallback
• OnBackInvokedDispatcher i OnBackInvokedCallback