Условная навигация Android с логином

Эта кодовая лаборатория является частью курса Advanced Android in Kotlin. Вы получите максимальную отдачу от этого курса, если будете последовательно работать с лабораториями кода, но это не обязательно. Все кодовые лаборатории курса перечислены на целевой странице Advanced Android in Kotlin codelabs .


Эта кодовая лаборатория основана на Реализации входа на Android с помощью FirebaseUI . Несмотря на то, что вы можете загрузить начальный код для этой лаборатории кода, если вы не выполнили предыдущую лабораторию кода, вам может быть полезно сначала выполнить вход в систему на Android с помощью лаборатории кода FirebaseUI .

Введение

Если ваше приложение поддерживает вход в систему, часто резервирование частей приложения только для вошедших в систему пользователей. Например, вы можете зарезервировать экран настроек вашего приложения для вошедших в систему пользователей.

В таких случаях вы можете использовать условную навигацию , чтобы вывести пользователей на соответствующий экран в зависимости от их состояния аутентификации.

В этой кодовой лаборатории вы создадите поверх существующего приложения, чтобы добавить экран настроек, который будет доступен пользователям, только если они вошли в систему. Для этой задачи вы будете использовать компоненты навигации Android .

Что вы уже должны знать

Что вы узнаете

  • Как направлять пользователей на соответствующие экраны вашего приложения в зависимости от того, вошли они в систему или нет.

Что ты будешь делать

  • Правильно обрабатывайте навигацию пользователей к нужному экрану после их успешного входа в систему.
  • Запретите пользователям доступ к экрану настроек , если они не вошли в систему, и вместо этого перенаправьте их на экран входа .

В предыдущей кодовой лаборатории вы работали над приложением, которое отображало факты об Android. Ваше приложение также позволяло пользователям входить и выходить из системы. Для этой лаборатории кода вы добавите экран настроек в существующее приложение. Экран настроек будет доступен пользователю только в том случае, если он авторизован.

Если пользователь не вошел в систему, то, когда он попытается получить доступ к экрану настроек, приложение перенаправит его на экран входа в систему. После успешного завершения процесса входа пользователь вернется к экрану настроек, к которому он первоначально пытался получить доступ.

Эта кодовая лаборатория основана на Реализации входа на Android с помощью FirebaseUI . Несмотря на то, что вы можете загрузить начальный код для этой лаборатории кода, если вы не выполнили предыдущую лабораторию кода, вам может быть полезно сначала выполнить вход в систему на Android с помощью лаборатории кода FirebaseUI .

Скачать пример приложения можно одним из следующих способов:

Скачать ZIP


... или клонируйте репозиторий GitHub из командной строки с помощью следующей команды и переключитесь на start ветвь репозитория:

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

Как только вы загрузите проект в Android Studio:

  1. Запустите приложение на эмуляторе или физическом устройстве, чтобы убедиться, что ваша среда успешно настроена для начала разработки.

В случае успеха вы должны увидеть главный экран с забавным фактом об Android и кнопкой входа в верхний левый угол.


Текущие функции стартового приложения:

  • Если пользователь не вошел в систему, нажатие кнопки « Войти » запускает процесс входа и позволяет пользователю войти в систему с адресом электронной почты или учетной записью Google.
  • Если пользователь вошел в систему, кнопка меняется на кнопку « Выход », которая позволяет пользователю выйти из системы.

В этой задаче вы добавите кнопку на главный экран, которая позволит пользователю перейти на экран настроек. Экран настроек позволит пользователю выбрать, какие забавные факты он хочет отображать на главном экране. На экране настроек они могут либо просмотреть факты об Android, либо факты о штате Калифорния.

  1. Откройте fragment_main.xml .
  2. В fragment_main.xml, добавьте кнопку Settings , вложенную в ConstraintLayout , и расположите ее в правом верхнем углу экрана.

фрагмент_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"/>
  1. Откройте nav_graph.xml .
  2. Добавьте действие внутри mainFragment . id действия — action_mainFragment_to_customizeFragment , а пункт назначения — 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>
  1. Откройте MainFragment.kt .
  2. В onViewCreated() установите onClickListener для settings_btn , чтобы при нажатии кнопки пользователь переходил к customizeFragment .

MainFragment.kt

binding.settingsBtn.setOnClickListener {
   val action = MainFragmentDirections.actionMainFragmentToSettingsFragment()
   findNavController().navigate(action)
}
  1. Если вы видите неустраненные ошибки, перекомпилируйте приложение из меню « Сборка », чтобы сгенерировать и использовать новые созданные вами действия навигации.
  2. Перезапустите приложение. Теперь в правом верхнем углу должна быть функциональная кнопка « Настройки ».
  3. Нажмите на кнопку, которая должна привести вас к экрану настроек . На экране « Настройки » есть только одна опция, позволяющая пользователю выбирать, какой тип забавных фактов он хочет отображать на главном экране.
  4. Нажмите кнопку «Назад» на устройстве Android, чтобы вернуться на главный экран.

В этой задаче вы добавите код для перехода пользователя к экрану входа в систему, если он попытается получить доступ к экрану настроек, не войдя в систему.

  1. Откройте SettingsFragment.kt .
  2. В onViewCreated() наблюдайте за authenticationState и перенаправляйте пользователя на LoginFragment , если он не аутентифицирован.

НастройкиFragment.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"
           )
       }
   })
}

Поскольку приложение переводит пользователя на экран входа в систему, если он пытается получить доступ к экрану настроек, приложению также необходимо обрабатывать поведение кнопки «Назад» на экране входа в систему. Если приложение не настраивает обработку кнопки «Назад», пользователь застрянет в бесконечном цикле попыток вернуться на экран настроек, но затем будет снова перенаправлен на экран входа в систему.

  1. Откройте LoginFragment.kt .
  2. В onViewCreated() обрабатывайте действия кнопки «Назад», возвращая пользователя к 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)
}
  1. Перезапустите приложение и убедитесь, что, если вы не вошли в систему, попытки доступа к экрану настроек теперь будут перенаправлять вас на процесс входа в систему.

Хотя вы успешно перенаправили пользователя для входа в систему, вы не обработали то, что происходит после того, как пользователь успешно войдет в систему, поэтому попытки входа будут выглядеть так, как будто они не работают. Вы исправите это на следующем шаге.

До сих пор вы успешно настроили свое приложение для перенаправления пользователя на экран входа в систему, если он попытается получить доступ к экрану настроек без входа в систему.

Однако после того, как вы пройдете процесс входа, вы снова вернетесь к экрану входа. Это не очень удобно для пользователя и может сбивать с толку.

Чтобы обеспечить идеальное взаимодействие с пользователем, приложение должно возвращать пользователя на экран настроек после успешного входа в систему.

  1. По-прежнему в LoginFragment.kt , в любом месте onViewCreated() , наблюдайте за authenticationState и возвращайте пользователя обратно в 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"
       )
   }
})
  1. Запустите приложение еще раз и убедитесь, что теперь, когда вы успешно входите в систему, вы попадаете на страницу настроек , а не на страницу входа .

Вы можете проверить полное приложение со всем кодом решения в этом репозитории Github https://github.com/googlecodelabs/android-kotlin-login-navigation .

В этой лабораторной работе вы изучили передовые методы создания удобного пользовательского интерфейса в приложении, поддерживающем вход в систему. Наблюдая за статусом аутентификации приложения, вы смогли определить, к каким экранам может получить доступ пользователь, и при необходимости перенаправить их на экран входа в систему.

Чтобы узнать больше о передовых методах навигации в Android, ознакомьтесь со следующими ресурсами:

Документация для разработчиков Android:

Лаборатории кода:

Ссылки на другие лаборатории кода в этом курсе см. на целевой странице Advanced Android in Kotlin codelabs.