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) ) }
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ığı birTextField
bileşimi.TextField
,visualTransformation
özelliğinde özel birVisualTransformation
örneğine sahiptir. Burada örneklendirilen özel sınıf olanNanpVisualTransformation
, 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 } } }
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çinTextField
tarafından kullanılan birTransformedText
ö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ı](https://developer.android.google.cn/static/quick-guides/content/nanp_formatter.gif?hl=tr)
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:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=tr)
Görünen metin
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=tr)