VisualTransformation

1. 텍스트 필드에 숫자를 입력하면 2024.10.08 처럼 보일 수 있게 VisualTransformation 을 사용했다.
   

2. VisualTransformation은 말 그대로 시각적으로 보이는 출력 값을 바꾸는 인터페이스이다. filter() 함수를 보면, index가 3, 5일때 숫자뒤에 . 를 붙여주게 했다.

3. originalToTransformed() 는 실제 Text 의 offset 을 기반으로 변형된 Text 의 offset(커서 위치)을 지정한다.
   
   

4. transformedToOriginal() 는 변형된 Text 의 offset 을 기반으로 실제 Text 의 offset(커서 위치)을 지정한다.
   
   

class DateTransformation : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        return dateFilter(text)
    }
}

private fun dateFilter(text: AnnotatedString): TransformedText {
    val trimmed = if (text.text.length >= 8) text.text.substring(0..7) else text.text
    var out = ""
    for (i in trimmed.indices) {
        out += trimmed[i]
        if (i == 3  || i == 5) out += "."
    }

    val numberOffsetTranslator = object : OffsetMapping {
        override fun originalToTransformed(offset: Int): Int {
            if (offset <= 3) return offset
            if (offset <= 5) return offset + 1
            if (offset <= 8) return offset + 2
            return 8
        }

        override fun transformedToOriginal(offset: Int): Int {
            if (offset <= 4) return offset
            if (offset <= 6) return offset - 1
            if (offset <= 10) return offset - 2
            return 10
        }
    }

    return TransformedText(AnnotatedString(out), numberOffsetTranslator)
}

5. 작성한 필터를 텍스트 필드 안에 넣어준다.

OutlinedTextField(
		...
        visualTransformation = if (index == 2) DateTransformation() else VisualTransformation.None,
        trailingIcon = {
            if (index == 2) {
                IconButton(onClick = { onDatePicker() }) {
                    Icon(
                        imageVector = Icons.Filled.DateRange,
                        contentDescription = "DateRange"
                    )
                }
            }
        }
    )

https://jik3410.tistory.com/11