Skip to content

Commit

Permalink
fix: snackHost placement
Browse files Browse the repository at this point in the history
  • Loading branch information
@ch4rl3x
ch4rl3x committed Apr 17, 2024
1 parent 411a343 commit 493dfb9
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 46 deletions.
44 changes: 16 additions & 28 deletions ...er-scaffold/src/main/java/de/charlex/compose/bottomdrawerscaffold/BottomDrawerScaffold.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FabPosition
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Surface
import androidx.compose.material3.contentColorFor
import androidx.compose.runtime.Composable
Expand Down Expand Up @@ -83,13 +81,14 @@ fun rememberBottomDrawerScaffoldState(
@ExperimentalMaterial3Api
fun BottomDrawerScaffold(
modifier: Modifier = Modifier,
bottomDrawerScaffoldState: AnchoredDraggableState<BottomDrawerValue> = rememberBottomDrawerScaffoldState(),
topBar: @Composable (() -> Unit)? = null,
bottomBar: @Composable (() -> Unit)? = null,
gesturesEnabled: Boolean = true,
drawerModifier: Modifier = Modifier,
snackbarHostState: SnackbarHostState,
anchoredDraggableState: AnchoredDraggableState<BottomDrawerValue>,
snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
// snackbarHostState: SnackbarHostState,
snackbarHost: @Composable () -> Unit = {},
// snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
floatingActionButton: @Composable (() -> Unit)? = null,
floatingActionButtonPosition: FabPosition = FabPosition.End,
drawerGesturesEnabled: Boolean? = null,
Expand Down Expand Up @@ -119,6 +118,7 @@ fun BottomDrawerScaffold(
floatingActionButton = {
floatingActionButton?.invoke()
},
snackbarHost = snackbarHost,
floatingActionButtonPosition = floatingActionButtonPosition,
) { scaffoldPaddingValues ->
BoxWithConstraints(
Expand All @@ -133,7 +133,7 @@ fun BottomDrawerScaffold(
val topPadding = with(density) { WindowInsets.statusBars.asPaddingValues(density).calculateTopPadding().toPx() }

LaunchedEffect(fullHeight, peekHeightPx, bottomDrawerHeight) {
anchoredDraggableState.updateAnchors(
bottomDrawerScaffoldState.updateAnchors(
newAnchors = DraggableAnchors {
BottomDrawerValue.Collapsed at (fullHeight - peekHeightPx)
BottomDrawerValue.Expanded at (if (topBar == null) topPadding else 0f)
Expand All @@ -143,23 +143,23 @@ fun BottomDrawerScaffold(

val anchoredDraggableModifier = Modifier
.nestedScroll(
anchoredDraggableState.createPreUpPostDownNestedScrollConnection()
bottomDrawerScaffoldState.createPreUpPostDownNestedScrollConnection()
)
.anchoredDraggable(
state = anchoredDraggableState,
state = bottomDrawerScaffoldState,
orientation = Orientation.Vertical,
enabled = drawerGesturesEnabled ?: gesturesEnabled,
)
.semantics {
if (peekHeightPx != bottomDrawerHeight) {
if (anchoredDraggableState.isCollapsed()) {
if (bottomDrawerScaffoldState.isCollapsed()) {
expand {
scope.launch { anchoredDraggableState.expand() }
scope.launch { bottomDrawerScaffoldState.expand() }
true
}
} else {
collapse {
scope.launch { anchoredDraggableState.collapse() }
scope.launch { bottomDrawerScaffoldState.collapse() }
true
}
}
Expand All @@ -177,14 +177,14 @@ fun BottomDrawerScaffold(
content(PaddingValues(bottom = drawerPeekHeight))

Scrim(
open = anchoredDraggableState.isExpanded(),
open = bottomDrawerScaffoldState.isExpanded(),
onClose = {
if (gesturesEnabled) {
scope.launch { anchoredDraggableState.collapse() }
scope.launch { bottomDrawerScaffoldState.collapse() }
}
},
fraction = {
calculateFraction(fullHeight - peekHeightPx, fullHeight - bottomDrawerHeight, anchoredDraggableState.requireOffset())
calculateFraction(fullHeight - peekHeightPx, fullHeight - bottomDrawerHeight, bottomDrawerScaffoldState.requireOffset())
},
color = drawerScrimColor
)
Expand Down Expand Up @@ -225,12 +225,7 @@ fun BottomDrawerScaffold(
}
)
},
snackbarHost = {
Box {
snackbarHost(snackbarHostState)
}
},
anchoredDraggableState = anchoredDraggableState,
anchoredDraggableState = bottomDrawerScaffoldState,
)
}

Expand All @@ -244,34 +239,27 @@ fun BottomDrawerScaffold(
internal fun BottomDrawerScaffoldStack(
body: @Composable () -> Unit,
bottomDrawer: @Composable () -> Unit,
snackbarHost: @Composable () -> Unit,
anchoredDraggableState: AnchoredDraggableState<BottomDrawerValue>
) {
Layout(
content = {
body()
bottomDrawer()
snackbarHost()
}
) { measurables, constraints ->
val placeable = measurables.first().measure(constraints)

layout(placeable.width, placeable.height) {
placeable.placeRelative(0, 0)

val (drawerPlaceable, snackbarPlaceable) =
val (drawerPlaceable) =
measurables.drop(1).map {
it.measure(constraints.copy(minWidth = 0, minHeight = 0))
}

val drawerOffsetY = anchoredDraggableState.requireOffset().roundToInt()

drawerPlaceable.placeRelative(0, drawerOffsetY)

val snackbarOffsetX = (placeable.width - snackbarPlaceable.width) / 2
val snackbarOffsetY = placeable.height - snackbarPlaceable.height

snackbarPlaceable.placeRelative(snackbarOffsetX, snackbarOffsetY)
}
}
}
Expand Down
1 change: 1 addition & 0 deletions example/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ plugins {
id 'kotlin-android'
}

apply from: '../_ktlint.gradle'
apply from: '../buildCompose.gradle'

android {
Expand Down
50 changes: 32 additions & 18 deletions example/src/main/java/de/charlex/compose/bottomdrawerscaffold/sample/MainActivity.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,13 @@ import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Build
Expand All @@ -44,11 +42,11 @@ import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
Expand All @@ -58,6 +56,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import de.charlex.compose.bottomdrawerscaffold.BottomDrawerScaffold
import de.charlex.compose.bottomdrawerscaffold.isCollapsed
import de.charlex.compose.bottomdrawerscaffold.rememberBottomDrawerScaffoldState
import de.charlex.compose.bottomdrawerscaffold.toggle
import kotlinx.coroutines.launch
Expand All @@ -84,26 +83,31 @@ fun Content() {

val coroutineScope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
val anchoredDraggableState = rememberBottomDrawerScaffoldState()
val bottomDrawerScaffoldState = rememberBottomDrawerScaffoldState()

BottomDrawerScaffold(
modifier = Modifier,
anchoredDraggableState = anchoredDraggableState,
snackbarHostState = snackbarHostState,
topBar = {
TopAppBar(
modifier = Modifier.padding(WindowInsets.statusBars.asPaddingValues()),
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.tertiaryContainer
),
title = { Text(text = "TopBar") }
)
bottomDrawerScaffoldState = bottomDrawerScaffoldState,
snackbarHost = {
SnackbarHost(hostState = snackbarHostState)
},
// topBar = {
// TopAppBar(
// modifier = Modifier.padding(WindowInsets.statusBars.asPaddingValues()),
// colors = TopAppBarDefaults.topAppBarColors(
// containerColor = MaterialTheme.colorScheme.tertiaryContainer
// ),
// title = { Text(text = "TopBar") }
// )
// },
bottomBar = {
BottomAppBar(
floatingActionButton = {
FloatingActionButton(
onClick = {
coroutineScope.launch {
snackbarHostState.showSnackbar(message = "Test")
}
},
) {
Icon(Icons.Filled.Add, "Add icon")
Expand All @@ -112,7 +116,7 @@ fun Content() {
actions = {
IconButton(onClick = {
coroutineScope.launch {
anchoredDraggableState.toggle()
bottomDrawerScaffoldState.toggle()
}
}) {
Icon(Icons.Filled.Menu, "Menu icon")
Expand All @@ -123,9 +127,20 @@ fun Content() {
backgroundColor = Color(0xFFF2F2F2),
drawerTonalElevation = 10.dp,
drawerPeekHeight = 80.dp,
drawerPadding = 10.dp,
drawerContent = {
val lazyListState = rememberLazyListState()
val collapsed = bottomDrawerScaffoldState.isCollapsed()

LaunchedEffect(collapsed) {
if (collapsed) {
lazyListState.scrollToItem(0)
}
}

LazyColumn(
modifier = Modifier.fillMaxSize(),
state = lazyListState
) {
item {
Group(title = "Category A") {
Expand Down Expand Up @@ -162,7 +177,6 @@ fun Content() {
.height(10.dp)
.background(color = MaterialTheme.colorScheme.secondaryContainer)
)
Spacer(modifier = Modifier.height(10.dp))
}
}
}
Expand Down

0 comments on commit 493dfb9

Please sign in to comment.