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

Плавающая кнопка действия – это кнопка с высоким приоритетом, позволяющая пользователю выполнить основное действие в приложении. Она предлагает пользователю выполнить одно основное действие, которое обычно совершается чаще всего. Как правило, плавающая кнопка размещается в правом нижнем углу экрана.

Рассмотрим три примера использования плавающей кнопки действия:

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

В Material Design есть четыре типа плавающих кнопок действий:

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

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

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

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

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

Чтобы создать обычную плавающую кнопку действия, используйте базовую composable-функцию FloatingActionButton. Ниже приведен пример базовой реализации плавающей кнопки действия:

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

Вот как это будет выглядеть:

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

Чтобы создать небольшую плавающую кнопку действия, используйте composable-функцию 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

Вот как это будет выглядеть:

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

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

Ниже приведен простой пример реализации большой плавающей кнопки действия.

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

Вот как это будет выглядеть:

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

Более сложные плавающие кнопки действий можно создавать с помощью composable-функции 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

Вот как это будет выглядеть:

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

• Распространенные кнопки
• Документация по Material UI