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

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

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

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

כדי להטמיע את הקוד הזה, צריך להגדיר את 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, הכיתה בהתאמה אישית שנוצרת כאן, מוגדרת בקטע הבא.

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

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

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

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

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

יש לכם שאלות או משוב

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