Android-приложение на Compose с нуля: Часть 1 (Прототипирование)
В цикле статей рассмотрим разработку Android-приложения с использованием современной библиотеки для создания UI, а именно Jetpack Compose. Минимум «воды», максимум полезной информации.
Коротко о техническом задании:
Разрабатывать будем одноэкранный калькулятор с основными математическими операциями (всего их будет 7). Из уникальных возможностей будет переключение темы внутри приложения, да в общем то и всё ;)
Из стандартных требований:
Сохранение введённого пользователем математического выражения при повороте экрана / сворачивании приложения;
Поддержка светлой / тёмной темы;
Отсутствие лагов при отрисовки UI;
Отсутствие ошибок при работе приложения (100% Crash-free rate);
Уведомление пользователя о некорректных математических операциях (например, деление на 0).
Немного о UI и дизайн-системе:
Ниже представлен красивый (субъективно, конечно) пользовательский интерфейс приложения.
Темная тема VS Светлая тема
С точки зрения дизайн-системы у нас есть два вида кнопочек (круглая и овальная), текстовое поле, а также уникальная (куда без этого) кнопка переключения темы приложения.
Цветовая схема, согласно Material 2, следующая:
А какой вариант нравится Вам?)
В качестве основного шрифта выбран Exo, бесплатен для личного и коммерческого использования. Используемые виды начертания — Regular & Medium, а размеры — 20, 24 и 34.
Архитектура — наше всё:
В рассматриваемом проекте будем использовать архитектуру MVI (Model-View-Intent).
Для примера, к Event относится ввод данных, а к Action отображение диалогового окна
Решение будет кастомное, без использования готовых библиотек (например, «MVICore» от Badoo или «Moko-MVVM» от IceRock):
Для сокращения лишних рекомпозиций — паттерн «Single State» (все данные для отображения хранятся в одном data class’е);
Для обработки действий пользователя — sealed класс Event, а для уведомлений пользователя об ошибках — sealed класс Action;
Для сохранения состояния приложения — ViewModel;
Все расчёты мат. выражений выносим в отдельный Repository (привет, Clean Architecture).
Все вышеописанные подходы основываются на принципах — KISS (делай просто), DRY (не повторяйся), YAGNI (не используй лишнего).
Набор библиотек также стандартный:
Jetpack Compose + Activity — для UI (User Interface);
Hilt — для DI (Dependency Injection);
Lifecycle — для VM (View Model).
В качестве основного языка программирования безусловно используем любимый Kotlin.
И хотя навигация в проекте не предусмотрена (экран один), а в основе лежит Compose, стоит упомянуть, что будем использовать подход «Single Activity».
В следующей статье:
Рассмотрим структуру проекта и спроектируем дизайн-систему, а также создадим UI и добавим в него интерактивности.
Финальный аккорд:
Благодарю за внимание!
Пишите Ваши комментарии, ставьте плюсы / минусы, кому что нравится ;)
