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