فرمت خودکار شماره تلفن در یک فیلد متنی

می‌توانید شماره تلفن را در یک فیلد نوشتاری در برنامه خود قالب‌بندی کنید و با فرمت کردن شماره تلفن در هنگام وارد کردن ارقام، در وقت کاربران صرفه‌جویی کنید. برای فرمت خودکار شماره تلفن این دستورالعمل را دنبال کنید:

  • فیلد متن را ایجاد کنید.
  • فرمت خودکار یک عدد در قسمت متن.

سازگاری نسخه

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

نتایج

یک شماره تلفن با فرمت خودکار در قسمت متن
شکل 1. یک شماره تلفن با فرمت خودکار در قسمت متن.

مجموعه هایی که حاوی این راهنما هستند

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

متن بخش مرکزی هر رابط کاربری است. روش های مختلفی را بیابید که می توانید متن را در برنامه خود ارائه دهید تا تجربه کاربری لذت بخشی را ارائه دهید.
بیاموزید که چگونه با وارد کردن متن و استفاده از سایر ابزارهای ورودی، راه‌هایی را برای تعامل کاربران با برنامه‌تان پیاده‌سازی کنید.

سوال یا بازخورد داشته باشید

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع بیاموزید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.