ป้อนข้อความอัตโนมัติใน "เขียน"

แอปบางแอป เช่น เครื่องมือจัดการรหัสผ่าน สามารถกรอกข้อมูลในคอมโพเนนต์ในแอปอื่นๆ ด้วยข้อมูลที่ได้จากผู้ใช้ แอปที่กรอกข้อมูลในคอมโพเนนต์ของแอปอื่นๆ เรียกว่าบริการป้อนข้อความอัตโนมัติ เฟรมเวิร์กการป้อนข้อความอัตโนมัติจะจัดการการสื่อสารระหว่างแอปกับบริการป้อนข้อความอัตโนมัติ

การกรอกข้อมูลเข้าสู่ระบบและแบบฟอร์มเป็นงานที่ใช้เวลานานและเกิดข้อผิดพลาดได้ง่าย การป้อนข้อความอัตโนมัติช่วยให้ผู้ใช้ประหยัดเวลาในการกรอกข้อมูลในช่องต่างๆ และลดข้อผิดพลาดในการป้อนข้อมูลของผู้ใช้

คุณสามารถใช้การป้อนข้อความอัตโนมัติใน Compose ได้ด้วยโค้ดเพียงไม่กี่บรรทัด ฟีเจอร์นี้ให้ประโยชน์แก่ผู้ใช้ดังนี้

กรอกข้อมูลเข้าสู่ระบบ

การป้อนข้อความอัตโนมัติช่วยให้ผู้ใช้ป้อนข้อมูลเข้าสู่ระบบได้ดังนี้

• ระบบจะแสดงรายการแนะนำสำหรับการป้อนข้อความอัตโนมัติแก่ผู้ใช้เมื่อแตะช่องที่มีการตั้งค่าความหมายของการป้อนข้อความอัตโนมัติ
• ระบบจะแสดงคำแนะนำการป้อนข้อความอัตโนมัติแก่ผู้ใช้และกรองคำแนะนำเหล่านั้นตามสิ่งที่ผู้ใช้พิมพ์

บันทึกข้อมูลประจำตัว

ผู้ใช้บันทึกข้อมูลเข้าสู่ระบบผ่านการป้อนข้อความอัตโนมัติได้ดังนี้

• ระบบจะเรียกใช้กล่องโต้ตอบบันทึก ซึ่งจะแจ้งให้ผู้ใช้บันทึกข้อมูลเมื่อป้อนข้อมูลใหม่หรือข้อมูลอัปเดตลงในช่องที่เปิดใช้การป้อนข้อความอัตโนมัติ การบันทึกทำได้ 2 วิธีดังนี้
  • อย่างชัดเจน โดยส่งข้อมูล (เช่น ผ่านการคลิกปุ่ม)
  • โดยนัย เมื่อผู้ใช้ไปยังส่วนอื่นๆ ภายนอกหน้าเว็บ
• ระบบอาจแนะนำรหัสผ่านที่รัดกุมให้ผู้ใช้เมื่อตั้งค่า ContentType.NewPassword ในช่องหนึ่งๆ ทั้งนี้ขึ้นอยู่กับผู้ให้บริการข้อมูลเข้าสู่ระบบ

คุณสามารถใช้ฟีเจอร์ป้อนข้อความอัตโนมัติในแอปเพื่อเพิ่มประสิทธิภาพการดึงข้อมูลที่บันทึกไว้สำหรับผู้ใช้ การป้อนข้อความอัตโนมัติรองรับคอมโพเนนต์ข้อความผ่าน BasicTextField และช่องข้อความ Material ทั้งหมดที่สร้างขึ้นจากคอมโพเนนต์นั้น

ค่าป้อนอัตโนมัติ

คุณต้องเปิดใช้งานการป้อนข้อความอัตโนมัติในการตั้งค่าก่อนจึงจะใช้ Autofill API ในอุปกรณ์หรือโปรแกรมจำลองได้ คุณสามารถระบุผู้ให้บริการข้อมูลเข้าสู่ระบบสำหรับฟีเจอร์ป้อนข้อความอัตโนมัติเพื่อจัดเก็บข้อมูลเข้าสู่ระบบได้

เพิ่มการป้อนข้อความอัตโนมัติในช่องข้อความโดยใช้ประเภทเนื้อหา

หากต้องการระบุว่า TextField เปิดใช้การป้อนข้อความอัตโนมัติ ให้ตั้งค่าความหมายของ ContentType ด้วยประเภทที่ช่องยอมรับ ซึ่งจะบอกบริการป้อนข้อความอัตโนมัติว่าข้อมูลผู้ใช้ประเภทใดที่อาจเกี่ยวข้องกับช่องนี้ ใช้ ContentType.Username เพื่อตั้งค่า TextField ที่ผู้ใช้จะกรอกชื่อผู้ใช้ได้

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

การตั้งค่าความหมายของ ContentType จะช่วยให้ผู้ใช้เข้าถึงข้อมูลที่บันทึกไว้ในโปรแกรมการเข้าสู่ระบบโดยใช้บัญชีของอุปกรณ์ได้ ตัวอย่างเช่น หากผู้ใช้ลงชื่อเข้าใช้แอปผ่านเบราว์เซอร์ Chrome ในแล็ปท็อปและบันทึกรหัสผ่านผ่านโปรแกรมการเข้าสู่ระบบแล้ว ระบบจะแสดงข้อมูลเข้าสู่ระบบให้ผู้ใช้ผ่านการป้อนข้อความอัตโนมัติ

เพิ่มช่องป้อนข้อความอัตโนมัติที่มีหลายประเภท

ในบางกรณี คุณอาจต้องการให้ TextField จัดการกับ ContentType มากกว่า 1 รายการ เช่น ช่องเข้าสู่ระบบอาจยอมรับอีเมลหรือชื่อผู้ใช้ คุณเพิ่มเนื้อหาหลายประเภทลงใน TextField ได้โดยใช้โอเปอเรเตอร์ +

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

ดูข้อมูลทุกประเภทที่บันทึกได้ด้วยฟีเจอร์ป้อนข้อความอัตโนมัติได้ที่ข้อมูลอ้างอิง ContentType

ป้อนข้อมูลด้วยการป้อนข้อความอัตโนมัติ

เมื่อเพิ่ม 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

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

ระบบจะเรียกใช้ Commit ทุกครั้งที่ผู้ใช้ออกจากหน้าจอ หากปุ่มส่งลิงก์กับการนำทาง ก็ไม่จำเป็นต้องเรียกใช้ Commit หากยังต้องการคลิกส่งเพื่อเรียกให้แสดงกล่องโต้ตอบบันทึก ให้เพิ่มคอมมิตที่นี่

เมื่อผู้ใช้คลิกปุ่มดังกล่าว ผู้ใช้จะเห็นชีตด้านล่างนี้ซึ่งแจ้งให้บันทึกข้อมูลเข้าสู่ระบบไปยังผู้ให้บริการข้อมูลเข้าสู่ระบบที่เลือก

ประหยัดอินเทอร์เน็ตมือถือด้วยการป้อนรหัสผ่านอัตโนมัติผ่านฟีเจอร์แนะนำรหัสผ่านที่รัดกุม

เมื่อคุณใช้ประเภทเนื้อหา NewUsername และ NewPassword ผู้ใช้อาจเห็นปุ่มในแป้นพิมพ์เพื่อแนะนำรหัสผ่านที่รัดกุม ทั้งนี้ขึ้นอยู่กับผู้ให้บริการข้อมูลเข้าสู่ระบบ เมื่อคลิกตัวเลือกนี้ Bottom Sheet จะปรากฏขึ้น ซึ่งช่วยให้ผู้ใช้บันทึกข้อมูลเข้าสู่ระบบได้ คุณไม่จำเป็นต้องติดตั้งใช้งานสิ่งใดเพิ่มเติมเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานนี้

การแก้ปัญหา

เมื่อเรียกใช้เส้นทางของผู้ใช้ "กำลังบันทึก" หากคุณคลิก "ไม่ตอนนี้" มากกว่า 1 ครั้ง ผู้ให้บริการข้อมูลเข้าสู่ระบบอาจไม่แสดงชีตด้านล่างอีกต่อไป หากต้องการเปิดใช้อีกครั้งและทำให้ตัวเลือกปรากฏขึ้นอีกครั้ง คุณต้องนำแอปที่บล็อกตัวเลือก "จำรหัสผ่านนี้ไหม" ออก

ปรับแต่งการป้อนข้อความอัตโนมัติเพิ่มเติม

ในเส้นทางของผู้ใช้ทั่วไปสำหรับการป้อนข้อความอัตโนมัติ เมื่อคอมโพเนนต์ที่เปิดใช้ฟีเจอร์ป้อนข้อความอัตโนมัติได้รับการป้อนข้อมูลเข้าสู่ระบบแล้ว คอมโพเนนต์จะเปลี่ยนสีและไฮไลต์เพื่อแจ้งให้ผู้ใช้ทราบว่าการป้อนข้อความอัตโนมัติเสร็จสมบูรณ์แล้ว

หากต้องการปรับแต่งสีไฮไลต์นี้ ให้ใช้ CompositionLocal แล้วระบุสีที่ต้องการ

val customHighlightColor = Color.Red

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

สีไฮไลต์สำหรับการป้อนข้อความอัตโนมัติเริ่มต้นคือ Color(0x4dffeb3b)