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

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

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

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

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

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

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

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

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

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

Чтобы создать общую плавающую кнопку действия, используйте базовый FloatingActionButton composable. Следующий пример демонстрирует базовую реализацию 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 composable. Ключевое отличие между ним и 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. Плавающая кнопка действия с текстом и значком.

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