אתם יכולים להגדיר פורמט אוטומטי למספר טלפון בשדה טקסט באפליקציה, וכך לחסוך למשתמשים זמן על ידי עיצוב המספר בזמן שהם מזינים את הספרות. כדי להגדיר את הפורמט של מספר טלפון באופן אוטומטי, פועלים לפי ההנחיות הבאות:
- יוצרים את שדה הטקסט.
- פורמט אוטומטי של מספר בשדה הטקסט.
תאימות גרסאות
כדי להטמיע את הקוד הזה, צריך להגדיר את 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
לביצוע הפורמט.
תוצאות
![מספר טלפון בפורמט אוטומטי בשדה הטקסט](https://developer.android.com/static/quick-guides/content/nanp_formatter.gif?hl=he)
אוספים שמכילים את המדריך הזה
המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=he)
הטקסט שיוצג
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=he)