Плавающая кнопка действия

Плавающая кнопка действия (FAB) — это кнопка с акцентом на действие, позволяющая пользователю выполнить основное действие в приложении. Она активирует одно конкретное действие, которое является наиболее распространённым вариантом действий пользователя, и обычно располагается в правом нижнем углу экрана.

Рассмотрим три варианта использования FAB:

• Создать новый элемент : в приложении для создания заметок FAB может использоваться для быстрого создания новой заметки.
• Добавить новый контакт : в приложении чата FAB может открыть интерфейс, позволяющий пользователю добавить кого-то в беседу.
• Центрировать местоположение : в интерфейсе карты FAB может центрировать карту относительно текущего местоположения пользователя.

В Material Design существует четыре типа FAB:

• FAB : Плавающая кнопка действия обычного размера.
• Маленькая FAB : небольшая плавающая кнопка действия.
• Большая FAB : большая плавающая кнопка действия.
• Расширенная FAB : плавающая кнопка действия, которая содержит больше, чем просто значок.

API поверхность

Хотя существует несколько компонуемых элементов, которые можно использовать для создания плавающих кнопок действий в соответствии с Material Design, их параметры не сильно отличаются. Среди ключевых параметров, которые следует учитывать, следующие:

• onClick : Функция вызывается, когда пользователь нажимает кнопку.
• containerColor : Цвет кнопки.
• contentColor : Цвет значка.

Плавающая кнопка действия

Для создания плавающей кнопки общего назначения используйте базовый компонуемый элемент FloatingActionButton . В следующем примере показана базовая реализация FAB:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

Эта реализация выглядит следующим образом:

Маленькая кнопка

Чтобы создать небольшую плавающую кнопку действия, используйте компонуемый элемент SmallFloatingActionButton . В следующем примере показано, как это сделать, добавив пользовательские цвета.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}
FloatingActionButton.kt

Эта реализация выглядит следующим образом:

Большая кнопка

Чтобы создать большую плавающую кнопку действия, используйте компонуемый элемент LargeFloatingActionButton . Этот компонуемый элемент ничем существенно не отличается от других примеров, за исключением того, что он создаёт кнопку большего размера.

Ниже представлена простая реализация большого FAB.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

Эта реализация выглядит следующим образом:

Расширенная кнопка

С помощью компонуемого объекта ExtendedFloatingActionButton можно создавать более сложные плавающие кнопки действий. Ключевое отличие от FloatingActionButton заключается в наличии отдельных параметров icon и text . Они позволяют создавать кнопки с более сложным содержимым, масштабируемым в соответствии с его содержимым.

В следующем фрагменте показано, как реализовать ExtendedFloatingActionButton , с примерами значений, переданных для icon и text .

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

Эта реализация выглядит следующим образом:

Дополнительные ресурсы

• Общие кнопки
• Документация по материальному пользовательскому интерфейсу