Skip to content

Commit

Permalink
[System] DialogScreen 고도화
Browse files Browse the repository at this point in the history
  • Loading branch information
@ajou4095
ajou4095 committed Jan 23, 2024
1 parent 5f6149b commit 91314f0
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 114 deletions.
222 changes: 112 additions & 110 deletions ...ation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/DialogScreen.kt
View file
Original file line number Diff line number Diff line change
@@ -1,156 +1,158 @@
package ac.dnd.bookkeeping.android.presentation.common.view

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import ac.dnd.bookkeeping.android.presentation.R
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Surface
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties

@Composable
fun DialogScreen(
dialogIsShowingState: MutableState<Boolean>,
width: Dp = 300.dp,
content: @Composable () -> Unit = { SampleDialogComponent(dialogIsShowingState) }
isShowing: Boolean,
isCancelable: Boolean = true,
title: String = "",
message: String = "",
confirmMessage: String = stringResource(id = R.string.dialog_confirm),
cancelMessage: String = stringResource(id = R.string.dialog_cancel),
onConfirm: () -> Unit = {},
onCancel: (() -> Unit)? = null,
onDismissRequest: (() -> Unit),
) {
val animateIn = remember { mutableStateOf(false) }

if (dialogIsShowingState.value) {
if (isShowing) {
Dialog(
properties = DialogProperties(
dismissOnBackPress = isCancelable,
dismissOnClickOutside = isCancelable
),
onDismissRequest = {
dialogIsShowingState.value = false
onDismissRequest()
}
) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
Card(
modifier = Modifier.background(
color = Color.White,
shape = RoundedCornerShape(10.dp)
),
) {
LaunchedEffect(Unit) { animateIn.value = true }
AnimatedVisibility(
visible = animateIn.value && dialogIsShowingState.value,
enter = fadeIn(),
exit = fadeOut()
Column(
modifier = Modifier
.wrapContentSize()
.padding(top = 25.dp, start = 20.dp, end = 20.dp, bottom = 20.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Box(
modifier = Modifier
.shadow(
elevation = 8.dp,
shape = RoundedCornerShape(10.dp)
)
.width(width)
.clip(RoundedCornerShape(16.dp))
.background(
color = Color.LightGray
Text(
text = title,
fontSize = 16.sp,
color = Color.Black
)

if (message.isNotEmpty()) {
Spacer(modifier = Modifier.height(15.dp))

Text(
text = message,
fontSize = 12.sp,
color = Color.Black
)
}

Spacer(modifier = Modifier.height(20.dp))

Row(modifier = Modifier.wrapContentSize()) {
if (onCancel != null) {
TextButton(
modifier = Modifier
.weight(1f),
shape = RoundedCornerShape(4.dp),
colors = ButtonDefaults.textButtonColors(
backgroundColor = Color.Gray
),
onClick = {
onCancel()
onDismissRequest()
},
) {
Text(text = cancelMessage)
}

Spacer(modifier = Modifier.width(10.dp))
}

TextButton(
modifier = Modifier
.weight(1f),
shape = RoundedCornerShape(4.dp),
colors = ButtonDefaults.textButtonColors(
backgroundColor = Color.Gray
),
contentAlignment = Alignment.Center
) {
content()
onClick = {
onConfirm()
onDismissRequest()
}
) {
Text(
text = confirmMessage,
textAlign = TextAlign.Center
)
}
}
}
}
}
}
}

@Preview
@Composable
fun SampleDialogComponent(
dialogState: MutableState<Boolean>
) {
Surface(
modifier = Modifier.background(
color = Color.White,
shape = RoundedCornerShape(8.dp)
),
) {
Column(
modifier = Modifier
.wrapContentSize()
.padding(24.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
"Sample Dialog Component",
fontSize = 16.sp,
color = Color.Black
)
Spacer(modifier = Modifier.height(50.dp))
Row(modifier = Modifier.wrapContentSize()) {
Box(
modifier = Modifier
.background(
color = Color.Gray,
shape = RoundedCornerShape(4.dp)
)
.weight(1f)
.clickable {
dialogState.value = false
},
contentAlignment = Alignment.Center
) {
Text(
"취소",
color = Color.White,
textAlign = TextAlign.Center,
modifier = Modifier
.padding(
vertical = 10.5.dp,
horizontal = 12.dp
),
)
}
fun DialogScreenPreview1() {
var isShowing by remember { mutableStateOf(true) }

Spacer(modifier = Modifier.width(8.dp))
DialogScreen(
isShowing = isShowing,
title = "제목",
message = "내용",
onCancel = {},
onDismissRequest = {
isShowing = false
}
)
}

Box(
modifier = Modifier
.background(
color = Color.Gray,
shape = RoundedCornerShape(4.dp)
)
.weight(1f)
.clickable {
dialogState.value = false
},
contentAlignment = Alignment.Center
) {
Text(
"확인",
color = Color.White,
textAlign = TextAlign.Center,
modifier = Modifier
.padding(
vertical = 10.5.dp,
horizontal = 12.dp
)
)
}
}
@Preview
@Composable
fun DialogScreenPreview2() {
var isShowing by remember { mutableStateOf(true) }

DialogScreen(
isShowing = isShowing,
title = "제목",
onDismissRequest = {
isShowing = false
}
}
)
}
14 changes: 11 additions & 3 deletions ...main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/setting/SettingScreen.kt
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package ac.dnd.bookkeeping.android.presentation.ui.main.home.setting

import ac.dnd.bookkeeping.android.presentation.R
import ac.dnd.bookkeeping.android.presentation.common.util.ErrorObserver
import ac.dnd.bookkeeping.android.presentation.common.view.BottomSheetScreen
import ac.dnd.bookkeeping.android.presentation.common.view.DialogScreen
Expand All @@ -12,11 +13,14 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
Expand All @@ -32,7 +36,7 @@ fun SettingScreen(
viewModel = viewModel
)

val dialogIsShowingState = remember { mutableStateOf(false) }
var isDialogShowing by remember { mutableStateOf(false) }
val bottomSheetIsShowingState = remember { mutableStateOf(false) }

Column(
Expand Down Expand Up @@ -65,7 +69,7 @@ fun SettingScreen(
modifier = Modifier
.padding(vertical = 10.dp)
.clickable {
dialogIsShowingState.value = true
isDialogShowing = true
}
)
Text(
Expand All @@ -80,7 +84,11 @@ fun SettingScreen(
)
}
BottomSheetScreen(bottomSheetIsShowingState = bottomSheetIsShowingState)
DialogScreen(dialogIsShowingState = dialogIsShowingState)
DialogScreen(
isShowing = isDialogShowing,
title = stringResource(R.string.setting_dialog_title),
onDismissRequest = { isDialogShowing = false }
)
}

@Composable
Expand Down
8 changes: 7 additions & 1 deletion presentation/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="bottom_sample">홈</string>
<!-- <screen_name>_<anything> 의 양식으로 작성 부탁드립니다. -->

<string name="dialog_confirm">확인</string>
<string name="dialog_cancel">취소</string>

<string name="setting_dialog_title">테스트</string>

</resources>

0 comments on commit 91314f0

Please sign in to comment.