Иконки в Jetpack Compose Glimmer

Применимые устройства XR
Данное руководство поможет вам создавать приложения для устройств XR такого типа.
Узнайте о типах устройств XR →
Очки для демонстрации
Узнайте о типах устройств XR →

В Jetpack Compose Glimmer компонент Icon представляет собой элемент пользовательского интерфейса для отображения одноцветных значков. Значки интеллектуально обрабатывают изменение цвета и масштабирование, чтобы оставаться читаемыми и визуально соответствовать теме GlimmerTheme .

Размеры

Хотя по умолчанию размер значков определяется параметром LocalIconSize , вы также можете использовать три предоставленных размера значков для установки конкретного размера. Эти размеры также используются по умолчанию в следующих контекстах:

Размер токена Использование по умолчанию

small

Для стандартных позиций в списке или мелких деталей.

medium

Для отдельных значков и заголовков.

large

Для элементов, на которые делается большой акцент, таких как карточки.

Источники иконок

Иконки могут принимать в качестве источника ImageVector , ImageBitmap или Painter . При определении собственных иконок по возможности используйте ImageVector , чтобы обеспечить четкое отображение в любом масштабе на экранах.

Цвет и тонирование

  • Автоматическое изменение цвета : Цвет значка определяется на основе LocalContentColor LocalContentColor предоставленного родительской поверхностью, например, surface или Button .
  • Ручная тонировка : используйте параметр tint , чтобы применить определенный цвет.
  • Многоцветные элементы : Для значков, которые не должны быть окрашены (например, многоцветные логотипы брендов), установите tint = Color.Unspecified .
  • Универсальные изображения : Для фотографий или универсальных изображений, которые не соответствуют правилам изменения размера и оттенка значков, используйте вместо них стандартный объект androidx.compose.foundation.Image .

Пример: Базовая иконка

Следующий код создает простую иконку: 

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}

Пример: Цветные иконки

Следующий код создает цветную иконку, используя основной цвет темы: 

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}

Пример: Иконки разных размеров

Следующий код создает значок, который изменяется до определенного размера: 

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}

Основные моменты, касающиеся кода.

  • Размер значка настраивается с помощью параметра GlimmerTheme.iconSizes с модификатором. Для значков значение по умолчанию — GlimmerTheme.iconSizes.medium . Используйте эти размеры вместо жестко заданных значений, чтобы обеспечить единообразие пользовательского интерфейса.
  • Предоставляет локализованное contentDescription для значка. Эти описания следует указывать всегда, если значок не является чисто декоративным.