Ta strona została przetłumaczona przez Cloud Translation API.

Androidowa warunkowa nawigacja z logowaniem

To ćwiczenie programowania jest częścią kursu „Android dla zaawansowanych w Kotlinie”. Korzyści z tego kursu będą dla Ciebie najbardziej wartościowe, jeśli wykonasz je w sekwencjach ćwiczeń z programowania, ale nie jest to obowiązkowe. Wszystkie ćwiczenia z kursu są wymienione na stronie Zaawansowane ćwiczenia z programowania na Androida w Kotlin.

Ćwiczenia z programowania są oparte na implementacji logowania na urządzeniach z Androidem za pomocą Firebase. Kod startowy tego ćwiczenia możesz pobrać, jeśli nie masz jeszcze za sobą żadnych ćwiczeń z programowania. Jednak warto najpierw ukończyć ćwiczenie logowania na Androidzie za pomocą FirebaseUI.

Wstęp

Jeśli aplikacja obsługuje logowanie, typowym przypadkiem użycia jest zarezerwowanie tylko jej części dla zalogowanych użytkowników. Możesz na przykład zarezerwować ekran Ustawienia aplikacji dla zalogowanych użytkowników.

W takich przypadkach możesz użyć nawigacji warunkowej, aby wyświetlać użytkownikom odpowiedni ekran odpowiedni dla ich stanu uwierzytelniania.

W ramach tego ćwiczenia wykorzystasz istniejącą już aplikację i dodasz ekran ustawień, który będzie dostępny tylko dla zalogowanych użytkowników. Do tego zadania będziesz używać komponentów nawigacyjnych Androida.

Co musisz wiedzieć

Komponent Nawigacja w Androidzie i sposób jego wykorzystania w aplikacjach na Androida
Jak logowanie jest zaimplementowane w aplikacji na Androida przy użyciu biblioteki FirebaseUI. Jeśli nie znasz się na tym zagadnieniu, zapoznaj się z ćwiczeniami z programowania dotyczącymi implementacji logowania na Androidzie za pomocą FirebaseUI.

Czego się nauczysz

Jak wyświetlać użytkownikom odpowiedni ekran aplikacji w zależności od tego, czy są zalogowani czy nie.

Jakie zadania wykonasz:

Prawidłowa obsługa nawigacji po ekranie użytkownika.
Zablokuj użytkownikom dostęp do ekranu Ustawienia, gdy nie są zalogowani, i przekieruj ich na ekran Logowanie.

W poprzednim ćwiczeniu z programowania pracowałeś nad aplikacją, która wyświetla informacje o Androidzie. Aplikacja umożliwiała też użytkownikom logowanie się i wylogowywanie się. W ramach tych ćwiczeń dodasz ekran ustawień do istniejącej aplikacji. Ekran ustawień będzie dostępny tylko dla zalogowanego użytkownika.

Jeśli użytkownik nie jest zalogowany, aplikacja próbuje przekierować go na ekran ustawień. Po pomyślnym zakończeniu procesu logowania użytkownik wróci do ekranu ustawień, z którego próbował uzyskać dostęp.

To ćwiczenie z programowania wykorzystuje logowanie na Androidzie za pomocą FirebaseUI. Kod startowy tego ćwiczenia możesz pobrać, jeśli nie masz jeszcze za sobą żadnych ćwiczeń z programowania. Jednak warto najpierw ukończyć ćwiczenie logowania na Androidzie za pomocą FirebaseUI.

Pobierz przykładową aplikację:

Pobierz aplikację Zip

... lub skopiuj repozytorium GitHub z wiersza poleceń przy użyciu następującego polecenia i przejdź do gałęzi start repozytorium:

$  git clone https://github.com/googlecodelabs/android-kotlin-login-navigation

Po załadowaniu projektu w Android Studio:

Uruchom aplikację w emulatorze lub na urządzeniu fizycznym, aby sprawdzić, czy środowisko zostało skonfigurowane tak, by mogło się rozpocząć programowanie.

Jeśli wszystko się uda, powinien wyświetlić się ekran główny z ciekawą informacją o Androidzie oraz przyciskiem logowania w lewym górnym rogu.

Obecne funkcje aplikacji startowej:

Jeśli użytkownik nie jest zalogowany, kliknięcie przycisku Zaloguj się rozpoczyna proces logowania i umożliwia użytkownikowi zalogowanie się za pomocą adresu e-mail lub konta Google.
Jeśli użytkownik jest zalogowany, przycisk zmienia się na przycisk Wyloguj, który umożliwia użytkownikowi wylogowanie.

W tym zadaniu dodasz przycisk na ekranie głównym, który pozwoli użytkownikowi przejść do ekranu ustawień. Na ekranie ustawień użytkownik będzie mógł wybrać rodzaj zabawnych faktów wyświetlanych na ekranie głównym. Na ekranie ustawień mogą oni zobaczyć informacje o Androidzie lub dotyczące stanu Kalifornia.

Otwórz aplikację fragment_main.xml.
Na stronie fragment_main.xml, dodaj przycisk Settings (Ustawienia) umieszczony w ConstraintLayout i umieść go w prawym górnym rogu ekranu.

fragment_main.xml

<TextView
       android:id="@+id/settings_btn"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="@dimen/text_margin"
       android:background="@color/colorAccent"
       android:padding="10dp"
       android:text="@string/settings_btn"
       android:textColor="#ffffff"
       android:textSize="20sp"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"/>

Otwórz aplikację nav_graph.xml.
Dodaj działanie w aplikacji mainFragment. id działania to action_mainFragment_to_customizeFragment, a miejsce docelowe to customizeFragment.

nav_graph.xml

<fragment
       android:id="@+id/mainFragment"
       android:name="com.example.android.firebaseui_login_sample.MainFragment"
       android:label="MainFragment">
   <action
           android:id="@+id/action_mainFragment_to_settingsFragment"
           app:destination="@id/settingsFragment"/>
</fragment>

Otwórz aplikację MainFragment.kt.
W aplikacji onViewCreated() ustaw onClickListener na settings_btn, tak by po kliknięciu przycisku użytkownik przeszedł na stronę customizeFragment.

GłównyFragment.kt

binding.settingsBtn.setOnClickListener {
   val action = MainFragmentDirections.actionMainFragmentToSettingsFragment()
   findNavController().navigate(action)
}

Jeśli zauważysz nierozwiązane błędy, ponownie skompiluj aplikację w menu Build (Kompilacja), by wygenerować nowe działania nawigacyjne i korzystać z nich.
Uruchom ponownie aplikację. W prawym górnym rogu powinien być widoczny przycisk Ustawienia.
Kliknij przycisk, aby przejść na ekran Ustawienia. Na ekranie Settings (Ustawienia) można wybrać tylko jedną opcję, która pozwala użytkownikom wybrać rodzaj zabawnych informacji wyświetlanych na ekranie głównym.
Aby wrócić do ekranu głównego, kliknij przycisk Wstecz na urządzeniu z Androidem.

W tym zadaniu dodasz kod, który będzie kierował użytkownika na ekran logowania, gdy spróbuje uzyskać dostęp do ekranu ustawień, gdy nie jest zalogowany.

Otwórz aplikację SettingsFragment.kt.
W onViewCreated() zaobserwuj authenticationState i przekieruj użytkownika do LoginFragment, jeśli nie jest uwierzytelniony.

SettingsFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
   super.onViewCreated(view, savedInstanceState)
   val navController = findNavController()
   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> Log.i(TAG, "Authenticated")
           // If the user is not logged in, they should not be able to set any preferences,
           // so navigate them to the login fragment
           LoginViewModel.AuthenticationState.UNAUTHENTICATED -> navController.navigate(
               R.id.loginFragment
           )
           else -> Log.e(
               TAG, "New $authenticationState state that doesn't require any UI change"
           )
       }
   })
}

Jeśli aplikacja spróbuje otworzyć ekran logowania, musi ona otworzyć się na ekranie logowania, dlatego musi też obsługiwać przycisk Wstecz na ekranie logowania. Jeśli aplikacja nie dostosuje się do działania przycisku Wstecz, użytkownik utknie w nieskończonej pętli, próbując wrócić do ekranu ustawień, a potem ponownie przekierować go na ekran logowania.

Otwórz aplikację LoginFragment.kt.
W aplikacji onViewCreated() możesz zmienić działanie przycisku wstecz, wracając użytkownika z powrotem do MainFragment.

LoginFragment.kt

// If the user presses the back button, bring them back to the home screen
requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner) {
   navController.popBackStack(R.id.mainFragment, false)
}

Uruchom ponownie aplikację i potwierdź, że jeśli się nie zalogujesz, próba uzyskania dostępu do ekranu ustawień przekieruje Cię do ekranu logowania.

Mimo że użytkownik został przekierowany do logowania, nie udało Ci się wykonać tej czynności, gdy użytkownik się zaloguje. Próby zalogowania będą więc wyglądały tak, jakby nie działały. W następnym kroku naprawisz to.

Do tej pory udało Ci się skonfigurować aplikację tak, aby przekierowywała użytkownika do ekranu logowania, gdy spróbuje otworzyć ekran ustawień bez logowania się.

Jednak po przejściu procesu logowania nastąpi powrót do ekranu logowania. To nie jest wygodne dla użytkowników i może wprowadzać w błąd.

Aby zapewnić optymalną wygodę użytkowników, aplikacja powinna wyświetlić ekran ustawień po zalogowaniu się użytkownika.

Pozostając w miejscu LoginFragment.kt's w dowolnym miejscu w onViewCreated(), obserwuj authenticationState i po udanym uwierzytelnieniu wróć do SettingsFragment.

LoginFragment.kt

// Observe the authentication state so we can know if the user has logged in successfully.
// If the user has logged in successfully, bring them back to the settings screen.
// If the user did not log in successfully, display an error message.
viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
   when (authenticationState) {
      // Since our login flow is only one screen instead of multiple 
      // screens, we can utilize popBackStack(). If our login flow 
      // consisted of multiple screens, we would have to call 
      // popBackStack() multiple times.
       LoginViewModel.AuthenticationState.AUTHENTICATED -> navController.popBackStack()
       else -> Log.e(
           TAG,
           "Authentication state that doesn't require any UI change $authenticationState"
       )
   }
})

Ponownie uruchom aplikację i sprawdź, czy teraz logujesz się na stronie Settings (Ustawienia) zamiast na stronie Login (Logowanie).

Wyskakiwanie wstecz w stosach przez funkcję PopBackStack(): w miarę przechodzenia użytkownika przez aplikację Android śledzi, jakie ekrany odwiedzają. Gdy użytkownik naciśnie przycisk Wstecz, po kolei aplikacja wyświetli kolejne odwiedzone ekrany.

Usuwając ekran z tyłu, zazwyczaj informujesz Androida, aby pomijał ten ekran, gdy użytkownik naciśnie przycisk Wstecz.

W takim przypadku usuniesz bieżący ekran ze tylnego stosu, więc gdy użytkownik naciśnie przycisk Wstecz, aplikacja pominie ten ekran i wróci do ekranu odwiedzonego przez użytkownika przed odwiedzeniem tego ekranu.

Inaczej mówiąc, gdy użytkownik naciśnie przycisk Wstecz, nie wraca do ekranu logowania, ale zamiast tego pojawia się ekran odwiedzony przez użytkownika przed przejściem do ekranu logowania.

Z pełnym kodem aplikacji możesz zapoznać się w tym repozytorium repozytorium GitHub https://github.com/googlecodelabs/android-kotlin-login-Nawigacja.

Dzięki nim dowiesz się, jak zadbać o wygodę użytkowników aplikacji, która obsługuje logowanie. Obserwując stan uwierzytelniania aplikacji, można było określić, które ekrany użytkownika mają dostęp i w razie potrzeby przekierowywać ich na ekran logowania.

Więcej informacji o sprawdzonych metodach dotyczących nawigacji w Androidzie znajdziesz w tych materiałach:

Dokumentacja dla programistów Androida:

Ćwiczenia z programowania:

Android Kotlin: podstawy, określanie ścieżek nawigacji

Linki do innych ćwiczeń z programowania znajdziesz w kursie dotyczącym programowania na Androida dla zaawansowanych w Kotlin.