Особенности реализации навигационного меню на языке программирования Kotlin под ОС Android

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

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

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

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

Из достоинств навигационного меню можно подчеркнуть:

• •    панель вкладок легко передает текущее положение пользователя в приложении — если правильно подобрать визуальные сигналы — значки, иконки и цвета;

• •    панель вкладок устойчива. Навигация остаётся в поле зрения независимо от того, какую страницу просматривает пользователь. Он ясно видит все основные функции приложения и имеет доступ к ним одним щелчком;

• •    Если панель расположена внизу экрана, ей удобно пользоваться, когда устройство держат одной рукой;

Возьмем за пример приложение Instagram с удобным навигационном меню. В подготовленном ниже материале будет показан один из способов реализации такого меню (см. рис. 1).

Рис. 1 — навигационное меню Instagram

Практическая часть

Для начала составим карту экранов . Карта экранов — это схема, которая отражает в себе все экраны приложения и все возможные переходы между ними (см. рис. 2):

Рис. 2 – карта экранов навигационного меню

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

Далее приступаем к разработке.

Необходимое программное обеспечение:

• •    Среда разработки Android Studio.

• •    Язык программирования Kotlin.

• •    Библиотека screen v1.3.

Первым делом нужно экспортировать и разложить по соответствующим папкам все использованные в макете иконки и иллюстрации в формате PNG для всех 6-ти плотностей экранов (mdpi, hdpi, xhdpi, xxhpdi, xxxhdpi) для Android. Также можно использовать SVG, тогда достаточно по одному файлу.

Обязательно все иконки и иллюстрации должны быть адекватно поименованы в соответствии с принципами (см. рис. 3):

• 1.    Только латиница.

• 2.    Вместо пробелов нижнее подчеркивание.

• 3.    Только нижний регистр.

Рис. 3 – карта экранов навигационного меню

• Проект состоит из 2-ух частей.

• 1.    Визуальное представление экранов

• 2.    Код работающий с привязкой данных к представлению.

Библиотека screen v1.3 позволяет привязать код к разметке. В Android SDK разметка пишется на языке XML. Главное с чем приходится работать — это сущность Screen(Экран). Для создания экрана необходимо знать где он находится, т.е родительский экран. Таким образом сущность экрана не означает весь экран, а лишь наличие родительского экрана (см. рис. 4).

V В, арр

• > I manifests

• > com.thekingames.navbar

• >    generatedJava

• >    El drawable

• >    El layout

• >    Ь values

• >    (•) Gradle Scripts

Рис. 4 — структура проекта

Создадим главный файл разметки, в котором будут экраны сменять друг друга (см. рис. 5).

Рис. 5 —Необходимые файлы разметки

Файл разметки activity_main содержит в себе линейный компоновщик элементов внутри которого содержатся иконки, при нажатии на которые будут происходить переходы на другие экраны (см. рис. 6). Это осуществляется посредством обработчиков событий.

Рис. 6 — Разметка главного экрана

Пустая область над навигационным меню служит контейнером для экранов.

Используем иконки в формате SVG. Это позволит сделать пользовательский интерфейс адаптивным (см. рис. 7).

Рис. 7 — Ресурсы проекта

Организация переходов между экранами

Activity Main.kt

Screen Home

I homexml

ScreenSearch v itenxml

Screencamera

Screen Notifications

. notificatiDnskt

• 1.    Создание объектов всех экранов - на этой стадии создаются все объекты класса Screen;

• 2.    Создание делегата для обработки события onBackPressed - Для того, чтобы кнопка смартфона Back работала правильным образом все открываемые пользователем экраны, сохраняются в специальный список. При добавлении элемента происходит проверка на наличие, т.к. элементы не должны повторяться;

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

Лента событий

ScreenHome.kt

ScreenHome

(hornexml

Record

| iternxml~|

• 1.    Создание структуры данных - на этом шаге описывается класс Record,   который   отвечает за хранение пользовательской

• 2.    Заполнение структуры данных - это шаг на котором мы создаём объекты класса Record и записываем их в массив.

• 3.    Отображение информации - после чего остаётся отобразить созданные графические объекты на экране. Делается это с помощью цикла по всем объектам класса Record. В каждый объект класса Fragment передаем созданную на предыдущем шаге структуру данных Record.

информации(количество лайков, имя и изображение);

Лента событий представляет собой список с элементами. Каждый элемент списка описывается сущностью Fragment и файлом разметки item. Объект класса Fragment перед добавлением не очищает содержимое контейнера.

Файл разметки home.xml содержит пустой список, который будет заполняться при начале работы приложения динамически. Т.к. элементов списка может быть неограниченно много (сколько позволяет оперативная память), то необходимо добавить возможность прокрутки. Делается это с помощью ScrollView (см. рис. 10).

Username

Рис. 10 — Главная страница приложения

Заключение

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

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

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

Ссылка на готовый проект: