میتوانید شماره تلفن را در یک فیلد نوشتاری در برنامه خود قالببندی کنید و با فرمت کردن شماره تلفن در هنگام وارد کردن ارقام، در وقت کاربران صرفهجویی کنید. برای فرمت خودکار شماره تلفن این دستورالعمل را دنبال کنید:
- فیلد متن را ایجاد کنید.
- فرمت خودکار یک عدد در قسمت متن.
سازگاری نسخه
این پیاده سازی مستلزم آن است که 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) ) }
نکات کلیدی در مورد کد
- یک
TextField
قابل ترکیب که در آنonValueChange
از یک عبارت منظم برای حذف همه نویسههای غیر عددی استفاده میکند و قبل از بهروزرسانی وضعیتphoneNumber
، طول آن را به حداکثر 10 کاراکتر محدود میکند. -
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
شامل دو روش است. یکی انحرافات بین رشته اصلی و رشته فرمت شده را ترسیم می کند و دیگری نگاشت معکوس را انجام می دهد. هنگامی که کاربر مکان مکان نما را در قسمت متن تغییر می دهد، این نگاشت ها پرش از کاراکترهای قالب بندی را امکان پذیر می کند. - رشته قالببندیشده و
phoneNumberOffsetTranslator
بهعنوان آرگومانهایی برای یک نمونهTransformedText
استفاده میشوند که برگردانده شده و توسطTextField
برای انجام قالببندی استفاده میشود.
نتایج
![یک شماره تلفن با فرمت خودکار در قسمت متن](https://developer.android.com/static/quick-guides/content/nanp_formatter.gif?hl=fa)
مجموعه هایی که حاوی این راهنما هستند
این راهنما بخشی از مجموعههای راهنمای Quick Guide است که اهداف توسعه Android گستردهتری را پوشش میدهد:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=fa)
نمایش متن
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=fa)