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

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

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

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

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

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

API surface

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

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

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

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

@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-функция не сильно отличается от других примеров, за исключением того, что она приводит к увеличению кнопки.

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

@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