forked from Gurupreet/ComposeCookBook
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
updated bottomsheet and navigation drawer demo
- Loading branch information
Showing
1 changed file
with
172 additions
and
100 deletions.
There are no files selected for viewing
272 changes: 172 additions & 100 deletions
272
app/src/main/java/com/guru/composecookbook/ui/home/dialogs/BottomSheetLayouts.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,115 +1,187 @@ | ||
| package com.guru.composecookbook.ui.home.dialogs | ||
|
|
||
|
|
||
| import androidx.compose.material.ExperimentalMaterialApi | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.clickable | ||
| 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.List | ||
| import androidx.compose.runtime.* | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.graphics.Color | ||
| import androidx.compose.ui.semantics.semantics | ||
| import androidx.compose.ui.semantics.testTag | ||
| import androidx.compose.ui.text.style.TextAlign | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import androidx.compose.ui.unit.dp | ||
| import com.guru.composecookbook.ui.home.lists.VerticalListView | ||
| import kotlinx.coroutines.CoroutineScope | ||
| import kotlinx.coroutines.launch | ||
|
|
||
| @ExperimentalMaterialApi | ||
| @Composable | ||
| fun BottomSheetLayouts() { | ||
| //TODO fix bottomsheet | ||
| //BottomSheetDrawer() | ||
| BottomSheetDrawer() | ||
| } | ||
|
|
||
| // | ||
| //@ExperimentalMaterialApi | ||
| //@Composable | ||
| //fun BottomSheetDrawer( | ||
| //) { | ||
| // var sheetState by remember { mutableStateOf(BottomSheetState(show = true)) } | ||
| // var drawerState = rememberBottomDrawerState(BottomDrawerValue.Closed) | ||
| // | ||
| // BottomDrawerLayout( | ||
| // drawerState = drawerState, | ||
| // drawerShape = if (sheetState.rounded) RoundedCornerShape(16.dp) else RectangleShape, | ||
| // drawerContent = { | ||
| // Text( | ||
| // text = "Bottom sheet content", | ||
| // style = typography.h6, | ||
| // modifier = Modifier.padding(16.dp).fillMaxWidth(), | ||
| // textAlign = TextAlign.Center | ||
| // ) | ||
| // if (sheetState.image) { | ||
| // Image( | ||
| // painter = painterResource(id = R.drawable.food2), | ||
| // contentDescription = null, | ||
| // modifier = Modifier.fillMaxWidth(), | ||
| // contentScale = ContentScale.Crop | ||
| // ) | ||
| // } | ||
| // Text( | ||
| // text = DemoDataProvider.longText, | ||
| // style = typography.caption, | ||
| // modifier = Modifier.padding(16.dp) | ||
| // ) | ||
| // Button( | ||
| // onClick = { drawerState.close() }, | ||
| // modifier = Modifier.fillMaxWidth().padding(8.dp) | ||
| // ) { | ||
| // Text(text = "Close Sheet") | ||
| // } | ||
| // } | ||
| // ) { | ||
| // Column(modifier = Modifier.padding(16.dp)) { | ||
| // Text( | ||
| // text = "TODO: NOT WORKING PROPERLY FIX OPEN CLOSE STATES", | ||
| // style = typography.h6, | ||
| // color = MaterialTheme.colors.onError | ||
| // ) | ||
| // Button( | ||
| // onClick = { | ||
| // sheetState = sheetState.copy(show = true) | ||
| // drawerState.open() | ||
| // }, | ||
| // modifier = Modifier.fillMaxWidth().padding(16.dp) | ||
| // ) { | ||
| // Text(text = "Simple bottom sheet") | ||
| // } | ||
| // Button( | ||
| // onClick = { | ||
| // sheetState = | ||
| // sheetState.copy(show = true, image = true, buttons = true, rounded = false) | ||
| // drawerState.open() | ||
| // }, | ||
| // modifier = Modifier.fillMaxWidth().padding(16.dp) | ||
| // ) { | ||
| // Text(text = "Image and buttons") | ||
| // } | ||
| // Button( | ||
| // onClick = { | ||
| // sheetState = sheetState.copy(show = true, fullScree = true, rounded = false) | ||
| // drawerState.open() | ||
| // }, | ||
| // modifier = Modifier.fillMaxWidth().padding(16.dp) | ||
| // ) { | ||
| // Text(text = "Full Screen") | ||
| // } | ||
| // Button( | ||
| // onClick = { | ||
| // sheetState = | ||
| // sheetState.copy(show = true, image = true, buttons = true, rounded = true) | ||
| // drawerState.open() | ||
| // }, | ||
| // modifier = Modifier.fillMaxWidth().padding(16.dp) | ||
| // ) { | ||
| // Text(text = "Rounded Sheet") | ||
| // } | ||
| // } | ||
| // } | ||
| //} | ||
|
|
||
| @ExperimentalMaterialApi | ||
| @Preview | ||
| @Composable | ||
| fun PreviewBottomSheetLayouts() { | ||
| BottomSheetLayouts() | ||
| fun BottomSheetDrawer() { | ||
| val bottomSheetScaffoldState = rememberBottomSheetScaffoldState() | ||
| val coroutineScope = rememberCoroutineScope() | ||
| val showCustomScrim = remember { mutableStateOf(false) } | ||
| BottomSheetScaffold( | ||
| content = { | ||
| Box { | ||
| ScafoldContent(coroutineScope, bottomSheetScaffoldState, showCustomScrim) | ||
| if (showCustomScrim.value) { | ||
| CustomBottomSheetBackgroundScrim(scaffoldState = bottomSheetScaffoldState) | ||
| } | ||
| } | ||
| }, | ||
| sheetContent = { | ||
| BottomSheetContent() | ||
| }, | ||
| drawerContent = { | ||
| DrawerContent() | ||
| }, | ||
| scaffoldState = bottomSheetScaffoldState, | ||
| sheetPeekHeight = 0.dp, | ||
| sheetElevation = 16.dp, | ||
| sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp) | ||
| ) | ||
| } | ||
|
|
||
| data class BottomSheetState( | ||
| var show: Boolean = false, | ||
| var image: Boolean = false, | ||
| var buttons: Boolean = false, | ||
| var fullScree: Boolean = false, | ||
| var rounded: Boolean = false | ||
| ) | ||
| @ExperimentalMaterialApi | ||
| @Composable | ||
| private fun ScafoldContent( | ||
| coroutineScope: CoroutineScope, | ||
| bottomSheetScaffoldState: BottomSheetScaffoldState, | ||
| showCustomScrim: MutableState<Boolean> | ||
| ) { | ||
| Column(modifier = Modifier.fillMaxSize()) { | ||
| Button( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp) | ||
| .height(55.dp), | ||
| onClick = { | ||
| showCustomScrim.value = false | ||
| coroutineScope.launch { | ||
| bottomSheetScaffoldState.bottomSheetState.expand() | ||
| } | ||
| }) { | ||
| Text(text = "Bottom Sheet") | ||
| } | ||
| Button( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp) | ||
| .height(55.dp), | ||
| onClick = { | ||
| coroutineScope.launch { | ||
| bottomSheetScaffoldState.drawerState.open() | ||
| } | ||
| }) { | ||
| Text(text = "Navigation Drawer") | ||
| } | ||
| Button( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp) | ||
| .height(55.dp), | ||
| onClick = { | ||
| showCustomScrim.value = true | ||
| coroutineScope.launch { | ||
| bottomSheetScaffoldState.bottomSheetState.expand() | ||
| } | ||
| }) { | ||
| Text(text = "BottomSheet + Custom Scrim") | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| @Composable | ||
| fun BottomSheetContent() { | ||
| Text(text = "Bottom Sheet", textAlign = TextAlign.Center, modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp)) | ||
| Button( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp) | ||
| .height(55.dp), | ||
| onClick = { | ||
| }) { | ||
| Text(text = "Action 1") | ||
| } | ||
| Button( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp) | ||
| .height(55.dp), | ||
| onClick = { | ||
| }) { | ||
| Text(text = "Action 2") | ||
| } | ||
| Button( | ||
| modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp) | ||
| .height(55.dp), | ||
| onClick = { | ||
| }) { | ||
| Text(text = "Action 3") | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| fun DrawerContent() { | ||
| Row(modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp), horizontalArrangement = Arrangement | ||
| .SpaceBetween) { | ||
| Text(text = "Item 1") | ||
| Icon(imageVector = Icons.Default.List, contentDescription = "List") | ||
| } | ||
|
|
||
| Row(modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp), horizontalArrangement = Arrangement | ||
| .SpaceBetween) { | ||
| Text(text = "Item 2") | ||
| Icon(imageVector = Icons.Default.List, contentDescription = "List") | ||
| } | ||
|
|
||
| Row(modifier = Modifier | ||
| .fillMaxWidth() | ||
| .padding(16.dp), horizontalArrangement = Arrangement | ||
| .SpaceBetween) { | ||
| Text(text = "Item 3") | ||
| Icon(imageVector = Icons.Default.List, contentDescription = "List") | ||
| } | ||
| } | ||
|
|
||
| @ExperimentalMaterialApi | ||
| @Composable | ||
| fun CustomBottomSheetBackgroundScrim(scaffoldState: BottomSheetScaffoldState) { | ||
| val coroutineScope = rememberCoroutineScope() | ||
| val bottomSheetProgress = scaffoldState.bottomSheetState.progress | ||
| val bottomSheetFraction = bottomSheetProgress.fraction | ||
| if ((bottomSheetProgress.from == BottomSheetValue.Collapsed && bottomSheetFraction < 1.0) | ||
| || bottomSheetProgress.from == BottomSheetValue.Expanded && scaffoldState.bottomSheetState.progress.fraction.toInt() == 1) { | ||
| Spacer(modifier = Modifier | ||
| .fillMaxSize() | ||
| .background(MaterialTheme.colors.onSurface.copy(alpha = DrawerDefaults.ScrimOpacity)) | ||
| .clickable { | ||
| coroutineScope.launch { | ||
| scaffoldState.bottomSheetState.collapse() | ||
| } | ||
| } | ||
| ) | ||
| } | ||
| } |