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

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

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

سازگاری نسخه

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

نتایج

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

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

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

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

سوالی یا بازخوردی دارید؟

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