Android Compose TextField 천 단위 콤마로 표현하기

📌Util 함수 만들어주기

// 천 단위 콤마 변환을 함수로 구현
fun thousandSeparatorTransformation(): VisualTransformation {
    return VisualTransformation { text ->
        val originalText = text.text
        val formattedText = originalText.toLongOrNull()?.let {
            DecimalFormat("#,###").format(it)
        } ?: originalText

        val offsetMapping = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int {
                return if (offset == 0) 0 else formattedText.length
            }

            override fun transformedToOriginal(offset: Int): Int {
                return text.length
            }
        }

        TransformedText(AnnotatedString(formattedText), offsetMapping)
    }
}

위 처럼 구현할 수 있다.

 

Compose에서는 이와같이 사용할 수 있다.

 

✅ 실제 사용하는 방법

@Composable
fun CurrencyTextField() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { newText ->
            // 숫자만 입력 가능하도록 필터링
            if (newText.all { it.isDigit() }) {
                text = newText
            }
        },
        keyboardOptions = KeyboardOptions.Default.copy(
            keyboardType = KeyboardType.Number
        ),
        visualTransformation = thousandSeparatorTransformation() // 함수형으로 변환한 VisualTransformation 사용
    )
}

 

🟢 결과