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

Плавающая кнопка действия (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. Плавающая кнопка действия, содержащая текст и значок.

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