Создайте плавающую кнопку действия (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

Результат

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

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

Результат

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

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

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

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

Результат

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

Вы можете создавать более сложные плавающие кнопки действий с помощью составного элемента 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 Design, их параметры не сильно отличаются. Среди ключевых параметров, на которые следует обратить внимание, можно выделить следующие:

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

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

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

Отображать интерактивные компоненты

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

Сборник кратких руководств

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

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

Перейти к часто задаваемым вопросам Оставить отзыв