Android Academy · Урок

Цвета и MaterialTheme

Применяйте единообразную тему оформления.

Урок 4 из 413 шагов

«Цвета и MaterialTheme» — бесплатный урок Android Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 4 уроков всего.

Цвета в Compose

Compose представляет цвета с помощью класса Color. Доступны готовые значения, например Color.Red и Color.Blue.

Вы передаёте Color в такие параметры, как цвет текста или фон.

Text(
    text = "Hi",
    color = Color.Blue
)

Пользовательские значения цветов

Создайте любой цвет из шестнадцатеричного кода с помощью Color(0xFFRRGGBB). Первые две цифры, FF, означают полную непрозрачность.

Например, 0xFF6200EE — это фиолетовый цвет.

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

Цвет фона

Используйте модификатор background, чтобы закрасить область позади компонуемого элемента. Добавьте отступ, чтобы содержимое не касалось краёв.

Порядок имеет значение: background перед padding заполняет область отступа.

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

Что такое MaterialTheme?

MaterialTheme — это система, которая хранит цвета, шрифты и формы приложения в одном месте.

Компонуемые элементы получают данные из неё, поэтому всё приложение остаётся единообразным и его легко стилизовать заново.

MaterialTheme {
    Text("Themed app")
}

Цветовая схема темы

colorScheme темы предоставляет именованные роли, например primary, secondary и background.

Если обращаться к ним вместо фиксированных цветов, внешний вид можно изменить в одном месте.

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

Primary и onPrimary

У каждого основного цвета есть связанный цвет on для текста, отображаемого поверх него, например onPrimary.

Использование primary в качестве фона, а onPrimary в качестве цвета текста гарантирует хороший контраст.

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

Типографика темы

MaterialTheme также хранит стили текста в typography, например titleLarge и bodyMedium.

Передайте один из них в параметр стиля текста, чтобы размеры и оформление текста были единообразными.

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

Светлые и тёмные схемы

Вы можете создать схему с помощью lightColorScheme() или darkColorScheme() и передать её в MaterialTheme.

Переключение схем позволяет приложению поддерживать светлый и тёмный режимы.

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

Настройка схемы

Переопределяйте роли, указывая их имена при создании схемы. Здесь primary становится пользовательским бирюзовым цветом.

Все элементы, которые получают значение colorScheme.primary, обновляются автоматически.

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

Зачем нужна тема?

Жёстко заданные цвета по всему приложению усложняют редизайн. Получение цветов из MaterialTheme означает, что одно изменение обновит всё приложение.

Это также помогает обеспечить доступность: цвета on сохраняют хороший контраст.

Surface и фон

Компонуемый элемент Surface применяет к содержимому цвет фона темы и возвышение.

Это удобный способ задать правильный базовый цвет для карточки или экрана.

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

Быстрая проверка

Проверьте свои знания о цветах и темах.

Ответь в интерактивном уроке

Итоги

Вы научились использовать класс Color, пользовательские цвета в шестнадцатеричном формате и модификатор background. MaterialTheme объединяет colorScheme, typography и shapes.

Использование таких ролей, как primary и onPrimary, помогает сохранять хороший контраст и единообразие, а также поддерживать светлые и тёмные схемы.

Отличная работа — вы завершили курс по стилизации!

Можно начать бесплатно

Изучай Kotlin с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 36
Уроки: 152

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Цвета и MaterialTheme» бесплатный?

Да — полный текст урока «Цвета и MaterialTheme» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 4 уроков всего.

Чему я научусь в уроке «Цвета и MaterialTheme»?

Применяйте единообразную тему оформления. Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Android Academy?

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

Сколько времени занимает урок «Цвета и MaterialTheme»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Android Academy?

Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Android Academy