이 페이지는 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 인스턴스의 인수로 사용됩니다.