From cfe6a814d4e2e265dfd23d2961c72c3240955014 Mon Sep 17 00:00:00 2001 From: tom5079 Date: Fri, 17 Sep 2021 10:22:30 +0900 Subject: [PATCH] [FAB] WIP --- .idea/misc.xml | 36 ++++++++- .../xyz/quaver/pupil/ui/ReaderActivity.kt | 11 +++ .../MultipleFloatingActionButton.kt | 75 ++++++++++++++++--- 3 files changed, 112 insertions(+), 10 deletions(-) diff --git a/.idea/misc.xml b/.idea/misc.xml index 6199cc2a..9420a532 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -1,6 +1,40 @@ - + + + + diff --git a/app/src/main/java/xyz/quaver/pupil/ui/ReaderActivity.kt b/app/src/main/java/xyz/quaver/pupil/ui/ReaderActivity.kt index de928c8d..0d9552c9 100644 --- a/app/src/main/java/xyz/quaver/pupil/ui/ReaderActivity.kt +++ b/app/src/main/java/xyz/quaver/pupil/ui/ReaderActivity.kt @@ -28,11 +28,16 @@ import androidx.compose.material.MaterialTheme import androidx.compose.material.Scaffold import androidx.compose.material.TopAppBar import androidx.compose.material.Text +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.DateRange +import androidx.compose.material.icons.filled.Science import androidx.recyclerview.widget.LinearLayoutManager import com.google.accompanist.appcompattheme.AppCompatTheme import org.kodein.di.DIAware import org.kodein.di.android.closestDI import xyz.quaver.pupil.databinding.ReaderActivityBinding +import xyz.quaver.pupil.ui.composable.MultipleFloatingActionButton +import xyz.quaver.pupil.ui.composable.SubFabItem import xyz.quaver.pupil.ui.viewmodel.ReaderViewModel class ReaderActivity : ComponentActivity(), DIAware { @@ -53,6 +58,12 @@ class ReaderActivity : ComponentActivity(), DIAware { TopAppBar( title = { Text("Reader", color = MaterialTheme.colors.onSecondary) } ) + }, + floatingActionButton = { + MultipleFloatingActionButton(items = listOf( + SubFabItem(Icons.Default.Science, "Testing"), + SubFabItem(Icons.Default.DateRange, "EY") + )) } ) { diff --git a/app/src/main/java/xyz/quaver/pupil/ui/composable/MultipleFloatingActionButton.kt b/app/src/main/java/xyz/quaver/pupil/ui/composable/MultipleFloatingActionButton.kt index 6878417d..32b5d6ca 100644 --- a/app/src/main/java/xyz/quaver/pupil/ui/composable/MultipleFloatingActionButton.kt +++ b/app/src/main/java/xyz/quaver/pupil/ui/composable/MultipleFloatingActionButton.kt @@ -1,14 +1,23 @@ package xyz.quaver.pupil.ui.composable import androidx.compose.animation.core.updateTransition -import androidx.compose.foundation.layout.Column -import androidx.compose.material.FloatingActionButton -import androidx.compose.material.Icon +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add +import androidx.compose.material.icons.filled.PlayArrow +import androidx.compose.material.icons.filled.Stop import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.tooling.preview.PreviewParameterProvider +import androidx.compose.ui.unit.dp enum class FloatingActionButtonState(val isExpanded: Boolean) { COLLAPSED(false), EXPANDED(true); @@ -28,24 +37,72 @@ data class SubFabItem( val label: String? = null ) +@Composable +fun MiniFloatingActionButton( + modifier: Modifier = Modifier, + item: SubFabItem, + onClick: ((SubFabItem) -> Unit)? = null +) { + Row( + modifier = modifier, + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(16.dp) + ) { + val elevation = FloatingActionButtonDefaults.elevation() + val interactionSource = remember { MutableInteractionSource() } + + item.label?.let { label -> + Surface( + shape = RoundedCornerShape(4.dp), + elevation = elevation.elevation(interactionSource).value + ) { + Text(modifier = Modifier.padding(4.dp), text = label) + } + } + + FloatingActionButton( + modifier = Modifier.size(32.dp), + onClick = { onClick?.invoke(item) }, + elevation = elevation, + interactionSource = interactionSource + ) { + Icon(item.icon, contentDescription = null) + } + } +} + +private class FloatingActionButtonItemProvider : PreviewParameterProvider { + override val values: Sequence + get() = sequenceOf( + SubFabItem(Icons.Default.PlayArrow, "Play"), + SubFabItem(Icons.Default.Stop, "Stop") + ) +} + @Preview @Composable fun MultipleFloatingActionButton( - items: List, + @PreviewParameter(provider = FloatingActionButtonItemProvider::class) items: List, fabIcon: ImageVector = Icons.Default.Add, - onItemClicked: () -> Unit = { }, + onItemClick: ((SubFabItem) -> Unit)? = null, targetState: FloatingActionButtonState = FloatingActionButtonState.COLLAPSED, onStateChanged: ((FloatingActionButtonState) -> Unit)? = null ) { val transition = updateTransition(targetState = targetState, label = "expand") - Column { + Column( + horizontalAlignment = Alignment.End, + verticalArrangement = Arrangement.spacedBy(12.dp) + ) { + items.forEach { item -> + MiniFloatingActionButton(modifier = Modifier.padding(end = 12.dp),item = item) { + onItemClick?.invoke(it) + } + } + FloatingActionButton(onClick = { onStateChanged?.invoke(!targetState) }) { - items.forEach { - - } Icon(imageVector = fabIcon, contentDescription = null) } }