안드로이드/Android 의 (Compose TextField) - 입력한 텍스트 데이터의 포맷 설정하기(visualTransformation)

visualTransformation 는 입력한 텍스트 데이터를 변형하지 않고 포맷을 표시 할 수 있는 기능입니다.

 

 

기본 제공되는 포맷

 

 

안드로이드는 기본적으로 비밀번호 포맷 처리를 위해 PasswordVisualTransformation 를 제공합니다. 하지만 그 외 추가적인 포맷이 필요하다면 직접 만들어 사용해야 합니다.

TextField(
    value = amount.value,
    onValueChange = { amount.value = it },
    
    ...
    
    // 포맷 처리
    visualTransformation = PasswordVisualTransformation()
)

 

직접 만들어 사용하기

 

 

금액을 표시하는 포맷을 직접 만들어 보도록 하겠습니다.

 

 

AmountTransformation.kt

VisualTransformation 을 상속 받고 안에 내용을 정의합니다.

object AmountTransformation : VisualTransformation{
    override fun filter(text: AnnotatedString): TransformedText {

        return TransformedText(
            text = AnnotatedString(CharFormatUtils.amount(text.text)),
            offsetMapping = object : OffsetMapping {
                override fun originalToTransformed(offset: Int): Int {
                    return CharFormatUtils.amount(text.text).length
                }

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

 

CharFormatUtils.kt

VisualTransformation 안에 직접 입력해도 상관없지만 코드 재 사용성을 위해 별도 유틸을 생성하였습니다.

object CharFormatUtils {

    ...

    fun amount(amount: Any?): String {
        // null 이면 빈값으로 반환함
        if (amount == null) {
            return ""
        }

        return try {
            val amountToLong = amount.toString().toLong()
            val formatter = NumberFormat.getNumberInstance(Locale("ko_KR"))
            val result = formatter.format(amountToLong)

            // 안드로이드 9 에서는 적용이 안되는 문제에 대한 예외처리
            return if (
                amountToLong > 1000 &&
                !result.contains(",")
            ) {
                NumberFormat.getNumberInstance(Locale.getDefault()).format(amountToLong)
            } else {
                result
            }
        } catch (e: NumberFormatException) {
            amount.toString()
        }
    }
}

 

적용합니다.

TextField(
    value = amount.value,
    onValueChange = { amount.value = it },
    
    ...
    
    // 포맷 처리
    visualTransformation = AmountTransformation
)

 

이상으로 마칩니다.

 

감사합니다.

 

 

VisualTransformation  |  Android Developers