Значки в Jetpack Compose Glimmer

Поддерживаемые 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 для значка. Всегда добавляйте описания, если только значок не является чисто декоративным.