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

Uygulamanızdaki bir metin alanında telefon numarasını otomatik olarak biçimlendirebilirsiniz. Böylece, kullanıcılar rakamları girerken telefon numarasını biçimlendirerek zamandan tasarruf edebilir. Telefon numarasını otomatik olarak biçimlendirmek için aşağıdaki yönergeleri uygulayın:

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

Sonuçlar

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

Sürüm uyumluluğu

Bu uygulama, projenizin minSDK'sının API düzeyi 21 veya sonraki sürümlere ayarlanmasını gerektirir.

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, sayıların ham dizesini NANP'ye göre biçimlendirir. Örneğin: 1234567890 numaralı telefondan (123) 456-7890 numaralı telefona.

@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)
    )
}

Kodla ilgili önemli noktalar

  • TextField, phoneNumber durumunu güncellemeden önce tüm sayısal olmayan karakterleri kaldırmak için onValueChange normal ifadesini kullanan ve uzunluğu en fazla 10 karakterle sınırlayan bir composable'dır.
  • TextField, visualTransformation özelliğinde özel bir VisualTransformation örneğine sahip. Burada oluşturulan özel sınıf NanpVisualTransformation, aşağıdaki bölümde tanımlanmıştır.

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

Ham sayı dizelerini biçimlendirmek için customNanpVisualTransformation 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
            }
    }
}

Kodla ilgili önemli noktalar

  • filter() işlevi, sayısal olmayan biçimlendirme karakterlerini uygun yerlere ekler.
  • phoneNumberOffsetTranslator nesnesi iki yöntem içerir. 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ında imleç konumunu değiştirdiğinde biçimlendirme karakterlerinin atlanmasını sağlar.
  • Biçimlendirilmiş dize ve phoneNumberOffsetTranslator, döndürülen ve biçimlendirme işlemini 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.

Bu rehberi içeren koleksiyonlar

Bu kılavuz, daha kapsamlı Android geliştirme hedeflerini ele alan aşağıdaki seçilmiş Hızlı Kılavuz koleksiyonlarının bir parçasıdır:

Metin, herhangi bir kullanıcı arayüzünün temel bileşenidir. Keyifli bir kullanıcı deneyimi sunmak için uygulamanızda metinleri farklı şekillerde nasıl gösterebileceğinizi öğrenin.
Kullanıcıların metin girerek ve diğer giriş yöntemlerini kullanarak uygulamanızla etkileşim kurmasını nasıl sağlayacağınızı öğrenin.

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek hızlı kılavuzlar hakkında bilgi edinebilir veya düşüncelerinizi bize iletebilirsiniz.