Иконки в 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 IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}

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

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

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}

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

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