Navigation graph android kotlin

Урок 12. Навигация в приложении. Начало работы с Navigation Architecture Component

В этом уроке на практике познакомимся с библиотекой Navigation Architecture Component , которая позволяет пользователям перемещаться между различными частями контента в вашем приложении. Компонент навигации входит в набор компонентов Android Jetpack и помогает реализовать навигацию, от простых нажатий кнопок до более сложных шаблонов, таких как панели приложений (appbars) и панель навигации (navigation drawer). Компонент навигации также обеспечивает согласованное и предсказуемое взаимодействие с пользователем, придерживаясь установленного набора принципов, о которых мы говорили на прошлом уроке.

Введение

Navigation Architecture Component упрощает осуществление навигации, а также помогает визуализировать navigation flow вашего приложения. Библиотека предоставляет ряд преимуществ, в том числе:

• Автоматическая обработка транзакций фрагментов
• Корректная обработка кнопок «Вверх» и «Назад» по умолчанию
• Поведение по умолчанию для анимации и переходов
• Deep linking как first class operation
• Реализация шаблонов навигации пользовательского интерфейса (таких как navigation drawer и bottom navigation) с небольшой дополнительной работой
• Безопасность типов при передаче информации во время навигации
• Инструменты Android Studio для визуализации и редактирования navigation flow приложения

В этом уроке нам понадобится среда разработки Android Studio версии 3.3 или выше.

Мы будем использовать готовый проект, в котором уже есть необходимые активити или фрагменты. Нам нужно настроить навигацию в приложении, используя Navigation Architecture Component.

Скачайте стартовый проект по ссылке

Обзор компонента навигации

Компонент навигации состоит из трех ключевых частей:

• Navigation graph: ресурс XML, который содержит всю связанную с навигацией информацию в одном централизованном месте. Это включает в себя все отдельные области содержимого в вашем приложении, называемые destinations (пункты назначения), а также возможные пути, которые пользователь может пройти через ваше приложение.
• NavHost: Пустой контейнер, который отображает пункты назначения из вашего графика навигации. Компонент Navigation содержит реализацию NavHost по умолчанию — NavHostFragment, которая отображает фрагменты — места назначения.
• NavController: Объект, который управляет навигацией приложения в NavHost. NavController управляет перемещениями контента мест назначения в NavHost , в процессе перемещения пользователей по приложению.

Мы используем объект NavController, сообщая ему путь в ресурсе Navigation Graph. Затем объекту NavController будет показан соответствующий пункт назначения в NavHostFragment.

Давайте посмотрим, как это выглядит на практике, начиная с нового ресурса Navigation Graph.

Destinations

Компонент навигации представляет концепцию Destinations — пункта назначения . Пункт назначения — это любое место, в котором вы можете перемещаться в приложении, обычно это фрагмент или активити. Они поддерживаются «из коробки», но вы также можете создавать свои собственные типы назначения, если это необходимо.

Navigation Graph

Navigation Graph представляет собой новый тип ресурса , который определяет все возможные пути, доступные пользователю в приложении. Он показывает визуально все пункты назначения, которые могут быть достигнуты из данного пункта назначения. Редактор навигации Android Studio отображает Navigation Graph наглядно.

Редактор навигации

1. Откройтеres/navigation/mobile_navigation.xml
2. Перейдите в режим «Дизайн»:

Navigation Graph показывает доступные пункты назначения. Стрелки между пунктами назначения называются actions (действия). Больше мы поговорим о них позже.

1. Нажмите на пункт назначения, чтобы увидеть его атрибуты.
2. Нажмите на любое действие, представленное стрелкой, чтобы увидеть его атрибуты.

Анатомия навигационного XML-файла

Все изменения, которые вы делаете в графическом редакторе навигации, изменяют базовый XML-файл, подобно тому, как редактор макетов изменяет XML-макет.

Перейдите на вкладку « Текст »:

Источник

Modular Navigation in Android Kotlin with Bottom Tab and Navigation Component.

Nov 14, 2020 · 5 min read

Industry practices follow a general thumb rule on how new features must be added to your application as new modules separate from the main app module. Thus this structure requires clean navigation to be set up beforehand.

In this article, we will get right into that with the help of the navigation component.

Project Setup in android studio

We will be using the latest navigation componen t which is now part of the Android Navigation Component. First, we need to create 3 different modules that would represent the 3 different tabs in our application. In our app let’s name them Home, Settings, Profile tabs respectively, and also the main navigation, we will see why later.

1. Right Click on Project >create a new module>and select Android library
2. Create 4 separate modules i.e Home, Settings, Profile, and Navigation
3. Your final project structure should like this —

Now you can add the navigation dependencies manually or android studio(4.0) to add them automatically when you create a navigation resource file. Add the dependencies in all the modules, you can get the dependencies from here.

Adding navigation graphs for each module

Once the dependencies are added we need to add navigation resource files for each module like this.

1. Right-click on your package >Click on New >and Android Resource file> Select Navigation as the type of resource file.

2) You can now add fragments to your navigation lets add a single fragment which becomes the start destination. Add a fragment to the navigation file by clicking on the add icon from the design screen.

3) We need to go ahead and do it for every module, add a navigation graph, and add a start destination fragment to every module.

Nesting modular navigation graphs into the main graph

We need to add the module graphs into the main graph in our navigation.xml file in our main navigation module. To use files from different modules we need to add their implementation in the build.Gradle file of the module that we want them to be implemented.

We write the implementation project(“:/module_name/”) in our build.gradle file in the navigation module.

Now we include the navigation graphs into the main navigation file using the include tag and referencing the correct id which points to that particular module graph.

You need to provide a start destination in the main navigation file so that the navigation file knows which graph it needs to inflate first, you can add that code manually or through the design section GUI

Designing the main activity file and bottom navigation tab

Now we can begin designing our main activity, this app is designed with a single activity and multiple fragment design which is the popular and standard recommended practice used in the industry. Thus our app will have only one activity where it will launch the application.

1) Adding a frame layout and a bottom tab to our application

We can start by adding a fragment layout to our MainActivity.xml file this fragment layout will hold our fragments which keep on switching depending on the Tab we select. also add a bottom nav tab at the end of the screen.

Key points to note

1. The fragment holder should have a name attribute android:name=”android.navigation.fragment.NavHostFragment” this cannot be changed as this is referenced from the classes generated from the navigation package and is part of the navigation component.
2. The fragment must also have an attribute called navGraphwhich must be referencing or pointing to the @navigation/main_navigation which is our main navigation file holding all the sub-navigation.
3. Also, make the fragment the default navhost by setting it to be “true”

Bottom Navigation Tab

The bottom navigation tab is quite simple to set up , we first use the Bottom Nav component from material design and we pass in a menu resource file which would contain the contents of our bottom nav.

Setting up NavController in the MainActivity.kt file

Finally, we are nearing the end of setting up the navigation (Pheww! I know) .

We need to set up the nav controller in our mainActivity.kt file, by using the findNavController and passing it the mainNavHostFragment.The navController sits on top of the navigation stack and is responsible for fragment transactions that take place behind the scenes.

We can then setup the bottom nav with our navController with the help of the setupWithNavController helper function and pass it to navController

Once you have set up the nav controller with the bottom nav tab run your application, you must see your app launch on the Home Fragment like this.

Clicking on different tabs must switch the fragments as shown.

Thus we can see how module wise navigation occurs , modularising the code helps in creating new feature builds without existing other code bases it is an efficient and standard way in android development. Github link reference will be provided below to the source code feel free to check out.

Источник

Урок 13. Навигация в Android приложении. Интеграция в новый проект, добавление пунктов назначения (destinations) и переходов между ними (actions)

Продолжаем серию уроков по разработке android-приложений в Android Studio на языке Kotlin.

На прошлом уроке мы познакомились с библиотекой Navigation Architecture Component, которая позволяет пользователям перемещаться между различными экранами и расположениями контента в андроид-приложении. Но, судя по комментариям к уроку на нашем канале, урок был понятен не всем, кому-то не понравилась подача материала с использованием готового проекта. Поэтому мы решили исправиться и сделать новый урок с созданием проекта с нуля и добавлением в него навигации.

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

Создаем новый проект в Android Studio

Откройте среду разработки Android Studio. Создайте новый проект с использованием шаблона Empty Activity.

Для работы с компонентом навигации понадобится среда разработки Android Studio 3.3 или более новой версии. При разработке приложений я рекомендую всегда использовать стабильный релиз. На данный момент, это версия 3.6.1.

Чтобы убедиться, что вы используете стабильный релиз Android Studio, проверьте, что для обновления среды разработки используется стабильный канал. Для этого откройте меню Help> Check for updates> Configure automatic updates. В поле Автоматической проверки обновления должен быть выбран Stable Channel.

Добавляем в проект библиотеку Navigation Architecture Component

Чтобы добавить библиотеку Navigation Architecture Component в наш проект, откройте файл сборки build.gradle модуля App. Добавьте в секцию dependencies<> такие зависимости:

Также убедитесь, что в общем файле сборки build.gradle проекта присутствуют ссылки на репозитории google() и jcenter() :

После всех изменений синхронизируйте проект с Gradle.

Navigation graph

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

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

Кликните правой кнопкой мыши на папке res вашего проекта и в контекстном меню выберите пункты New > Android Resource File. Откроется диалог New Resource File, где нужно указать имя файла, например, «nav_graph». В выпадающем списке Resource type выберите Navigation. Нажмите кнопку ОК для закрытия диалога и создания файла навигационного графа.

В результате Android Studio создаст в папке res папку navigation, и в ней файл nav_graph.xml.

Navigation Editor

После создания навигационного графа он откроется в редакторе навигации. Как и файлы разметки его можно редактировать двумя способами – либо в визуальном редакторе, либо в XML. Окно редактора навигации похоже на окно редактора макетов – слева список пунктов назначения, в центре визуальное представление, справа панель атрибутов выбранного компонента. Кнопками можно переключаться между представлениями – дизайн, текст или комбинированное представление.

Переключитесь на текстовое представление:

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

NavHostFragment

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

Чтобы добавить хост, откройте файл разметки activity_main.xml в редакторе макетов. Переключитесь на вкладку дизайна. В палитре компонентов слева найдите в группе Containers компонент NavHostFragment и перетащите его в макет активити. При этом откроется окно выбора навигационного графа, где показан тот, который мы недавно создали – выберите его. Выполните привязку компонента к краям экрана, нажав и потянув поочередно каждый из маркеров к своему краю экрана. Затем переключитесь в режим текста и укажите размеры для компонента NavHostFragment – 0dp. Компонент займет весь экран.

Добавление пунктов назначения

Давайте добавим новый фрагмент в приложение, шелкнув правой клавишей мыши по главному пакету приложения и выбрав пункты контекстного меню: New> Fragment> Fragment (Blank). После содания макет разметки этого фрагмента будет доступен для выбора в редакторе навигации. Кликните по кнопке с изображением экрана с зеленым плюсиком в правом нижнем углу, и в окне добавления пункта назначения вы увидите список макетов разметки. Выберите только что добавленный фрагмент, и он добавится на центральную панель. Обратите внимание – он обозначен иконкой в виде домика – это значит, что это домашний, стартовый экран для этого навигационного графа.

Вы можете добавить существующий фрагмент или активити в качестве пункта назначения, или создать его прямо из редактора навигации. Для создания нового пункта назначения нажмите кнопку Create new destination. Будет создан и добавлен на центральную панель новый фрагмент.

Также вместо пункта назначения можно добавить временный заполнитель — placeholder. В редакторе навигации с заполнителями можно взаимодействовать так же, как и с обычными пунктами назначения, например, определять действия – actions. В текстовом представлении заполнитель обозначается тегами , как и обычные фрагменты.

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

Добавление переходов

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

Если мы посмотрим на текстовое представление, то увидим, что у домашнего фрагмента появился тег , внутри которого обозначен идентификатор действия и пункт назначения.

Теперь откройте макет домашнего фрагмента и вместо шаблонного текста в поле TextView добавьте цифру 1, а размер текста установите побольше. Также добавьте сюда кнопку. В макете второго фрагмента аналогично напишите цифру 2.

Теперь в классе первого фрагмента переопределите метод жизненного цикла onViewCreated() и внутри него напишите код слушателя нажатия кнопки:

Источник