Продолжаем серию уроков по разработке 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{} такие зависимости:
// Navigation
implementation "androidx.navigation:navigation-fragment-ktx:2.3.0-beta01"
implementation "androidx.navigation:navigation-ui-ktx:2.3.0-beta01"
// Dynamic Feature Module Support
implementation "androidx.navigation:navigation-dynamic-features-fragment:2.3.0-beta01"
// Testing Navigation
androidTestImplementation "androidx.navigation:navigation-testing:2.3.0-beta01"
Также убедитесь, что в общем файле сборки build.gradle проекта присутствуют ссылки на репозитории google() и jcenter() :
allprojects {
repositories {
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. Окно редактора навигации похоже на окно редактора макетов – слева список пунктов назначения, в центре визуальное представление, справа панель атрибутов выбранного компонента. Кнопками можно переключаться между представлениями – дизайн, текст или комбинированное представление.
Переключитесь на текстовое представление:
<?xml version="1.0" encoding="utf-8"?> <navigation xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/nav_graph"> </navigation>
В среде разработки можно увидеть, что тег navigation подчеркнут красным, а при наведении на него отображается сообщение о том, что навигационный граф не связан ни с одним файлом разметки, содержащим компонент NavHostFragment. Давайте это исправим.
NavHostFragment
Для каждого навигационного графа должен быть определен хост. Например, хостом может служить активити, к которому привязаны фрагменты, представляющие пункты назначения для навигации. Причем для каждого такого активити должен быть определен свой навигационный граф.
Чтобы добавить хост, откройте файл разметки activity_main.xml в редакторе макетов. Переключитесь на вкладку дизайна. В палитре компонентов слева найдите в группе Containers компонент NavHostFragment и перетащите его в макет активити. При этом откроется окно выбора навигационного графа, где показан тот, который мы недавно создали – выберите его. Выполните привязку компонента к краям экрана, нажав и потянув поочередно каждый из маркеров к своему краю экрана. Затем переключитесь в режим текста и укажите размеры для компонента NavHostFragment – 0dp. Компонент займет весь экран.
Добавление пунктов назначения
Давайте добавим новый фрагмент в приложение, шелкнув правой клавишей мыши по главному пакету приложения и выбрав пункты контекстного меню: New> Fragment> Fragment (Blank). После содания макет разметки этого фрагмента будет доступен для выбора в редакторе навигации. Кликните по кнопке с изображением экрана с зеленым плюсиком в правом нижнем углу, и в окне добавления пункта назначения вы увидите список макетов разметки. Выберите только что добавленный фрагмент, и он добавится на центральную панель. Обратите внимание – он обозначен иконкой в виде домика – это значит, что это домашний, стартовый экран для этого навигационного графа.
Вы можете добавить существующий фрагмент или активити в качестве пункта назначения, или создать его прямо из редактора навигации. Для создания нового пункта назначения нажмите кнопку Create new destination. Будет создан и добавлен на центральную панель новый фрагмент.
Также вместо пункта назначения можно добавить временный заполнитель — placeholder. В редакторе навигации с заполнителями можно взаимодействовать так же, как и с обычными пунктами назначения, например, определять действия – actions. В текстовом представлении заполнитель обозначается тегами <fragment></fragment>, как и обычные фрагменты.
Перед тестированием приложения нужно заменить все заполнители настоящими пунктами назначения, иначе попытка перехода в приложении на placeholder завершится ошибкой.
Добавление переходов
Давайте пока удалим заполнитель и оставим два фрагмента. Добавим действие для перехода с одного экрана на другой. Как вы уже поняли, для этого нужно нажать маркер одного фрагмента и протянуть до другого. Добавится стрелочка, обозначающая действие – переход с одного фрагмента на другой.
Если мы посмотрим на текстовое представление, то увидим, что у домашнего фрагмента появился тег <action></action>, внутри которого обозначен идентификатор действия и пункт назначения.
Теперь откройте макет домашнего фрагмента и вместо шаблонного текста в поле TextView добавьте цифру 1, а размер текста установите побольше. Также добавьте сюда кнопку. В макете второго фрагмента аналогично напишите цифру 2.
Теперь в классе первого фрагмента переопределите метод жизненного цикла onViewCreated() и внутри него напишите код слушателя нажатия кнопки:
button.setOnClickListener{ view : View ->
view.findNavController().navigate(R.id.action_blankFragment_to_blankFragment222)
}
Здесь мы находим контроллер навигации и вызываем его метод navigate, которому передаем идентификатор действия (action), добавленного в редакторе навигации между фрагментами.
Проверка переходов в приложении
Теперь запустите приложение в эмуляторе или смартфоне. Обратите внимание – при открытии отображается домашний фрагмент, хотя мы его не прописывали в макете активити. Мы просто определили макет активити как хост навигационного графа, и теперь при старте этого активити библиотека навигации отображает нам фрагмент, указанный как домашний в этом графе.
Нажмите на кнопку, и выполнится действие – переход от первого фрагмента ко второму. Нажатие системной кнопки «Назад» вернет вас на первый экран. Это простейший пример навигации, а на следующем уроке мы разнообразим его и добавим более сложную навигацию в приложение.
Надеюсь, теперь вам будет более понятен материал прошлого урока, при желании вы можете пересмотреть его снова.
Исходный код проекта можно скачать по ссылке. Вопросы задавайте в комментариях. Спасибо за просмотр, до встречи на следующем уроке, и всем добра!
