CC BY
6
УДК 004.021
Гуртовцев Н.В. студент 2 курса
факультет информационных систем и технологий Поволжский государственный университет телекоммуникаций и информатики научный руководитель: Стефанов М.А.
доцент Россия, г. Самара
ОСОБЕННОСТИ РЕАЛИЗАЦИИ НАВИГАЦИОННОГО МЕНЮ НА ЯЗЫКЕ ПРОГРАММИРОВАНИЯ KOTLIN ПОД ОС ANDROID
Аннотация:
В статье рассматривается один из способов реализации навигационного меню на языке программирования Kotlin под OC Android на примере мобильного приложения Instagram.
Ключевые слова:
Меню, Android, Kotlin, интерфейс, навигация, обработчик, программирование
Gurtovtsev N. V.
Faculty of Information Systems and Technologies Volga State University of Telecommunications and Informatics
Russia, Samara Scientific adviser: Stefanov M.
FEATURES OF THE IMPLEMENTATION OF THE NAVIGATION MENU IN THE KOTLIN PROGRAMMING LANGUAGE UNDER THE
ANDROID OS
Annotation:
The article discusses one of the ways to implement the navigation menu in the Kotlin programming language under Android OC using the example of the Instagram mobile app.
Keywords:
Menu, Android, Kotlin, interface, navigation, handler
Введение
На сегодняшний день смартфоны присутствуют практически во всех сферах человеческой деятельности. Различные приложения помогают людям и делают нашу жизнь проще. За годы существования мобильной платформы Android подход к созданию пользовательского интерфейса менялся множество раз. Для того, чтобы создать эффективно работающий интерфейс, нужно хорошо знать особенности мобильных приложений, уметь разбираться в их структуре и функциональности.
Главный экран является неотъемлемой частью любого приложения. В контексте мобильных приложений это основной экран, с помощью которого
пользователи взаимодействуют с большинством опций приложения. Домашний экран является отправной точкой пользовательского путешествия, поэтому он часто включает в себя элементы навигации, обеспечивающие доступ к разным разделам приложения.
Чтобы упростить процесс взаимодействия для пользователей часто помещают на экранах меню, которое содержит список возможных действий и направлений, куда пользователь может попасть за один клик. Существует два варианта представления меню в мобильных приложениях: меню может быть частью главного экрана или занимать отдельный экран.
Навигационное меню в виде вкладок — это отличное решение для приложений с относительно небольшим количеством приоритетных вариантов навигации — до пяти штук. Панель открывает доступ к основным функциям с помощью одного нажатия, и пользователь может быстро переключаться между ними.
Из достоинств навигационного меню можно подчеркнуть:
• панель вкладок легко передает текущее положение пользователя в приложении — если правильно подобрать визуальные сигналы — значки, иконки и цвета;
• панель вкладок устойчива. Навигация остаётся в поле зрения независимо от того, какую страницу просматривает пользователь. Он ясно видит все основные функции приложения и имеет доступ к ним одним щелчком;
• Если панель расположена внизу экрана, ей удобно пользоваться, когда устройство держат одной рукой;
Возьмем за пример приложение Instagram с удобным навигационном меню. В подготовленном ниже материале будет показан один из способов реализации такого меню (см. рис. 1)._
С Q г>
» 22 Likes
username Him «marmad
I СИ Q @ 9 A I A Q ф » Д
Рис. 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).
Рис. 4 — структура проекта Создадим главный файл разметки, в котором будут экраны сменять друг друга (см. рис. 5).
Рис. 5 —Необходимые файлы разметки Файл разметки аСхуйу_тат содержит в себе линейный компоновщик элементов внутри которого содержатся иконки, при нажатии на которые будут происходить переходы на другие экраны (см. рис. 6). Это осуществляется посредством обработчиков событий.
Рис. 6 — Разметка главного экрана Пустая область над навигационным меню служит контейнером для экранов.
Используем иконки в формате SVG. Это позволит сделать пользовательский интерфейс адаптивным (см. рис. 7).
camera лт1 CQmment.xml heart, xml home.xml humansjiml likejiml ,, icon_replaiyjiml ,1 icon_searchj(ml о icon_starjiml
Рис. 7 — Ресурсы проекта Организация переходов между экранами
Структура класса ActivityMain.kt (см. рис. 8).
ScreenHome
1, Irome.xml
ScreenSearch
¡tem.xmL
Sere en Camera
[ camera.kt
Sc re e n N otifi cation s
notificatrans.kt
SereenAccount
( accourt.k:
Рис. 8 — Структура класса ActivityMain.kt
Файл MainActivity.kt - главный файл с кодом. При запуске приложения выполняется следующий пошаговый алгоритм:
1. Создание объектов всех экранов - на этой стадии создаются все объекты класса Screen;
2. Создание делегата для обработки события onBackPressed - Для того, чтобы кнопка смартфона Back работала правильным образом все открываемые пользователем экраны, сохраняются в специальный список.
При добавлении элемента происходит проверка на наличие, т.к. элементы не должны повторяться;
3. Привязка обработчика событий на иконку навигационного меню -на этом шаге в цикле для каждой иконки создается обработчик событий нажатия. Занося все экраны в правильном порядке в массив можно по индексу цикла понять при каком нажатии какой экран необходимо открывать.
Лента событий
Структура класса НотеБсгееп.Й (см. рис. 9).
Screen Home, kt
ScreeriHome
hornexrnl
Record
item.xrnl
Рис. 9 — Структура класса HomeScreen.kt
Файл HomeScreen.kt (в Kotlin можно создавать несколько классов в одном файле) отвечает за заполнение главного экрана. Заполнение происходит по следующему алгоритму:
1. Создание структуры данных - на этом шаге описывается класс Record, который отвечает за хранение пользовательской информации(количество лайков, имя и изображение);
2. Заполнение структуры данных - это шаг на котором мы создаём объекты класса Record и записываем их в массив.
3. Отображение информации - после чего остаётся отобразить созданные графические объекты на экране. Делается это с помощью цикла по всем объектам класса Record. В каждый объект класса Fragment передаем созданную на предыдущем шаге структуру данных Record.
Лента событий представляет собой список с элементами. Каждый элемент списка описывается сущностью Fragment и файлом разметки item. Объект класса Fragment перед добавлением не очищает содержимое контейнера.
Файл разметки элемента списка (item.xml) включает в себя картинку с изображением и элементы управления для пользователя.
Файл разметки home.xml содержит пустой список, который будет заполняться при начале работы приложения динамически. Т.к. элементов списка может быть неограниченно много (сколько позволяет оперативная память), то необходимо добавить возможность прокрутки. Делается это с помощью ScrollView (см. рис. 10).
Username
VW Л
22 Likes
Рис. 10 — Главная страница приложения
Заключение
Помощь пользователям в навигации должна быть в высоком приоритете практически для любого сайта или приложения. Цель удобной навигации — создание системы взаимодействия, которая естественным путем сочетается с ментальными моделями пользователей.
В результате работы было реализовано навигационное меню, как в Instagram, и полностью рабочий экран с лентой новостей.
Простые сценарии поведения пользователей, четкая графика и визуальные подсказки создают иллюзию того, что способности пользователя способствуют гладкому и удобному взаимодействию с приложением. Чем проще продукт в использовании, тем вероятнее, что его будут использовать. Ссылка на готовый проект: https:// goo.gl/nWNNGA
Использованные источники:
1. Диана Сиддикви. Дизайн мобильного интерфейса - основные типы экранов [электронный ресурс]. URL: https://freelance.today/poleznoe/dizayn-mobilnogo-interfeysa-osnovnye-tipy-ekranov.html
2. Основы мобильной навигации [электронный ресурс]. URL: https://vc.ru/flood/24327-navigationpatterns
3. Идеальное меню для мобильных приложений [электронный ресурс]. URL: https://ux.pub/idealnoe-menyu-dlya-mobilnyx-prilozhenij
4. Александр Момотов. Как подготовить макет интерфейса мобильного приложения к передаче в разработку? [электронный ресурс]. URL: https://designpub.ru/как-подготовить-макет-интерфейса-мобильного-приложения-к-передачи-в-разработку-50ec94c2f039
