ВВЕДЕНИЕ 3
1 КОНЦЕПЦИЯ ПРОГРАММНОГО РЕШЕНИЯ 5
1.1 Описание проекта решения 5
1.2 Обзор распознаваемых элементов интерфейса 8
1.3 Архитектура программного решения 12
2 РАСПОЗНАВАНИЕ ЭЛЕМЕНТОВ ИНТЕРФЕЙСА 14
2.1 Выбор подхода и модели распознавания 14
2.2 Подготовка и обучение модели 17
2.3 Постобработка результатов распознавания 20
3 СОЗДАНИЕ АДАПТИВНОЙ ВЁРСТКИ 23
3.1 Выбор разметки 23
3.2 Алгоритм размещения 24
3.3 Проблема ложных ограничений 27
4 СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ ИНТЕРФЕЙСА 28
5 ГЕНЕРАЦИЯ XML-КОДА 30
ЗАКЛЮЧЕНИЕ 32
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 33
ПРИЛОЖЕНИЕ
Современный процесс разработки Android-приложения состоит из нескольких немаловажных этапов. Неотъемлемой частью разработки мобильного приложения является создание пользовательского интерфейса, так как отношение пользователя к приложению зависит первоначально от внешнего вида UI-интерфейса. Ошибки в пользовательском интерфейсе могут привести к снижению производительности приложения, а также к отказу пользователей от работы с ним [1].
По данным замеров, проведённых в существующем приложении компании FlatStack, написание xml-кода пользовательского интерфейса занимает по 120-180 минут на каждую новую страницу сложности ниже среднего, без учёта функционала и бизнес-логики. В среднем, в популярных приложениях, таких как Instagram, Telegram, Vkontakte и так далее, разработчику необходимо создать от 15 до 20 и более окон на одно приложение, что в сумме займёт более 40 часов, при условии, что все экраны имеют сложность ниже среднего. Стоит заметить, что это время прямо пропорционально сложности каждого окна приложения.
На текущий момент процесс создания вёрстки является стандартным и состоит в построении в xml-формате зарезервированных библиотекой ключевых слов и параметров к ним на основе дизайна, который в основном находится на платформах Sketch, Figma и Adobe XD [2].
Все необходимые для разработки пользовательских интерфейсов данные описаны в файлах графических редакторов, однако разработчику приходится тратить более часа, в зависимости от количества элементов и сложности их размещения, на ручной перенос данных одного экрана в xml-формат, понятный для системы Android. Время разработки сокращается при наличии инструмента, создающего пользовательский интерфейс на основе дизайна в автоматическом режиме.
Целью данной работы является создание инструмента, позволяющего на основе дизайна редактора Figma автоматически генерировать xml-код пользовательского интерфейса для Android-приложений.
Были поставлены следующие задачи, выполнение которых необходимо для достижения цели:
• реализовать сбор данных, описывающих пользовательский интерфейс;
• обучить модель нейронной сети для корректного распознавания элементов дизайна;
• разработать алгоритм размещения распознанных элементов в вёрстке, адаптированной для экранов разного размера, с минимальным уровнем вложенности элементов;
• разработать модуль стилизации распознанных объектов на основе дизайна;
• реализовать генерацию xml-файла, описывающего вёрстку пользовательского интерфейса Android-приложений.
В результате выполнения данной дипломной работы был реализован программный инструмент, позволяющий автоматически генерировать xml-код пользовательского интерфейса для Android-приложений на основе дизайна сервиса Figma.
Для достижения поставленной цели были выполнены следующие задачи:
• реализован сбор данных, описывающих пользовательский интерфейс;
• обучена модель нейронной сети для корректного распознавания элементов дизайна;
• разработан алгоритм размещения распознанных элементов в вёрстке, адаптированной для экранов разного размера, с минимальным уровнем вложенности элементов;
• разработан модуль стилизации распознанных объектов на основе дизайна;
• реализована генерация xml-файла, описывающего вёрстку пользовательского интерфейса Android-приложений.
Разработанное программное решение позволит сократить трудозатраты на реализацию пользовательских интерфейсов Android-приложений.
Результаты выполнения данной выпускной квалификационной работы опубликованы в открытом доступе в репозитории GitLab и доступны по ссылке: http ://gititis.kpfu.ru/ILMAZ 13/EasyXML.
