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

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

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

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

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

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

поверхность 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

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

Стандартная плавающая кнопка действия с закругленным углом, тенью и значком «Добавить».
Рисунок 2. Плавающая кнопка действия.

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

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

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

Реализация SmallFloatingActionButton, содержащая значок «добавить».
Рисунок 3. Маленькая плавающая кнопка действия.

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

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

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

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

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

Реализация LargeFloatingActionButton, содержащая значок «добавить».
Рисунок 4. Большая плавающая кнопка действия.

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

Вы можете создавать более сложные плавающие кнопки действий с помощью составного элемента 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

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

Реализация ExtendedFloatingActionButton, которая отображает текст с надписью «расширенная кнопка» и значок редактирования.
Рисунок 5. Плавающая кнопка действия с текстом и значком.

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