24 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Навигация для Android с использованием Navigation Architecture Component: пошаговое руководство

Урок 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-макет.

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

Введение в Navigation Architecture Component

Среди компонентов Jetpack, самым интересным является Navigation Architecture Component. Навигация управляет перемещением между destinations. Destinations обычно представлены фрагментами, однако поддерживают activities и другие пользовательские destinations. С помощью Navigation Architecture Component можно с легкостью реализовать сложную навигацию в android. Он предоставляет набор компонентов навигации, таких как Fragment transactions, Up and Back navigation, которые обрабатывают большую часть информации. Помимо этого, предоставляются шаблоны Navigation UI, такие как navigation drawers, bottom navigation и многие другие, содержащие минимальное количество кода. Узнать подробнее о преимуществах и ключевых особенностях Navigation Architecture Component можно, посмотрев официальную документацию.

Прежде чем начать…

Ниже изображена демо-версия приложения, которое мы будем создавать.

Приложения содержат три фрагмента: HomeFragment, ProfileFragment и SettingsFragment в Bottom Navigation View. В HomeFragment есть кнопка, которая возвращает к FirstPageFragment. FirstPageFragment ведет к LastpageFragment.

Добавление зависимостей

На уровне приложения build.gradle добавьте следующие зависимости.

Также добавьте следующую зависимость.

Следующий плагин предназначен для передачи аргументов между destinations (в нашем случае фрагментов).

Установка MainActivity

MainActivity содержит фрагмент NavHost и Bottom Navigation View в XML layout.

Фрагмент Navhost: Activity размещает навигацию для приложения в NavHost. NavHost — это пустой контейнер, который перемещает destinations фрагментов по навигационному графу (navigation graph).

Во фрагменте NavHost назначаем свойство navGraph , значение которого представлено XML-ресурсом. Этот XML-ресурс называется навигационным графом, который представляет собой отдельные узлы destination в приложении вместе с соединяющими узлы действиями. Другими словами, destinations — это фрагменты, которые получаются в результате действий. Для создания навигационного графа создайте каталог navigation под каталогом res . Затем создайте навигационный XML-ресурс в этом каталоге.

Навигационный граф для нашего приложения выглядит следующим образом. Строки представляют собой действия, приводящие к определенным destinations. Дизайн android_navigation.xml выглядит так.

Здесь представлена текстовая часть android_navigation.xml .

Читать еще:  5 лучших объективов-трансформеров для смартфонов [сравнение и выбор лучшего]

Но…кто все это контролирует?

NavController. Это объект, который отслеживает текущую позицию в навигационном графе. Он координирует перемещение содержимого destination в NavHostFragment по навигационному графу. В MainActivity создаем объект NavController.

Перейти к destinations можно с помощью NavController.

Установка Bottom Navigation

С помощью Navigation Architecture Component можно с легкостью создать навигацию с menus, drawers и bottom navigation. Для установки bottom navigation view понадобятся лишь две строки.

Таким образом, мы уже создали три фрагмента Bottom Navigation View.

Action!

Помимо NavController для навигации также можно использовать действия. Строки, показанные на навигационном графе — это действия.

Id действия action_goto1 соединяет home_fragment с destination first_page_fragment . При использовании app:popUpTo вместо app: destination , фрагменты удаляются из обратного стека до момента достижения first_page_fragment .

Приступим к работе над аргументами!

Плагин Gradle генерирует простой объект и строитель классов для типобезопасного доступа к аргументам, установленным для destinations и действий. Тег в first_page_fragment генерирует класс FirstPageFragmentArgs. Передаем целое число testNumber из HomeFragment к FirstPageFragment.

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

Класс FirstPageFragmentArgs генерирует геттеры и сеттеры для аргумента testNumber . Устанавливаем значение в HomeFragment с помощью классов Directions.

Классы Directions генерируются для каждого отдельного destination с действиями. Класс Directions включает методы для каждого действия в destination.

С помощью следующих строк получаем значение testNumber в FirstPageFragment.

Вот и все! Мы успешно использовали Navigation Architecture Component для создания приложения. Запустите приложение и проверьте результат. Полный код можно посмотреть на github. Счастливого программирования!

Информационный портал по безопасности

Информационный портал по безопасности » Программирование » Game Development » Навигация для Android с использованием Navigation Architecture Component: пошаговое руководство

Навигация для Android с использованием Navigation Architecture Component: пошаговое руководство

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

Часть 1. Подготовительные работы

— 1.1. Создание проекта

— 1.2. Зависимости (Dependencies)

— 1.3. Страницы: создание фрагментов

— 1.4. Адреса: файл ресурсов типа «Navigation»

— 1.5. Фрейм: виджет NavHostFragment

Часть 2. Элементы навигации

— 2.1. Навигация с помощью кнопок

— 2.2. Боковое меню (Drawer)

— 2.3. Панель инструментов: Toolbar вместо ActionBar

— 2.4. Нижнее меню (Bottom Navigation)

— 2.5. Всплывающее меню (Overflow Menu)

Краткие выводы и ссылка на github

Котлина, IDE Android Studio версии не ниже 3.3, смартфон или эмулятор с версией API 14 или выше.

Создадим в Android Studio новый проект под названием «Navigation2019».

IDE создаст файл главной активности «MainActivity.kt» и его макет (шаблон) «activity_main.xml».

1.2. Зависимости (Dependencies)

Откроем файл «build.gradle» модуля (не проекта, а именно модуля) и в блок «dependencies» добавим необходимые зависимости:

Мы использовали библиотеки версии 1.0.0, но в будущем ситуация может измениться. Проверить, какие версии библиотек являются актуальными, можно здесь.

1.3. Страницы: создание фрагментов

Фрагменты — это «страницы» нашего будущего приложения. Кликнув правой кнопкой на каталоге с файлами классов, командой «New Fragment Fragment(Blank)» создадим «Fragment1».

IDE создаст kt-файл с классом фрагмента и xml-файл с макетом фрагмента. Таким же образом сгенерируем ещё три фрагмента («Fragment2», «Fragment3», «Fragment4»). Мы будем использовать их для создания четырёх разных типов навигации по приложению.

1.4. Адреса: файл ресурсов типа «Navigation»

Кликнув правой кнопкой мыши по папке «res», создадим файл ресурсов типа «Navigation» с названием «routes.xml» («маршруты»).

Откроем созданный файл и с помощью кнопки «New Destination» добавим в навигационную схему наши фрагменты.

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

В соответствии с их названиями, наши фрагменты получат идентификаторы (id) «fragment1», «fragment2», «fragment3», «fragment4». Это «адреса», которые будут использоваться при указании пунктов назначения («destinations») в инструкциях навигационному контроллеру.

Кроме «id», каждый тег «fragment» содержит ещё три параметра: «name», «label» и «layout». Параметры «name» и «layout» нас сейчас не интересуют. Единственное, что стоит отредактировать в файле «routes.xml» — это названия («label») фрагментов. Заменим их на «Фрагмент №1», «Фрагмент №2», «Фрагмент №3» и «Фрагмент №4».

1.5. Фрейм: виджет NavHostFragment

Откроем файл макета «res/layout/activity_main.xml» и удалим текстовый виджет «Hello World!», он нам не понадобится. В палитре (Palette) выберем раздел «Контейнеры» (Containers) и перетащим оттуда на макет активности виджет NavHostFragment (указав наш файл «routes» в качестве источника информации для него). Он выполнит роль фрейма, в котором будут выводиться различные фрагменты приложения.

Изменим id фрагмента на «navFragment». Код макета главной активности будет выглядеть теперь так:

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

Часть 2. Элементы навигации

2.1. Навигация с помощью кнопок

Откроем макет первого фрагмента («fragment_fragment1.xml»). Удалим ненужный текстовый виджет, изменим тип макета с «FrameLayout» на линейный вертикальный и добавим три кнопки с идентификаторами «button2», «button3», «button4» и соответствующими названиями «Фрагмент 2», «Фрагмент 3», «Фрагмент 4».

В методе «onCreateView» фрагмента получим ссылку на навигационный контроллер (объект «NavController») и запрограммируем поведение при нажатии на кнопки: командой «setonclickListener» для каждой кнопки создадим слушателя кнопки, который при клике по кнопке будет передавать навигационному контроллеру адрес (id) точки назначения вместе с командой переместиться (navigate) на указанный адрес.

Читать еще:  Как быстро почистить WhatsApp и освободить место в памяти смартфона

Проверим, как работают наши кнопки.

Одна кнопка — одна строчка кода — и клик по кнопке перемещает нас к указанному фрагменту. Просто, не так ли?

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

2.2. Боковое меню (drawer)

2.2.1. Ресурсный файл меню

В каталоге «res/menu» создадим ресурсный файл меню «drawer_menu.xml». Добавим в него пункты меню, каждый из которых представляет собой тег «item» с параметрами «id» (должен соответствовать таковому в навигационном графе «routes.xml», «title» (заголовок, он может быть другим), «icon» (мы используем одну и ту же картинку для всех пунктов, но, конечно же, они могут быть разными) и др. Наше меню будет выглядеть так:

2.2.2. Шаблон DrawerLayout и виджет NavigationView в макете активности

Откроем файл макета активности «activity_main.xml».

После первого тега (xml version…) добавим начало тега «DrawerLayout».

В конец файла добавим виджет «NavigationView» и окончание тега «DrawerLayout».

2.2.3. Подключение бокового меню в классе активности

Откроем файл «MainActivity.kt» и в методе «onCreate» получим ссылку на «navController» (в активности это выглядит чуть сложнее, чем было во фрагментах).

Затем включим боковое меню:

Код класса теперь выглядит так:

Теперь меню появляется в ответ на свайп от левого края экрана:

Хорошо было бы добавить и кнопку слева-вверху для вызова бокового меню, верно?

2.3. Кнопка и название фрагмента на панели инструментов

Существующий по умолчанию ActionBar, как рекомендует официальное руководство, заменим на Toolbar.

Чтобы отключить существующий ActionBar, в файле «res/values/styles.xml» найдём строку

и заменим «DarkActionBar» на «NoActionBar».

Отлично, ActionBar мы отключили.

Теперь добавим Toolbar. Откроем файл «activity_main.xml», в палитре (Palette) выберем раздел «Контейнеры» (Containers) и перетащим оттуда на макет активности виджет «Toolbar». Панель инструментов добавлена, но она пока пуста.

Переходим в файл активности «MainActivity.kt». Чтобы на Toolbar вывести кнопку и название текущего фрагмента, в метод «onCreate()» добавим следующие строки:

Toolbar теперь выводит название фрагмента и кнопку «Вверх» (Up) для вложенных фрагментов.

Кнопка «вверх» в android’е почему-то обозначается стрелкой «влево»:

Чтобы на стартовом экране приложения выводилась кнопка-гамбургер, нам необходимо в конфигурацию панели инструментов добавить параметр «drawerLayout», который содержит id виджета DrawerLayout из файла «activity_main.xml».

Клик по этой кнопке выводит боковое меню.

2.4. Нижнее меню (Bottom Navigation)

Иногда бывает необходимо акцентировать внимание пользователя на определённых действиях, и эффективно сделать это помогает нижнее меню. Добавим его в третий фрагмент.

Сначала создадим ресурсный файл меню «bottom_nav_menu.xml» с парой ссылок. Затем откроем макет фрагмента №3 (файл «fragment_fragment3.xml») и перетащим на него виджет «BottomNavigationView», попутно согласившись с предложением IDE добавить в dependencies библиотеку «com.android.support:design».

Если бы мы создавали нижнее меню не для одного фрагмента, а сразу для всех, то в метод «onCreate» класса активности (файл «MainActivity.kt») нужно было бы включить следующий код:

Конечно, и виджет «BottomNavigationView» в таком случае надо было бы поместить в макет активности, а не фрагмента.

Но поскольку данное меню нам требуется только во фрагменте №3, то и редактировать мы будем класс фрагмента (файл «Fragment3.kt»), а код будет выглядеть чуть сложнее:

В итоге мы получим нижнее меню, которое будет выводиться только в 3-м фрагменте.

То же самое, но с другими ссылками, сделаем и в 4-м фрагменте.

2.5. Всплывающее меню (Overflow Menu)

Ещё один вид меню — всплывающее меню, которое выводится при клике по кнопке (трём вертикально расположенным точкам) в правом верхнем углу экрана.

Создадим ресурсный файл меню «top_right_menu.xml» с необходимыми ссылками.

В файле «MainActivity» в метод «onCreate» перед «toolBar.setupWithNavController. » добавим строку «setSupportActionBar(toolBar)».

И далее в этом же классе переопределим два метода:

Нажатие на верхнюю правую кнопку теперь отображает всплывающее меню:

Краткие выводы и ссылка на github

Очевидно, что Navigation Architecture Component существенно облегчает труд разработчика. Сложные в прошлом задачи теперь решаются несколькими строчками кода.

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

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

Navigation

Navigation refers to the interactions that allow users to navigate across, into, and back out from the different pieces of content within your app. Android Jetpack’s Navigation component helps you implement navigation, from simple button clicks to more complex patterns, such as app bars and the navigation drawer. The Navigation component also ensures a consistent and predictable user experience by adhering to an established set of principles.

The Navigation component consists of three key parts that are described below:

  • Navigation graph: An XML resource that contains all navigation-related information in one centralized location. This includes all of the individual content areas within your app, called destinations, as well as the possible paths that a user can take through your app.
  • NavHost : An empty container that displays destinations from your navigation graph. The Navigation component contains a default NavHost implementation, NavHostFragment , that displays fragment destinations.
  • NavController : An object that manages app navigation within a NavHost . The NavController orchestrates the swapping of destination content in the NavHost as users move throughout your app.
Читать еще:  Как обойти ошибку «Недоступно в вашей стране» и устанавливать любые приложения из Google Play

As you navigate through your app, you tell the NavController that you want to navigate either along a specific path in your navigation graph or directly to a specific destination. The NavController then shows the appropriate destination in the NavHost .

The Navigation component provides a number of other benefits, including the following:

  • Handling fragment transactions.
  • Handling Up and Back actions correctly by default.
  • Providing standardized resources for animations and transitions.
  • Implementing and handling deep linking.
  • Including Navigation UI patterns, such as navigation drawers and bottom navigation, with minimal additional work.
  • Safe Args – a Gradle plugin that provides type safety when navigating and passing data between destinations.
  • ViewModel support – you can scope a ViewModel to a navigation graph to share UI-related data between the graph’s destinations.

In addition, you can use Android Studio’s Navigation Editor to view and edit your navigation graphs.

Next steps

For more documentation and resources related to the Navigation component, see the following.

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

Для просмотра онлайн кликните на видео ⤵

Урок 11. Принципы навигации внутри и между андроид-приложениями Подробнее

Navigation Drawer Activity в Android Studio – структура шаблона, пример | Дизайн андроид приложений Подробнее

011. Навигация с архитектурными компонентами от Google: взгляд прагматика – Александр Блинов Подробнее

Урок 7. Сохранение состояния Activity – onSaveInstanceState() или ViewModel? LiveData Подробнее

Разработка приложений под Android. Базовый курс. Урок 5. Меню. Fragment. Навигация. Подробнее

Изучение Kotlin | #1 – Введение в Kotlin и установка Подробнее

Уроки Андроид программирования | #7 – Переход между страницами Подробнее

Startandroid: Урок 106. Взаимодействие Fragments и Activity (уроки Android Studio) Подробнее

Android: Урок 22. Знакомимся с Fragment-ами Подробнее

Model View View-Model (MVVM): Getting Started Подробнее

Урок 2. Kotlin. Создание проекта в Android Studio и запуск приложения на андроид-устройстве Подробнее

Android Bottom Navigation Bar / View / Tabs with Fragments – Android Studio Tutorial Подробнее

Start аndroid: Урок 138. Определение местоположения. GPS координаты (андроид, видео уроки) Подробнее

Android: Урок 19. Создание Menu Подробнее

Урок 21. Добавление Activity – cоздание многоэкранных приложений | Android Studio Подробнее

Jetpack Navigation Component in One Video Подробнее

Unit тестирование для Android разработчиков. Основы тестирования. Урок 1 Подробнее

Как добавить BottomNavigationView в ваше android приложение Подробнее

Изучаем Bottom Navigation Menu из Support Library Подробнее

Компонент Android Navigation Architecture – это компонент архитектуры навигации, предназначенный для использования только одной активности?

В настоящее время я изучаю новый компонент Android Navigation Architecture (https://developer.android.com/topic/libraries/architecture/navigation/).

Я немного смущаюсь своим мотивом и концепцией, вот мои неопределенности:

  1. Компонент Android Navigation Architecture разработан для устранения необходимости использования нескольких действий в одном приложении? Что означает, что для всех приложений просто требуется отдельная активность, а на другой странице будет фрагмент?
  2. Использует ли несколько приложений в приложениях, но в то же время использует компонент Android Navigation Architecture для навигации по фрагменту, фактически нарушает цель Android Navigation Architecture Component?

Пример сценария для Вопроса 2:

Теоретически библиотека навигации поддерживает любую архитектуру, которую вы, возможно, захотите использовать. Из коробки он может обрабатывать действия и фрагменты в качестве направлений навигации, но вы можете подключить свое собственное решение, внедряя свой собственный Navigator (например, см. Эту статью).

Какова моя деятельность на самом деле?

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

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

Подводя итог и непосредственно отвечая на ваши два вопроса:

Компонент архитектуры навигации не “предназначен для устранения необходимости использования нескольких видов деятельности” как таковой, но он рекомендует Google, когда вы его используете.

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

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

голоса
Рейтинг статьи
Ссылка на основную публикацию
Статьи c упоминанием слов: