Переключатели в Jetpack Compose Glimmer

Поддерживаемые XR-устройства
Это руководство поможет вам создавать контент для таких устройств.
Подробнее о типах XR-устройств
Очки
Подробнее о типах XR-устройств

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

Используйте кнопки-переключатели, чтобы показывать действия, которые можно включить или отключить. В отличие от переключателей только со значками, кнопка-переключатель в основном содержит текст, хотя также поддерживает дополнительные значки.

В других случаях можно использовать стандартные кнопки и кнопки со значками.

Рисунок 1. Пример переключателя в Jetpack Compose Glimmer, используемого для действий воспроизведения и паузы в макете интерфейса.

Анатомия

Переключатель состоит из контейнера, который меняет состояние, и ярлыка с необязательными значками.

Часть Описание

Контейнер

Анимируется переход между кругом (не выбрано) и прямоугольником со скругленными углами (выбрано).

Label (Звукозаписывающая компания)

Обычно это компонуемый элемент Text.

Значки (необязательно)

Слоты в начале или конце, которые могут различаться в зависимости от штата.

Размеры

Как и стандартные кнопки, переключатели поддерживают два варианта размера:

Размер Минимальная высота По умолчанию для использования

Средний

48.dp

Размер интерактивного объявления по умолчанию.

Крупный

72.dp

Основные переключатели или переключатели с высоким приоритетом.

Настройки переключателей по умолчанию

По умолчанию переключатели используют значок ToggleButtonDefaults.animateShape. Это обеспечивает плавный переход между следующими состояниями:

Класс ToggleButtonColors управляет разрешением цвета для следующих состояний:

Анимация

Для переключателей по умолчанию используются следующие настройки анимации:

  • animateShape: предоставляет Shape, который интерполирует размеры углов с помощью спецификации пружинной анимации (stiffness = 600f).
  • colors – фабричная функция для настройки цветов фона и контента для обоих состояний.
  • CheckedShape – статический объект RoundedCornerShape(20.dp), используемый для состояния "Выбрано".
  • contentPadding: наследуется от ButtonDefaults.contentPadding.

Пример: переключатель

В следующем примере создается простой переключатель:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"

    ToggleButton(
        checked = checked,
        onCheckedChange = { checked = it }
    ) {
        Text(text)
    }
}

Пример: кнопка-переключатель с ведущим значком

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

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}