FloatingActionButton и ExtendedFloatingActionButton

Компонент FloatingActionButton представляет кнопку, которая обычно располагается внизу экрана поверх основного содержимого и приглашает к некотором действию. Этот компонент имеет следующие параметры:

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = FloatingActionButtonDefaults.shape,
    containerColor: Color = FloatingActionButtonDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

Параметры функции компонента:

• onClick: представляет функцию-обработчик нажатия кнопки

• modifier: предствляет объект Modifier, который определяет модификаторы кнопки

• interactionSource: представляет объект типа MutableInteractionSource, который устанавливает поток взаимодействий для кнопки. Значение по умолчанию - remember { MutableInteractionSource() }

• elevation: объект типа FloatingActionButtonElevation, который определяет анимацию при нажатии кнопки. По умолчанию равно FloatingActionButtonDefaults.elevation()

• shape: объект типа Shape, который устанавливает форму кнопки. По умолчанию равно MaterialTheme.shapes.small.copy(CornerSize(percent = 50))

• containerColor: фоновый цвет компонента. По умолчанию имеет значение MaterialTheme.colors.secondary

• contentColor: цвет содержимого компонента. По умолчанию устанавливается функцией contentColorFor(backgroundColor), которая устанавливает цвет в зависимости от фонового цвета

• content: содержимое кнопки - обычно представляет иконку в виде объекта типа Icon. В качестве иконки можно использовать встроенные иконки из пакета androidx.compose.material.icons.Icons. А также можно создавать и использовать свои иконки.

Определим простейший элемент FloatingActionButton:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            FloatingActionButton(onClick = { }) {
                Icon(Icons.Filled.Add, contentDescription = "Добавить")
            }
        }
    }
}

В данном случае кнопка никак не обрабатывает нажатия и просто отображает иконку Icons.Filled.Add из стандартного набора иконок.

Как и в обычных кнопках, мы можем обработать нажатия:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column{
                val label = remember{ mutableStateOf("")}
                FloatingActionButton(onClick = {label.value = "Добавлено!" }, modifier = Modifier) {
                    Icon(Icons.Filled.Add, contentDescription = "Добавить")
                }
                Text(text = label.value, fontSize = 28.sp)
            }
        }
    }
}

ExtendedFloatingActionButton

Jetpack Compose также предоставляет похожий компонент, который по сути расширяет FloatingActionButton - компонент ExtendedFloatingActionButton:

@Composable
fun ExtendedFloatingActionButton(
    text: @Composable () -> Unit,
    icon: @Composable () -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    expanded: Boolean = true,
    shape: Shape = FloatingActionButtonDefaults.extendedFabShape,
    containerColor: Color = FloatingActionButtonDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    interactionSource: MutableInteractionSource? = null
): Unit

В отличие от FloatingActionButton вместо одного параметра content для установки содержимого применяются два параметра:

• text: устанавливает текст кнопки

• icon: устанавливает иконку кнопку

Простейший пример:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExtendedFloatingActionButton(
                icon = { Icon(Icons.Filled.Add, contentDescription = "Добавить") },
                text = { Text("Добавить") },
                onClick = {}
            )
        }
    }
}

Добавим обработку нажатия:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val added = remember{ mutableStateOf(false)}
            ExtendedFloatingActionButton(
                icon = {
                    Icon(
                        if(added.value) Icons.Filled.Delete else Icons.Filled.Add,
                        contentDescription = "Добавить"
                    ) },
                text = { Text(if(added.value) "Удалить" else "Добавить") },
                onClick = {added.value = !added.value}
            )
        }
    }
}

В данном случае по нажатию изменяем текст и иконку кнопки: