מילוי אוטומטי בחלונית הכתיבה

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

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

אפשר להטמיע מילוי אוטומטי ב-Compose באמצעות כמה שורות קוד בלבד. התכונה הזו מספקת למשתמשים את היתרונות הבאים:

מילוי פרטי הכניסה

התכונה 'מילוי אוטומטי' מאפשרת למשתמשים למלא את פרטי הכניסה שלהם בדרכים הבאות:

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

שמירת פרטי הכניסה

משתמשים יכולים לשמור פרטי כניסה באמצעות המילוי האוטומטי בדרכים הבאות:

• המערכת מציגה תיבת דו-שיח לשמירה, שבה המשתמש מתבקש לשמור מידע כשהוא מזין מידע חדש או מעודכן בשדה שמופעל בו מילוי אוטומטי. אפשר לשמור את השינויים בשתי דרכים:
  • באופן מפורש, על ידי אישור מידע (לדוגמה, בלחיצה על לחצן)
  • באופן מרומז, כשמשתמש יוצא מהדף
• בהתאם לספק פרטי הכניסה, המערכת עשויה להציע למשתמש סיסמה חזקה כשהשדה מוגדר כ-ContentType.NewPassword.

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

הגדר מילוי אוטומטי

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

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

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

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

שדה טקסט מבוסס-ערך

TextField(
    value = textFieldValue.value,
    onValueChange = {textFieldValue.value = it},
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

שדה טקסט מבוסס מצב

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

הוספת שדות למילוי אוטומטי עם כמה סוגים

במקרים מסוימים, יכול להיות שתרצו שTextField יקבל יותר מContentType. לדוגמה, יכול להיות שבשדה להתחברות אפשר להזין כתובת אימייל או שם משתמש. אפשר להוסיף כמה סוגי תוכן ל-TextField באמצעות האופרטור +.

בContentType מאמר הזה מפורטים כל סוגי הנתונים שאפשר לשמור באמצעות מילוי אוטומטי.

שדה טקסט מבוסס-ערך

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

שדה טקסט מבוסס-מצב

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

מילוי נתונים באמצעות מילוי אוטומטי

כשמוסיפים ContentType ב-TextField, המשתמשים לא צריכים לעשות שום דבר כדי למלא את פרטי הכניסה.

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

חיסכון בנתונים בעזרת מילוי אוטומטי באמצעות ניווט

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

שמירת נתונים באופן מפורש באמצעות מילוי אוטומטי

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

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

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

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. בTextField(s), מוסיפים את סוג התוכן הרצוי דרך Modifier.semantics:

   • עם שדות טקסט מבוססי-ערך:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             value = textFieldValue.value,
             onValueChange = { textFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewUsername }
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             value = textFieldValue.value,
             onValueChange = { textFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewPassword }
         )
     }
     AutofillSnippets.kt

   • עם שדות טקסט מבוססי-מצב:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewUsername }
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewPassword }
         )
     }
     AutofillSnippets.kt

3. מבצעים את ההקשר של המילוי האוטומטי לפי הצורך באמצעות לחיצה על לחצן:

   • עם שדות טקסט מבוססי-ערך:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             value = textFieldValue.value,
             onValueChange = { textFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             value = textFieldValue.value,
             onValueChange = { textFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

   • עם שדות טקסט מבוססי-מצב:

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

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

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

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

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

פתרון בעיות

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

התאמה אישית נוספת של המילוי האוטומטי

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

כדי להתאים אישית את צבע ההדגשה, משתמשים ב-CompositionLocal ומזינים את הצבע הרצוי. צבע ההדגשה של המילוי האוטומטי שמוגדר כברירת מחדל הוא Color(0x4dffeb3b).

שדות טקסט מבוססי-ערך

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt

שדות טקסט מבוססי מצב

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt