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

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

نمایش متن
