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

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

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

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

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

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

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

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

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

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

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

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

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

דף הגדרות שבו מוסבר איך לציין ספק פרטי כניסה.
איור 1. דף הגדרות שבו מוסבר איך לציין ספק פרטי כניסה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    val autofillManager = LocalAutofillManager.current

  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 }
        )
    }

  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") }
    }

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

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

גיליון תחתון עם בקשה למשתמשים לשמור את הסיסמה.
איור 3. גיליון תחתון עם בקשה למשתמשים לשמור את הסיסמה.

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

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

הצ'יפ 'הצעת סיסמה חזקה' בסרגל הכלים של המקלדת.
איור 4. הצ'יפ 'הצעת סיסמה חזקה' בסרגל הכלים של המקלדת.
גיליון תחתון עם בקשה למשתמשים להשתמש בסיסמה חזקה.
איור 5. גיליון תחתון עם בקשה למשתמשים להשתמש בסיסמה חזקה.

פתרון בעיות

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

גיליון תחתון עם בקשה למשתמשים לשמור את הסיסמה.
איור 6. גיליון תחתון עם בקשה למשתמשים לשמור את הסיסמה.

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

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

כדי להתאים אישית את צבע ההדגשה, משתמשים ב-CompositionLocal ומזינים את הצבע הרצוי.

val customHighlightColor = Color.Red

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

צבע ההדגשה שמוגדר כברירת מחדל במילוי האוטומטי הוא Color(0x4dffeb3b).