Metin alanındaki bir telefon numarasını otomatik olarak biçimlendirme

Uygulamanızdaki bir metin alanındaki telefon numarasını otomatik olarak biçimlendirebilirsiniz. Böylece, kullanıcılar rakamları girerken telefon numarasını biçimlendirerek onlara zaman kazandırabilirsiniz. Telefon numarasını otomatik olarak biçimlendirmek için aşağıdaki talimatları uygulayın:

  • Metin alanını oluşturun.
  • Metin alanındaki bir sayıyı otomatik olarak biçimlendirme

Sürüm uyumluluğu

Bu uygulama için projenizin minSDK değerinin API düzeyi 21 veya üstü olarak ayarlanması gerekir.

Bağımlılıklar

Metin alanını oluşturma

Öncelikle TextField'ı yapılandırın. Bu örnekte, Kuzey Amerika Numaralandırma Planı'na (NANP) göre biçimlendirilmiş bir telefon numarası gösterilmektedir.NanpVisualTransformation, ham sayı dizesini NANP'ye göre biçimlendirir. 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

Kodla ilgili önemli noktalar

  • onValueChange'ın, phoneNumber durumunu güncellemeden önce tüm sayısal olmayan karakterleri kaldırmak için normal ifade kullandığı ve uzunluğu en fazla 10 karakterle sınırlandırdığı bir TextField bileşimi.
  • TextField, visualTransformation özelliğinde özel bir VisualTransformation örneğine sahiptir. Burada örneklendirilen özel sınıf olan NanpVisualTransformation, aşağıdaki bölümde tanımlanmıştır.

Metin alanındaki bir sayıyı otomatik olarak biçimlendirme

Ham sayı dizesini biçimlendirmek için özel NanpVisualTransformation sınıfının uygulamasını kullanın:

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

Kodla ilgili önemli noktalar

  • filter() işlevi, sayı olmayan biçimlendirme karakterlerini uygun yerlere ekler.
  • phoneNumberOffsetTranslator nesnesi iki yöntem içerir. Bunlardan biri, orijinal dize ile biçimlendirilmiş dize arasındaki ofsetleri eşler, diğeri ise ters eşlemeyi yapar. Bu eşlemeler, kullanıcı metin alanındaki imleci değiştirdiğinde biçimlendirme karakterlerinin atlanmasına olanak tanır.
  • Biçimlendirilmiş dize ve phoneNumberOffsetTranslator, döndürülen ve biçimlendirmeyi gerçekleştirmek için TextField tarafından kullanılan bir TransformedText örneği için bağımsız değişken olarak kullanılır.

Sonuçlar

Metin alanında otomatik olarak biçimlendirilmiş bir telefon numarası
Şekil 1. Metin alanında otomatik olarak biçimlendirilmiş bir telefon numarası.

Bu kılavuzu içeren koleksiyonlar

Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş Hızlı Kılavuz koleksiyonlarından biridir:

Görünen metin

Metin, her kullanıcı arayüzünün temel bileşenidir. Kullanıcılara keyifli bir deneyim sunmak için uygulamanızda metinleri sunmanın farklı yollarını öğrenin.
Hızlı rehber koleksiyonu
Kullanıcıların metin girerek ve diğer giriş yöntemlerini kullanarak uygulamanızla nasıl etkileşime geçebileceğini öğrenin.
Hızlı rehber koleksiyonu

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek kısa kılavuzlar hakkında bilgi edinebilir veya bize ulaşarak düşüncelerinizi bizimle paylaşabilirsiniz.
SSS'ye gidin Geri bildirim gönderin