Android TextField에서 사용하는 VisualTransformation

안녕하세요. 오늘은 Jetpack Compose에서 텍스트 입력 필드를 더욱 유연하고 효율적으로 다룰 수 있도록 도와주는 VisualTransformation에 대해 알아보겠습니다.

VisualTransformation

VisualTransformation은 Jetpack Compose에서 텍스트의 표시 방식을 변형하는 데 사용되는 도구이다. 사용자로부터 텍스트 입력을 받는 TextField와 같은 컴포넌트에서 텍스트가 화면에 어떻게 보일지를 조정할 수 있다.

왜 사용해야할까?

거의 텍스트 필드는 사용자가 직접 입력한 데이터를 그대로 화면에 보여준다. 하지만 입력되는 데이터는 때로 특정 형식을 필요로 한다.

• 예를 들어, 비밀번호는 *로 보이게 하거나, 전화번호는 010-1234-5678과 같은 형식을 보여주고 싶을 때. 이럴 때 VisualTransformation을 사용하면 입력된 텍스트를 화면에 표시할 때만 변형할 수 있다.

기본 예시

가장 기본적인 형태는 BasicTextField나 TextField에 visualTransformation 파라미터를 설정해주는 방식입니다.

TextField(
    value = value,
    onValueChange = { value = it },
    visualTransformation = PasswordVisualTransformation()
)

화면에는 ****으로 보이지만, 실제 값은 그대로 유지된다.

또 다른 예시

val phoneVisualTransformation = VisualTransformation { text ->
    val trimmed = text.text.take(11)
    val formatted = when (trimmed.length) {
        in 0..3 -> trimmed
        in 4..7 -> "${trimmed.substring(0,3)}-${trimmed.substring(3)}"
        else -> "${trimmed.substring(0,3)}-${trimmed.substring(3,7)}-${trimmed.substring(7)}"
    }
    TransformedText(AnnotatedString(formatted), OffsetMapping.Identity)
}

출력

입력값 (text.text)	trimmed	formatted
"0"	"0"	"0"
"0101"	"0101"	"010-1"
"0101234"	"0101234"	"010-1234"
"01012345678"	"01012345678"	"010-1234-5678"

OffsetMapping

OffsetMapping은 예를 들어 "0101"을 입력했을 때

입력값 길이는 4 (0, 1, 0, 1)

보이는 값은 "010-1" (길이 5)

이때 커서를 정확히 매핑하려면, 입력값과 보이는 값의 인덱스를 매핑해주는 도구가 필요하다. 그게 OffsetMapping이다.

interface OffsetMapping {
    fun originalToTransformed(offset: Int): Int
    fun transformedToOriginal(offset: Int): Int
}