Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Setting]: 금액 입력 텍스트 필드 구현 #35

Merged
merged 2 commits into from
Feb 3, 2024
Merged

[Setting]: 금액 입력 텍스트 필드 구현 #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3832002
[Feat]: 금액 입력 텍스트 필드 구현
jinuemong Feb 3, 2024
63c8e3f
[fix]: QA 후 수정
jinuemong Feb 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions ...c/dnd/bookkeeping/android/presentation/common/util/expansion/NumberCommaTransformation.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
package ac.dnd.bookkeeping.android.presentation.common.util.expansion

import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.input.OffsetMapping
import androidx.compose.ui.text.input.TransformedText
import androidx.compose.ui.text.input.VisualTransformation
import java.text.NumberFormat
import java.util.Locale

class NumberCommaTransformation : VisualTransformation {

private fun Long?.formatWithComma(): String =
NumberFormat.getNumberInstance(Locale.US).format(this ?: 0)

override fun filter(text: AnnotatedString): TransformedText {
val newText = AnnotatedString(
text = if (text.text.isEmpty()) "" else text.text.toLongOrNull().formatWithComma() + "원"
)
return TransformedText(
text = newText,
offsetMapping = object : OffsetMapping {
override fun originalToTransformed(offset: Int): Int {
return if (offset != newText.length) newText.length else text.length

}

override fun transformedToOriginal(offset: Int): Int {
return text.length
}
}
)
}
}
95 changes: 95 additions & 0 deletions ...otlin/ac/dnd/bookkeeping/android/presentation/common/view/textfield/PriceChipComponent.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
package ac.dnd.bookkeeping.android.presentation.common.view.textfield

import ac.dnd.bookkeeping.android.presentation.R
import ac.dnd.bookkeeping.android.presentation.common.theme.Body1
import ac.dnd.bookkeeping.android.presentation.common.theme.Gray150
import ac.dnd.bookkeeping.android.presentation.common.theme.Gray300
import ac.dnd.bookkeeping.android.presentation.common.theme.Gray700
import ac.dnd.bookkeeping.android.presentation.common.theme.Shapes
import ac.dnd.bookkeeping.android.presentation.common.theme.Space16
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
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.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

@Composable
fun PriceChipComponent(
scope: CoroutineScope,
chipPressColor: Color = Gray300,
chipUnPressColor: Color = Gray150,
chipContentColor: Color = Gray700,
chipList: Map<String, Long> = mapOf(
"1만" to 10_000,
"5만" to 50_000,
"10만" to 100_000,
"50만" to 500_000
),
onClickChip: (Long) -> Unit
) {
Row(
horizontalArrangement = Arrangement.spacedBy(6.dp),
verticalAlignment = Alignment.CenterVertically
) {
chipList.forEach { (text, money) ->
var isChipClick by remember { mutableStateOf(false) }
val backgroundColorState = animateColorAsState(
targetValue = if (isChipClick) chipPressColor else chipUnPressColor,
label = "chip press state color"
)
Row(
modifier = Modifier
.background(
color = backgroundColorState.value,
shape = Shapes.medium
)
.clickable {
onClickChip(money)
scope.launch {
isChipClick = true
Thread.sleep(100L)
isChipClick = false
}
}
.padding(
horizontal = 8.dp,
vertical = 6.5.dp
),
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(R.drawable.ic_plus),
contentDescription = null,
modifier = Modifier.size(Space16)
)
Spacer(modifier = Modifier.width(2.dp))
Text(
text = text,
style = Body1.merge(
color = chipContentColor,
fontWeight = FontWeight.SemiBold
)
)
}
}
}
}
224 changes: 224 additions & 0 deletions .../kotlin/ac/dnd/bookkeeping/android/presentation/common/view/textfield/TypingPriceField.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
package ac.dnd.bookkeeping.android.presentation.common.view.textfield

import ac.dnd.bookkeeping.android.presentation.R
import ac.dnd.bookkeeping.android.presentation.common.theme.Body1
import ac.dnd.bookkeeping.android.presentation.common.theme.Gray500
import ac.dnd.bookkeeping.android.presentation.common.theme.Gray700
import ac.dnd.bookkeeping.android.presentation.common.theme.Gray800
import ac.dnd.bookkeeping.android.presentation.common.theme.Headline3
import ac.dnd.bookkeeping.android.presentation.common.theme.Negative
import ac.dnd.bookkeeping.android.presentation.common.theme.Primary3
import ac.dnd.bookkeeping.android.presentation.common.util.expansion.NumberCommaTransformation
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Divider
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Text
import androidx.compose.material.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextRange
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun TypingPriceField(
modifier: Modifier = Modifier,
textValue: String,
onValueChange: (String) -> Unit,
hintText: String = "지출하신 금액을 입력해주세요",
isError: Boolean = false,
isEnabled: Boolean = true,
innerPadding: PaddingValues = PaddingValues(0.dp),
textFieldHeight: Dp = 35.dp,
keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
textFormat : VisualTransformation = NumberCommaTransformation(),
fieldSubjectContent: (@Composable () -> Unit) = { FieldSubject() },
leadingIconContent: (@Composable () -> Unit)? = null,
trailingIconContent: (@Composable () -> Unit)? = null,
errorMessageContent: (@Composable () -> Unit) = { },
) {
val interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
var isTextFieldFocused by remember { mutableStateOf(false) }
val scope = rememberCoroutineScope()
val currentColor = if (isError) Negative else if (isTextFieldFocused) Primary3 else Gray500
val currentColorState = animateColorAsState(
targetValue = currentColor,
label = "color state"
)

fun makeFilterText(text: String): String = text.filter { it.isDigit() }

fun addPriceFormat(addPrice: Long): String {
val prevPrice = if (textValue.isEmpty()) 0L else makeFilterText(textValue).toLong()
return (addPrice + prevPrice).toString()
}

Column(
modifier = modifier
.background(color = Color.Transparent)
.onFocusChanged {
isTextFieldFocused = it.isFocused
}
) {
fieldSubjectContent()
BasicTextField(
value = TextFieldValue(
text = textValue,
selection = TextRange(textValue.length)
),
onValueChange = {
val newText = makeFilterText(it.text)
onValueChange(newText)
},
enabled = isEnabled,
modifier = Modifier
.fillMaxWidth()
.height(textFieldHeight),
textStyle = Headline3.merge(
color = Gray800,
fontWeight = FontWeight.SemiBold
),
singleLine = true,
keyboardOptions = keyboardOptions,
cursorBrush = SolidColor(value = currentColorState.value),
visualTransformation = textFormat,
interactionSource = interactionSource
) { textField ->
TextFieldDefaults.TextFieldDecorationBox(
value = TextFieldValue(
text = textValue,
selection = TextRange(textValue.length)
).text,
innerTextField = textField,
enabled = isEnabled,
singleLine = true,
placeholder = {
Text(
text = hintText,
style = Headline3.merge(
color = Gray500,
fontWeight = FontWeight.SemiBold
)
)
},
visualTransformation = textFormat,
interactionSource = interactionSource,
leadingIcon = leadingIconContent,
trailingIcon = trailingIconContent,
contentPadding = innerPadding
)
}
Divider(
modifier = Modifier
.fillMaxWidth()
.height(1.dp),
color = currentColorState.value
)
Spacer(modifier = Modifier.height(6.dp))
PriceChipComponent(
scope = scope,
onClickChip = { addPrice ->
val newText = addPriceFormat(addPrice)
onValueChange(newText)
}
)
errorMessageContent()
}

}

@Composable
private fun FieldSubject() {
Column {
Row {
Text(
text = "금액",
style = Body1.merge(
color = Gray700,
fontWeight = FontWeight.SemiBold
)
)
Spacer(modifier = Modifier.width(1.dp))
Box(
modifier = Modifier
.height(21.dp)
.padding(bottom = 3.dp),
contentAlignment = Alignment.Center
) {
Image(
painter = painterResource(R.drawable.ic_essential_field),
contentDescription = null
)
}
}
Spacer(
modifier = Modifier.height(18.dp)
)
}
}

@Composable
@Preview(backgroundColor = 0xFFFFFFFF, showBackground = true)
fun EnterMoneyField1Preivew() {
TypingPriceField(
textValue = "1111",
modifier = Modifier.fillMaxWidth(),
onValueChange = {},
)
}

@Composable
@Preview(backgroundColor = 0xFFFFFFFF, showBackground = true)
fun EnterMoneyField2Preivew() {
TypingPriceField(
textValue = "",
modifier = Modifier.fillMaxWidth(),
onValueChange = {},
)
}


@Composable
@Preview(backgroundColor = 0xFFFFFFFF, showBackground = true)
fun EnterMoneyField3Preview() {
var input by remember { mutableStateOf("10000000") }
TypingPriceField(
textValue = input,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 10.dp),
onValueChange = {
input = it
},
)
}
9 changes: 9 additions & 0 deletions presentation/src/main/res/drawable/ic_essential_field.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="7dp"
android:height="6dp"
android:viewportWidth="7"
android:viewportHeight="6">
<path
android:pathData="M3.024,5.66L3.136,3.7L1.484,4.792L0.896,3.756L2.66,2.888L0.896,1.992L1.484,0.984L3.136,2.048L3.024,0.088H4.2L4.088,2.048L5.74,0.984L6.328,1.992L4.564,2.888L6.328,3.756L5.74,4.792L4.088,3.7L4.2,5.66H3.024Z"
android:fillColor="#FF4949"/>
</vector>
Loading