میتوانید شماره تلفن را در یک فیلد نوشتاری در برنامه خود قالببندی کنید و با فرمت کردن شماره تلفن در هنگام وارد کردن ارقام، در وقت کاربران صرفهجویی کنید. برای فرمت خودکار شماره تلفن این دستورالعمل را دنبال کنید:
- فیلد متن را ایجاد کنید.
- فرمت خودکار یک عدد در قسمت متن.
سازگاری نسخه
این پیاده سازی مستلزم آن است که 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برای انجام قالببندی استفاده میشود.
نتایج

مجموعه هایی که حاوی این راهنما هستند
این راهنما بخشی از مجموعههای راهنمای Quick Guide است که اهداف توسعه Android گستردهتری را پوشش میدهد:

نمایش متن
