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

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

  • 텍스트 필드를 만듭니다.
  • 텍스트 필드에서 숫자를 자동 형식 지정합니다.

결과

텍스트 필드에 자동 형식 지정된 전화번호
그림 1. 텍스트 필드에서 자동 형식 지정된 전화번호

버전 호환성

이 구현에서는 프로젝트 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)
    )
}

코드에 관한 핵심 사항

  • 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
            }
    }
}

코드에 관한 핵심 사항

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

이 가이드가 포함된 컬렉션

이 가이드는 더 광범위한 Android 개발 목표를 다루는 선별된 빠른 시작 가이드 컬렉션의 일부입니다.

텍스트는 모든 UI의 중심 요소입니다. 즐거운 사용자 환경을 제공하기 위해 앱에서 텍스트를 표시할 수 있는 다양한 방법 을 알아보세요.
사용자가 텍스트를 입력하고 다른 입력 수단을 사용하여 앱과 상호작용할 수 있는 방법을 구현하는 방법을 알아보세요.

궁금한 점이나 의견이 있으신가요?

자주 묻는 질문 페이지로 이동하여 빠른 시작 가이드에 관해 알아보거나 Google에 문의하여 의견을 알려주세요.