עיצוב אוטומטי של מספר טלפון בשדה טקסט

אתם יכולים להגדיר עיצוב אוטומטי של מספר טלפון בשדה טקסט באפליקציה, וכך לחסוך למשתמשים זמן כי המספר יעוצב בזמן שהם יזינו את הספרות. כדי להגדיר פורמט אוטומטי למספר טלפון, פועלים לפי ההנחיות הבאות:

  • יוצרים את שדה הטקסט.
  • עיצוב אוטומטי של מספר בשדה הטקסט.

תוצאות

מספר טלפון בפורמט אוטומטי בשדה הטקסט
איור 1. מספר טלפון בפורמט אוטומטי בשדה הטקסט.

תאימות גרסאות

כדי להטמיע את התכונה הזו, צריך להגדיר את minSDK בפרויקט לרמת API‏ 21 ומעלה.

פניות קשורות

יצירת שדה הטקסט

קודם כול, מגדירים את TextField. בדוגמה הזו מוצג מספר טלפון בפורמט של תוכנית המספור בצפון אמריקה (NANP).NanpVisualTransformation הפונקציה מעצבת מחרוזת גולמית של מספרים לפורמט NANP, למשל: ‫1234567890 ל-456-7890 (123).

@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 משתמשת בביטוי רגולרי כדי להסיר את כל התווים שאינם מספריים, ומגבילה את האורך ל-10 תווים לכל היותר לפני עדכון המצב phoneNumber.
  • ל-TextField יש מופע מותאם אישית של VisualTransformation שמוגדר במאפיין visualTransformation. ‫NanpVisualTransformation, המחלקה המותאמת אישית שנוצרה כאן, מוגדרת בקטע הבא.

עיצוב אוטומטי של מספר בשדה הטקסט

כדי לעצב מחרוזת גולמית של מספרים, משתמשים בהטמעה של המחלקה custom 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 לביצוע העיצוב.

אוספים שכוללים את המדריך הזה

המדריך הזה הוא חלק מאוספים של מדריכים מהירים שנבחרו בקפידה ועוסקים ביעדים רחבים יותר של פיתוח ל-Android:

טקסט הוא חלק מרכזי בכל ממשק משתמש. כאן מוסבר על דרכים שונות להצגת טקסט באפליקציה כדי לספק חוויית משתמש נעימה.
כאן מוסבר איך להטמיע דרכים שבהן המשתמשים יכולים לקיים אינטראקציה עם האפליקציה באמצעות הזנת טקסט ואמצעי קלט אחרים.

יש לך שאלות או משוב?

אפשר לעבור לדף השאלות הנפוצות שלנו כדי לקרוא מדריכים מהירים, או לפנות אלינו ולספר לנו מה דעתך.