이 페이지는 Cloud Translation API를 통해 번역되었습니다.

텍스트 필드에서 전화번호 자동 형식 지정

앱의 텍스트 필드에서 전화번호 형식을 자동으로 지정하여 사용자가 숫자를 입력할 때 전화번호 형식을 지정하여 시간을 절약할 수 있습니다. 다음 안내에 따라 전화번호 형식을 자동으로 지정하세요.

텍스트 필드를 만듭니다.
텍스트 필드에서 숫자의 서식을 자동으로 지정합니다.

버전 호환성

이 구현을 사용하려면 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.

종속 항목

텍스트 필드 만들기

먼저 TextField를 구성합니다. 이 예에서는 북미 번호 지정 계획(NANP)에 따라 형식이 지정된 전화번호를 보여줍니다.NanpVisualTransformation는 원시 숫자 문자열을 NANP로 형식 지정합니다(예: 1234567890에서 (123) 456-7890으로 변경됩니다.

@Composable
fun PhoneNumber() {
    var phoneNumber by rememberSaveable { mutableStateOf("") }
    val numericRegex = Regex("[^0-9]")
    TextField(
        value = phoneNumber,
        onValueChange = {
            // Remove non-numeric characters.
            val stripped = numericRegex.replace(it, "")
            phoneNumber = if (stripped.length >= 10) {
                stripped.substring(0..9)
            } else {
                stripped
            }
        },
        label = { Text("Enter Phone Number") },
        visualTransformation = NanpVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
    )
}TextSnippets.kt

코드 관련 핵심 사항

onValueChange가 정규 표현식을 사용하여 숫자가 아닌 모든 문자를 삭제하고 phoneNumber 상태를 업데이트하기 전에 길이를 최대 10자로 제한하는 TextField 컴포저블입니다.
TextField에는 visualTransformation 속성에 맞춤 VisualTransformation 인스턴스가 설정되어 있습니다. 여기서 인스턴스화된 맞춤 클래스인 NanpVisualTransformation는 다음 섹션에 정의되어 있습니다.

텍스트 필드에서 숫자 자동 형식 지정

숫자의 원시 문자열 형식을 지정하려면 맞춤 NanpVisualTransformation 클래스의 구현을 사용하세요.

class NanpVisualTransformation : VisualTransformation {

    override fun filter(text: AnnotatedString): TransformedText {
        val trimmed = if (text.text.length >= 10) text.text.substring(0..9) else text.text

        var out = if (trimmed.isNotEmpty()) "(" else ""

        for (i in trimmed.indices) {
            if (i == 3) out += ") "
            if (i == 6) out += "-"
            out += trimmed[i]
        }
        return TransformedText(AnnotatedString(out), phoneNumberOffsetTranslator)
    }

    private val phoneNumberOffsetTranslator = object : OffsetMapping {

        override fun originalToTransformed(offset: Int): Int =
            when (offset) {
                0 -> offset
                // Add 1 for opening parenthesis.
                in 1..3 -> offset + 1
                // Add 3 for both parentheses and a space.
                in 4..6 -> offset + 3
                // Add 4 for both parentheses, space, and hyphen.
                else -> offset + 4
            }

        override fun transformedToOriginal(offset: Int): Int =
            when (offset) {
                0 -> offset
                // Subtract 1 for opening parenthesis.
                in 1..5 -> offset - 1
                // Subtract 3 for both parentheses and a space.
                in 6..10 -> offset - 3
                // Subtract 4 for both parentheses, space, and hyphen.
                else -> offset - 4
            }
    }
}TextSnippets.kt

코드 관련 핵심 사항

filter() 함수는 숫자가 아닌 형식 지정 문자를 적절한 위치에 삽입합니다.
phoneNumberOffsetTranslator 객체에는 두 가지 메서드가 포함되어 있습니다. 하나는 원래 문자열과 형식이 지정된 문자열 간의 오프셋을 매핑하고 다른 하나는 역방향 매핑을 실행합니다. 이러한 매핑을 사용하면 사용자가 텍스트 필드에서 커서 위치를 변경할 때 서식 문자를 건너뛸 수 있습니다.
형식이 지정된 문자열과 phoneNumberOffsetTranslator는 TextField에서 반환되고 형식을 지정하는 데 사용되는 TransformedText 인스턴스의 인수로 사용됩니다.