Создайте плавающую кнопку действия (FAB)

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

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

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

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

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

Совместимость версий

Для этой реализации требуется, чтобы для minSDK вашего проекта был установлен уровень API 21 или выше.

Зависимости

Котлин 

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

классный 

  implementation platform('androidx.compose:compose-bom:2025.01.01')

Создайте базовую плавающую кнопку действия

Чтобы создать общую кнопку с плавающим действием, используйте базовый составной элемент FloatingActionButton : 

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

Результат

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

Создайте небольшую плавающую кнопку действия

Чтобы создать небольшую плавающую кнопку действия, используйте составной объект 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, содержащая значок «добавить».
Рисунок 2. Маленькая плавающая кнопка действия.

Создайте большую плавающую кнопку действия

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

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

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

Результат

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

Создайте расширенную плавающую кнопку действия

Вы можете создавать более сложные плавающие кнопки действий с помощью составного элемента 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, которая отображает текст с надписью «расширенная кнопка» и значок редактирования.
Рисунок 4. Плавающая кнопка действия с текстом и значком.

Ключевые моменты

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

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

z## Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

Узнайте, как компонуемые функции позволяют легко создавать красивые компоненты пользовательского интерфейса на основе системы дизайна Material Design.
Сборник кратких руководств

Есть вопросы или отзывы

Перейдите на нашу страницу часто задаваемых вопросов и узнайте о кратких руководствах или свяжитесь с нами и сообщите нам свои мысли.
Перейти к часто задаваемым вопросам Оставить отзыв