Как сделать приложение навигатор
В этом уроке на практике познакомимся с библиотекой Navigation Architecture Component , которая позволяет пользователям перемещаться между различными частями контента в вашем приложении. Компонент навигации входит в набор компонентов Android Jetpack и помогает реализовать навигацию, от простых нажатий кнопок до более сложных шаблонов, таких как панели приложений (appbars) и панель навигации (navigation drawer). Компонент навигации также обеспечивает согласованное и предсказуемое взаимодействие с пользователем, придерживаясь установленного набора принципов, о которых мы говорили на прошлом уроке.
Введение
Navigation Architecture Component упрощает осуществление навигации, а также помогает визуализировать navigation flow вашего приложения. Библиотека предоставляет ряд преимуществ, в том числе:
В этом уроке нам понадобится среда разработки Android Studio версии 3.3 или выше.
Мы будем использовать готовый проект, в котором уже есть необходимые активити или фрагменты. Нам нужно настроить навигацию в приложении, используя Navigation Architecture Component.
Скачайте стартовый проект по ссылке
Обзор компонента навигации
Компонент навигации состоит из трех ключевых частей:
Мы используем объект NavController, сообщая ему путь в ресурсе Navigation Graph. Затем объекту NavController будет показан соответствующий пункт назначения в NavHostFragment.
Давайте посмотрим, как это выглядит на практике, начиная с нового ресурса Navigation Graph.
Destinations
Navigation Graph
Navigation Graph представляет собой новый тип ресурса , который определяет все возможные пути, доступные пользователю в приложении. Он показывает визуально все пункты назначения, которые могут быть достигнуты из данного пункта назначения. Редактор навигации Android Studio отображает Navigation Graph наглядно.
Редактор навигации
Navigation Graph показывает доступные пункты назначения. Стрелки между пунктами назначения называются actions (действия). Больше мы поговорим о них позже.
- Нажмите на пункт назначения, чтобы увидеть его атрибуты.
- Нажмите на любое действие, представленное стрелкой, чтобы увидеть его атрибуты.
Анатомия навигационного XML-файла
Все изменения, которые вы делаете в графическом редакторе навигации, изменяют базовый XML-файл, подобно тому, как редактор макетов изменяет XML-макет.
Перейдите на вкладку « Текст »:
Вы увидите такой XML-код:
< navigation xmlns : android = "http://schemas.android.com/apk/res/android"- <navigation> является корневым узлом каждого навигационного графа.
- <navigation>содержит один или несколько пунктов назначения, представленных элементами <activity>или <fragment>.
- app:startDestination является атрибутом, который указывает место назначения, которое запускается по умолчанию, когда пользователь впервые открывает приложение.
Давайте посмотрим на место назначения фрагмента:
android : name = "com.example.android.codelabs.navigation.FlowStepFragment"- android:id определяет идентификатор для фрагмента, который вы можете использовать для ссылки на место назначения в другом месте этого XML и вашего кода.
- android:name объявляет полное имя класса фрагмента для создания экземпляра при переходе к этому месту назначения.
- tools:layout указывает, какой макет должен отображаться в графическом редакторе.
Некоторые теги <fragment> также содержат <action>, <argument>,и <deepLink>, все это мы рассмотрим позже.
Пример приложения уже содержит несколько пунктов назначения на графике. Давайте мы добавим новое назначение.
Примечание . Код для каждого шага в этой кодовой метке включен, закомментирован между операторами TODO в загруженном вами коде.
Вы должны сравнить код, который вы пишете, с включенным закомментированным кодом.
- Откройте res/navigation/mobile_navigation.xmlи выберите вкладку « Дизайн».
- Нажмите значок « Новый пункт назначения»и выберите «settings_fragment»
Результатом является новое назначение, которое отображает предварительный просмотр макета фрагмента в окне конструктора.
Обратите внимание, что вы также можете редактировать XML-файл напрямую, чтобы добавить места назначения: mobile_navigation.xml
android : name = "com.example.android.codelabs.navigation.SettingsFragment"Чтобы следовать нашему соглашению об именах, измените идентификатор settings_dest на значение по умолчанию settingsFragment.
Активити и навигация
Компонент «Навигация» следует указаниям, изложенным в « Принципах навигации» . Принципы навигации рекомендуют использовать Активити в качестве точек входа для вашего приложения. Активити также будут содержать глобальную навигацию, такую как bottom nav (нижняя панель навигации). А для конкретного места назначения мы будем использовать фрагменты.
Пример этого кода можно найти в res/layout-470dp/navigation_activity.xml:
android : name = "androidx.navigation.fragment.NavHostFragment" < com . google . android . material . bottomnavigation . BottomNavigationViewNavController
Наконец, когда пользователь делает что-то вроде нажатия кнопки, вам нужно запустить команду навигации. Нам поможет специальный класс NavController, который управляет фрагментами в NavHostFragment.
findNavController ( ) . navigate ( R . id . flow_step_one_dest )Обратите внимание, что вы передаете либо destination , либо action ID для навигации. Это идентификаторы, определенные в графе навигации XML. Это пример передачи destination ID.
NavController мощный инструмент, потому что когда вы вызываете методы типа navigate() или popBackStack(), он переводит эти команды в соответствующие операции фреймворка в зависимости от типа пункта назначения, к которому вы переходите. Например, когда вы вызываете navigate() с места назначения активити, NavController вызывает startActivity() от вашего имени.
Есть несколько способов получить объект NavController, связанный с вашим NavHostFragment. В Kotlin рекомендуется использовать одну из следующих функций расширения в зависимости от того, вызываете ли вы команду навигации из фрагмента, активити или view-компонента:
Ваш NavController ассоциируется с NavHostFragment. Таким образом, какой бы метод вы ни использовали, вы должны быть уверены, что идентификатор фрагмента, активити или view либо собственно NavHostFragment либо имеет NavHostFragment в качестве родителя. В противном случае вы получите IllegalStateException.
Перейдите к месту назначения с помощью NavController
Подключим кнопку Navigate To Destination , чтобы перейти к пункту назначения flow_step_one_dest (который является пунктом назначения FlowStepFragment):
Попробуем, пользуясь официальным руководством и примерами кода, построить работающую систему навигации для будущего многоэкранного приложения в соответствии со стандартами Navigation Architecture Component. Статья включает следующие разделы:
Часть 1. Подготовительные работы
1.1. Создание проекта
Нам понадобятся базовые знания Котлина, 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, но в будущем ситуация может измениться. Проверить, какие версии библиотек являются актуальными, можно здесь.
Фрагменты — это «страницы» нашего будущего приложения. Кликнув правой кнопкой на каталоге с файлами классов, командой «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) на указанный адрес.
Проверим, как работают наши кнопки.
Одна кнопка — одна строчка кода — и клик по кнопке перемещает нас к указанному фрагменту. Просто, не так ли?
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-приложении, многие детали реализации были умышленно оставлены за кадром.
Мой график работы обычно не позволяет поддерживать дискуссии, но Ваши комментарии в любом случае будут полезны для посетителей сайта и потому всегда приветствуются.
В маленьком городе очень просто запомнить расположение улиц и проспектов. А как представишь карту крупного и тем более незнакомого мегаполиса, становится действительно страшно. Благо на сегодняшний день существует множество GPS навигаторов, которые не дадут туристу потеряться в новом городе. В последнее время водители все чаще используют свои планшеты как помощника на дороге: так намного удобнее и дешевле, чем покупать отдельное приспособление. Как превратить планшет в навигатор, читайте ниже.
Процесс трансформации
Что такое навигатор? Это помощь в случае проблем с ориентировании в городе или за ним. Такой технологии не важно, идем мы пешком или передвигаемся на машине. А вообще, можно ли использовать планшет в качестве такой новомодной карты? Да, конечно можно. Самое главное, чтобы в устройстве была функция навигации.
Инструкция
Включаем планшет и смотрим настройки приложений. Видите пункт “Местоположение”? Отлично, теперь нажимаем и переходим к “Спутникам GPS”. Если все это присутствует в устройстве, значит ваш планшет может функционировать как навигатор. Для его полноценной работы, скачайте такие популярные приложения, как Гугл и Яндекс карты. В них можно загрузить карту любого города, да и вообще, эти гиганты навигации будут понятны любому пользователю.
Если выбор пал на Google Maps
После запуска, нужно указать ваше местоположение. На этом этапе придется скачать много файлов, поэтому будет разумнее подключится к Wi-fi, чем тратить трафик с сим - карты.
Это приложение по навигации очень ценится опытными водителями. Ведь можно указать точку А (начало) и B (конец), а программа самостоятельно проложит вам несколько вариантов проезда. Чтобы выбрать наиболее удобный и оптимальный маршрут, выставите время, которое вы хотите потратить. Определились? Теперь можно приблизить фрагменты карты и во всех деталях рассмотреть ваш путь.
Если планшет поддерживает навигацию
На самом деле ничего страшного в этом нет. Да, эта проблема настигла вас в самом начале статьи, однако все не так уж плохо. Чтобы не заплутать в путешествии, мы сами установим навигационные карты из App Store или Play Market. А дальнейшая инструкция уже описана выше.
Кроме уже рассмотренных Google Maps можно отметить следующие приложения в сфере навигации:
- Яндекс карты, которые ни в чем не проигрывают своему аналогу от Google. Интерфейс программы очень прост, ко всему прочему для вас рассчитают километраж и покажут загруженность дорог.
- Navitel Navigator. Приложение привлекает водителей хорошей прорисовкой карт и точной навигацией. Navitel рассчитан на путешествия не только по России, но и Европе и странам СНГ. Отзываются об этой программе так: “приведет куда нужно”.
- Sygic GPS Navigator, за работу которого придется заплатить. Однако после их приобретения вы получаете в свое владение множество карт и возможность их постоянного обновления. Так же разрешено скорректировать интерфейс программы для удобства пользования.
- Maverick GPS Navigation может похвастаться своим умением работать с оффлайн картами. Так же вам покажут вашу скорость движения и быстро вычислят координаты.
Итак, это все наиболее популярные приложения, установив которые вы с легкостью будете использовать планшет в качестве навигатора. А какое устройство лучше всего подойдет для это цели, читайте ниже. Кстати, если вы хотите выбрать устройство самостоятельно, то помните, что в планшет обязательно должно быть встроен GPS-модуль.
Какой планшет для навигации можно приобрести:
- Samsung Galaxy TAB 2 10.1 GT-P5100 Titanium Silver. Это устройство включает в себя качественные динамики, приятный дизайн и быстроту в работе. На такое устройство можно не только карты качать, но и фильмы, а после чего смотреть их всей семьей.
- FreeLander PD20, бюджетный вариант для покупки планшета. Так же хочется отметить долгое время автономной работы устройства и быстроту при поиске спутников. Для водителей эта модель безупречна.
- Superpad Flytouch 4 3G. Его преимущества - большой объем оперативной памяти, функция мультитач и мощность процессора. Такой планшет потянет множество приложений, фильмов и музыки.
- Digma iDn7 3G. В комплекте к этому устройству вы найдете специальное крепление для установки планшета в машине. Так же он поддерживает большинство Яндекс приложений, которые отлично функционируют между собой. Таким образом, вы сможете узнать новейшую информацию о пробках во время движения.
- Treelogic Gravis 72G 8Gb. Модель обладает навигационным модулем и антенной, которые с максимальной точностью обрабатывают данные со спутника. В планшет автоматически установлена программа “Navitel Navigator”. Так же вас порадуют обширные мультимедийные функции устройства.
Преимущества и недостатки планшета - навигатора
- Размер дисплея. У навигаторов экран намного меньше, а наибольшая диагональ экрана существенно облегчит работу с навигационными приложениями. То есть будет проще приближать фрагменты карты и нажимать на иконку в меню.
- Возможность выхода в Интернет. С помощью такой функции планшета вы сможете узнать о пробках, посмотреть время работы любого магазина или кинотеатра, а так же уточнить и скорректировать маршрут во время поездки.
- Мощный процессор, позволяющий как можно быстрее скачивать и устанавливать карты. При чем на планшет без проблем можно загрузить множество игр и фильмов. Тормозить при такой нагрузке устройство не будет.
- Долгая работа аккумулятора. Навигаторы явно проигрывают планшетам в этом пункте. Во время путешествия удобство на первом месте. А если навигатор быстро сядет, то придется постоянно останавливать и заряжать его.
- Большой выбор приложений для ориентирования. Водитель может быстро скачать из Интернета любое понравившуюся программу, а в навигаторе такая возможность отсутствует.
- Нет крепления. В автомобиле не существует специальной подставки под планшет, поэтому нужно будет искать его в магазинах, так как бкз него обходится крайне неудобно.
- Слабый модуль GPS у более дешевых планшетов, и, следовательно, слабый сигнал спутника. Однако, если вы приобрели дорогой и качественный планшет, то эта проблема вас никак не затронет. Да, выйдет не совсем бюджетно, но за эти деньги вы покупаете не только планшет, но и большой функционал.
- Многих водителей не устраивает широкий экран планшета, мешающий полноценному обзору. Для этого тщательно продумайте, где лучше закрепить устройство во избежании такой проблемы.
Безусловно, каждому свое. Но можно подвести итог: планшеты могут заменить навигаторы. Запомните, выбирайте качественное устройство, не экономьте на себе. В последствии из-за китайского аналога вы можете заблудиться и долго искать путь обратно.
В CarWebGuru добавлена поддержка трех программ навигации: Google Maps, Yandex Navigator, Yandex Maps. Это выглядит следующим образом.
Виджет навигации добавлен в нескольких темах: Mediabox, Road, Curve, Range и стандартном мультивиджете.
Как использовать?
1) Открываем навигатор
2) Задаем маршрут (вариант на автомобиле)
3) возвращаемся в CarWebGuru
После этого CarWebGuru будет отображать ведение по маршруту (для следующего маневра). А голосовые команды будут идти от самого навигатора. Во многих ситуация это довольно удобно, особенно если вам не нужно полноценная карта.
Данная функция работает начиная с андроид 5 и выше. На 4.4 к сожалению, не работает.
Данная версия доступна на маркете (только как бета версия), также скачать APK можно тут. CarWebGuru 2.67 R16
Удачи! Помним о безопасности, на дороге и за рулем программы не тестируем, безопасность превыше всего.
Программа автоматически определит активный, запущенный навигатор и будет показывать команды от него.
Если вы знаете хороший популярный навигатор, который выводит иконку с маршрутом в системную панель уведомлений, то пишите. Я добавлю его поддержку в программу.
Дополнение 24.10.2018
Отвечая на вопросы, понял что нужно показать как выглядит "хороший" навигатор и "плохой" навигатор. В смысле конечно для CWG что должно выводится в статус строке чтобы было полезно.
Читайте также: