Android Navigation Components

На этом занятии мы познакомимся с навигационными компонентами Android Jetpack и научимся использовать их для реализации навигации в приложении.

Вебинар

Демо-приложение для вебинара находится в ветке webinar. Все шаги по созданию приложения описаны в коммитах и соответствуют шагам вебинара. Изначально приложение создано с использованием традиционного подхода к навигации с использованием FragmentManager. По ходу вебинара мы перепишем навигацию на использование навигационных компонентов.

Что мы изучим на вебинаре:

• Что такое навигационные компоненты и зачем они нужны.
• Как создать навигационный граф.
• Как интегрировать Toolbar с навигационными компонентами.
• Как интегрировать навигацию с BottomNavigationView.
• Как использовать Safe Args для передачи данных между экранами.
• Вложенный навигационный хост на примере BottomNavigationView.
• Deep Linking.

Домашнее Задание

В этом задании вам предстоит переделать модуль app на использование навигационных компонентов.

• Создать приложение с двумя экранами - списком и детальной информацией о элементе списка.
• Реализовать навигацию между этими экранами.
• Реализовать передачу данных с помощью Safe Args.
• Выполнить навигацию в диалог и получить результат из диалога.

Макеты экранов: https://www.figma.com/community/file/1444748215252287519 Цветовая тема может быть любой на ваш выбор. Хорошая верстка - это плюс. Но главное - правильная реализация навигации.

Задание 1. Экран списка

Сверстайте экран книги рецептов. В шаблоне приложения вы найдете:

• CookBookFragment - фрагмент для списка рецептов.
• fragment_cook_book.xml - шаблон фрагмента списка рецептов.

Вам нужно:

• Заполнить список рецептов данными. Создайте RecyclerView и адаптер для него. Список содержит заголовки и краткое описание рецептов, которые передаются в адаптер внутри метода onRecipeListUpdated. Поскольку в списке два типа элементов, у вас получится два типа ViewHolder.
• При нажатии на элемент списка должен открываться экран детальной информации о рецепте. Предусмотрите колбэк для обработки нажатия на элемент списка, который получит ID рецепта.
• Создайте навигационный граф и добавьте в него фрагмент списка рецептов.
• Добавьте навигационный фрагмент на главную активность.

Задание 2. Экран детальной информации

Сверстайте экран детальной информации о рецепте. В шаблоне приложения вы найдете:

• RecipeFragment - фрагмент для детальной информации о рецепте.
• fragment_recipe.xml - шаблон фрагмента детальной информации о рецепте.

Вам нужно:

• Добавить в навигационный граф фрагмент детальной информации о рецепте.
• Реализуйте анимацию перехода между фрагментами, как описано в документации.
• Передать ID рецепта в фрагмент детальной информации с помощью Safe Args.
• Получить ID рецепта во фрагменте, реализовав геттер для аргумента recipeId.
• Заполнить экран детальной информации о рецепте данными. Данные о рецепте передаются во фрагмент внутри метода displayRecipe.

Задание 3. Навигация в диалог

Реализуйте диалог подтверждения удаления рецепта при помощи DialogFragment.

Вам нужно:

• Создать диалог с подтверждением удаления рецепта.
• Добавить диалог в навигационный граф.
• Передать название рецепта в диалог с помощью Safe Args. Воспользуйтесь методом getTitle, чтобы получить название открытого рецепта.
• Получите результат из диалога при помощи SavedStateHandle, как описано в документации
• При положительном ответе вызовите метод deleteRecipe во фрагменте детальной информации о рецепте.
• Добавьте обработчик нажатия на кнопку удаления во фрагменте детальной информации о рецепте.