Улучшите систему дизайна вашего приложения
Jetpack Compose — это новый набор инструментов пользовательского интерфейса для Android, в котором мы можем создавать компоненты с помощью кода и избегать создания XML-файлов, благодаря этому Compose более интуитивно понятен, ускоряет процесс разработки и является очень мощным инструментом для создания сложных проектов с минимальными затратами. усилие.
Одним из самых важных моментов при разработке UI является создание нашего Theme, по умолчанию Android использует Material Design (последняя версия — Material You). Когда мы создаем проект Android с помощью Jetpack Compose, у нас есть папка с именем ui с темой, цветами, формами и типографикой, которая внутренне использует компонуемый MaterialTheme.
Основываясь на моем собственном опыте работы с Design System в большом проекте, мы предприняли следующие шаги, чтобы создать собственную Themeи обеспечить поддержку пользовательских компонентов.
1. Определение цветов, шрифтов и форм
Цвета
Первое, что нужно сделать, это создать наши цвета, мы можем получить цвета от команды UI/UX, но если у нас нет специальной команды для определения этих цветов, мы можем определить наши собственные цвета в файле. Когда у нас будут готовы цвета, нам нужно создать класс, который обрабатывает наши цвета и цвета материалов, поэтому мы создадим класс CustomColors.
Шрифты
Шрифты легко настроить, нам нужно только создать класс Typography, но всегда хорошо, что мы можем создавать дополнительные классы для повторного использования кода в основном классе нашего шрифта. Очень важно помнить, что нам нужно иметь определение всех наших вариаций с точки зрения размеров текста, таких как h1, h2, body и т. д.; потому что мы будем повторно использовать его внутри класса Typography.
Фигуры
Здесь нам не нужно слишком много настраивать, нам просто нужно создать наш класс Shapes и все.
2. Создание поставщика
Вероятно, это самая важная вещь для создания пользовательской темы, потому что мы будем использовать CompositionLocal, который является опцией, при которой мы можем неявно передавать данные через композицию.
В общем, все данные передаются сверху вниз по дереву пользовательского интерфейса как своего рода глобальная конфигурация. В нашем случае будет полезно неявно отправлять собственные цвета и использовать их в нашей пользовательской теме для всего приложения.
3. Создание темы (светлый/темный режим)
И последнее, но не менее важное: нам нужно собрать все части нашего кода, чтобы наш CustomTheme компонуемый работал во всех наших пользовательских компонентах, поэтому мы создадим цвета для светлого и темного режимов, которые будут меняться в зависимости от конфигурации телефона.
С помощью описанных выше шагов мы можем простым способом создать нашу пользовательскую палитру цветов и, наконец, собрать нашу тему, в обязанности которой будет входить цвета, типографика и формы для всего приложения, также мы можем избежать использования всегда MaterialTheme и используйте CustomTheme.
Некоторые детали, которые не были упомянуты в этом посте, заключаются в том, что для определения цветов мы (моя команда) используем токены для более семантического именования, этот процесс является частью команды UI/UX, поэтому мы можем заменить значение токенов. не затрагивая наши имена цветов, другой момент заключается в том, что функция debugColors — это просто компонуемая функция, которая возвращает класс Colors с цветами по умолчанию MaterialTheme, чтобы обеспечить поддержку встроенных компонентов из библиотеки дизайна материалов.
Я надеюсь, что этот пост поможет вам определить вашу тему и улучшит вашу работу с системой дизайна.
