Плавающая кнопка действия (FAB) — это выделенная кнопка, которая позволяет пользователю выполнить основное действие в приложении. Он продвигает одно целенаправленное действие, которое является наиболее распространенным путем, который может предпринять пользователь, и обычно находится в правом нижнем углу экрана.
Рассмотрим эти три варианта использования FAB:
- Создать новый элемент : в приложении для создания заметок FAB можно использовать для быстрого создания новой заметки.
- Добавить новый контакт . В приложении чата FAB может открыть интерфейс, позволяющий пользователю добавлять кого-либо в разговор.
- Расположение по центру : в интерфейсе карты FAB может центрировать карту по текущему местоположению пользователя.
В Material Design существует четыре типа FAB:
- FAB : плавающая кнопка обычного размера.
- Small FAB : маленькая плавающая кнопка действия.
- Большая FAB : большая плавающая кнопка действия.
- Расширенный FAB : плавающая кнопка действия, которая содержит больше, чем просто значок.
поверхность API
Хотя существует несколько составных элементов, которые вы можете использовать для создания плавающих кнопок действий в соответствии с Material Design, их параметры не сильно отличаются. Среди ключевых параметров, на которые следует обратить внимание, можно выделить следующие:
-
onClick
: функция, вызываемая, когда пользователь нажимает кнопку. -
containerColor
: цвет кнопки. -
contentColor
: цвет значка.
Плавающая кнопка действия
Чтобы создать общую кнопку с плавающим действием, используйте базовый компонуемый FloatingActionButton
. Следующий пример демонстрирует базовую реализацию FAB:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Эта реализация выглядит следующим образом:
Маленькая кнопка
Чтобы создать небольшую плавающую кнопку действия, используйте составной объект 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.") } }
Эта реализация выглядит следующим образом:
Большая кнопка
Чтобы создать большую плавающую кнопку действия, используйте составной объект LargeFloatingActionButton
. Этот составной элемент существенно не отличается от других примеров, за исключением того факта, что в результате получается кнопка большего размера.
Ниже приведена простая реализация большого FAB.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
Эта реализация выглядит следующим образом:
Расширенная кнопка
Вы можете создавать более сложные плавающие кнопки действий с помощью составного элемента 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") }, ) }
Эта реализация выглядит следующим образом: