From 14d4cdeaf03217f9fe8f045b4615910ef6b260cc Mon Sep 17 00:00:00 2001 From: alex Date: Thu, 25 May 2023 16:01:39 -0500 Subject: [PATCH] updated bottom sheet --- .../jetpack_compose_all_in_one/DemoSheet.kt | 68 +++++++++++++++++++ .../lessons/lesson_4/Lesson_4_Dialogs.kt | 55 +++++++++++++++ 2 files changed, 123 insertions(+) create mode 100644 app/src/main/java/com/example/jetpack_compose_all_in_one/lessons/lesson_4/Lesson_4_Dialogs.kt diff --git a/app/src/main/java/com/example/jetpack_compose_all_in_one/DemoSheet.kt b/app/src/main/java/com/example/jetpack_compose_all_in_one/DemoSheet.kt index 25cae6ba..8af70712 100644 --- a/app/src/main/java/com/example/jetpack_compose_all_in_one/DemoSheet.kt +++ b/app/src/main/java/com/example/jetpack_compose_all_in_one/DemoSheet.kt @@ -1,12 +1,24 @@ package com.example.jetpack_compose_all_in_one +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.material.ExperimentalMaterialApi +import androidx.compose.material.ModalBottomSheetLayout +import androidx.compose.material.ModalBottomSheetState +import androidx.compose.material.ModalBottomSheetValue +import androidx.compose.material3.Button import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.SheetState import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import kotlinx.coroutines.launch + @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -26,4 +38,60 @@ fun DemoSheet( } } } +} + + +@Composable +fun MyBottomSheetContent(onDismiss: () -> Unit){ + Column( modifier = Modifier.fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.SpaceAround + ) { + Text(text = "Bottom Sheet Content") + Button(onClick = onDismiss) { + Text(text = "Close") + } + } +} + +@Composable +fun MyScreenContent(onOpenBottomSheet: () -> Unit){ + Column(modifier = Modifier.fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.SpaceEvenly) { + Text(text = "Main Content") + Button(onClick = onOpenBottomSheet) { + Text(text = "Open Bottom Sheet") + } + } +} + + +@OptIn(ExperimentalMaterialApi::class) +@Composable +fun BottomSheet(){ + + val bottomSheetState = remember { + ModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden) + } + + val coroutineScope = rememberCoroutineScope() + + ModalBottomSheetLayout( + sheetState = bottomSheetState, + sheetContent = { + MyBottomSheetContent(onDismiss = { + coroutineScope.launch{ + bottomSheetState.hide() + } + }) + }, + content = { + MyScreenContent(onOpenBottomSheet = { + coroutineScope.launch { + bottomSheetState.show() + } + }) + } + ) } \ No newline at end of file diff --git a/app/src/main/java/com/example/jetpack_compose_all_in_one/lessons/lesson_4/Lesson_4_Dialogs.kt b/app/src/main/java/com/example/jetpack_compose_all_in_one/lessons/lesson_4/Lesson_4_Dialogs.kt new file mode 100644 index 00000000..978255ef --- /dev/null +++ b/app/src/main/java/com/example/jetpack_compose_all_in_one/lessons/lesson_4/Lesson_4_Dialogs.kt @@ -0,0 +1,55 @@ +package com.example.jetpack_compose_all_in_one.lessons.lesson_4 + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.saveable.rememberSaveable +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.stringArrayResource +import androidx.compose.ui.text.style.TextAlign +import com.example.jetpack_compose_all_in_one.R +import com.example.jetpack_compose_all_in_one.ui.components.AlertDialog +import com.example.jetpack_compose_all_in_one.ui.components.BottomSheet +import com.example.jetpack_compose_all_in_one.ui.components.LessonHeader +import com.example.jetpack_compose_all_in_one.ui.theme.dp_15 +import com.example.jetpack_compose_all_in_one.utils.LogicPager + +@Composable +fun Lesson_4_Chapter_Dialogs() { + LessonContent() +} + +@Composable +private fun LessonContent() { + val currentPage = rememberSaveable { mutableStateOf(0) } + + LogicPager( + pageCount = 4, + currentPage = currentPage + ) { + Column( + Modifier + .fillMaxSize() + .padding(it) + ) { + LessonHeader( + stringArrayResource(R.array.lesson_4_header_text)[currentPage.value], + Modifier + .fillMaxWidth() + .padding(dp_15), + TextAlign.Center + ) + + when (currentPage.value) { + 0 -> AlertDialog() + 1 -> BottomSheet() + 2 -> AppRatingDialog() + 3 -> LogoutDialogUI() + } + } + } +}