แอปบางแอป เช่น เครื่องมือจัดการรหัสผ่าน สามารถกรอกข้อมูลในคอมโพเนนต์ในแอปอื่นๆ ด้วยข้อมูลที่ได้จากผู้ใช้ แอปที่กรอกข้อมูลในคอมโพเนนต์ของแอปอื่นๆ เรียกว่าบริการป้อนข้อความอัตโนมัติ เฟรมเวิร์กการป้อนข้อความอัตโนมัติจะจัดการการสื่อสารระหว่างแอปกับบริการป้อนข้อความอัตโนมัติ
การกรอกข้อมูลเข้าสู่ระบบและแบบฟอร์มเป็นงานที่ใช้เวลานานและเกิดข้อผิดพลาดได้ง่าย การป้อนข้อความอัตโนมัติช่วยให้ผู้ใช้ประหยัดเวลาในการกรอกข้อมูลในช่องต่างๆ และลดข้อผิดพลาดในการป้อนข้อมูลของผู้ใช้
คุณสามารถใช้การป้อนข้อความอัตโนมัติในเครื่องมือเขียนได้โดยใช้โค้ดเพียงไม่กี่บรรทัด ฟีเจอร์นี้ให้ประโยชน์แก่ผู้ใช้ดังนี้
กรอกข้อมูลเข้าสู่ระบบ
ฟีเจอร์ป้อนข้อความอัตโนมัติช่วยให้ผู้ใช้ป้อนข้อมูลเข้าสู่ระบบได้ดังนี้
- ระบบจะแสดงรายการแนะนำสำหรับการป้อนข้อความอัตโนมัติแก่ผู้ใช้เมื่อแตะช่องที่มีการตั้งค่าความหมายของการป้อนข้อความอัตโนมัติ
- ระบบจะแสดงคำแนะนำการป้อนข้อความอัตโนมัติแก่ผู้ใช้และกรองคำแนะนำเหล่านั้นตามสิ่งที่ผู้ใช้พิมพ์
บันทึกข้อมูลประจำตัว
ผู้ใช้บันทึกข้อมูลเข้าสู่ระบบผ่านการป้อนข้อความอัตโนมัติได้ดังนี้
- ระบบจะเรียกใช้กล่องโต้ตอบบันทึก ซึ่งจะแจ้งให้ผู้ใช้บันทึกข้อมูลเมื่อป้อนข้อมูลใหม่หรือข้อมูลอัปเดตลงในช่องที่เปิดใช้การป้อนข้อความอัตโนมัติ
การบันทึกทำได้ 2 วิธีดังนี้
- อย่างชัดเจน โดยส่งข้อมูล (เช่น ผ่านการคลิกปุ่ม)
- โดยนัย เมื่อผู้ใช้ไปยังส่วนอื่นๆ ภายนอกหน้าเว็บ
- ระบบอาจแนะนำรหัสผ่านที่รัดกุมให้ผู้ใช้เมื่อตั้งค่า
ContentType.NewPassword
ในช่องหนึ่งๆ ทั้งนี้ขึ้นอยู่กับผู้ให้บริการข้อมูลเข้าสู่ระบบ
คุณสามารถใช้ฟีเจอร์ป้อนข้อความอัตโนมัติในแอปเพื่อเพิ่มประสิทธิภาพการดึงข้อมูลที่บันทึกไว้สำหรับผู้ใช้ การป้อนข้อความอัตโนมัติรองรับคอมโพเนนต์ข้อความผ่าน BasicTextField
และช่องข้อความ Material ทั้งหมดที่สร้างขึ้นจากคอมโพเนนต์นั้น
ค่าป้อนอัตโนมัติ
คุณต้องเปิดใช้งานการป้อนข้อความอัตโนมัติในการตั้งค่าก่อนจึงจะใช้ Autofill API ในอุปกรณ์หรือโปรแกรมจำลองได้ คุณสามารถระบุผู้ให้บริการข้อมูลเข้าสู่ระบบสำหรับฟีเจอร์ป้อนข้อความอัตโนมัติเพื่อจัดเก็บข้อมูลเข้าสู่ระบบได้
![หน้าการตั้งค่าที่แสดงวิธีระบุผู้ให้บริการข้อมูลเข้าสู่ระบบ](https://developer.android.com/static/develop/ui/compose/images/text/autofill_image_1.png?hl=th)
เพิ่มการป้อนข้อความอัตโนมัติในช่องข้อความโดยใช้ประเภทเนื้อหา
หากต้องการระบุว่า TextField
เปิดใช้การป้อนข้อความอัตโนมัติ ให้ตั้งค่าความหมายของ ContentType
ด้วยประเภทที่ช่องยอมรับ ซึ่งจะบอกบริการป้อนข้อความอัตโนมัติว่าข้อมูลผู้ใช้ประเภทใดที่อาจเกี่ยวข้องกับช่องนี้ ใช้ ContentType.Username
เพื่อตั้งค่า TextField
ที่ผู้ใช้จะกรอกชื่อผู้ใช้ได้
TextField( value = textFieldValue.value, onValueChange = {textFieldValue.value = it}, modifier = Modifier.semantics { contentType = ContentType.Username } )
การตั้งค่าความหมายของ ContentType
จะช่วยให้ผู้ใช้เข้าถึงข้อมูลที่บันทึกไว้ในโปรแกรมการเข้าสู่ระบบโดยใช้บัญชีของอุปกรณ์ได้ ตัวอย่างเช่น หากผู้ใช้ลงชื่อเข้าใช้แอปผ่านเบราว์เซอร์ Chrome ในแล็ปท็อปและบันทึกรหัสผ่านไว้ผ่านโปรแกรมการเข้าสู่ระบบ ระบบจะแสดงข้อมูลเข้าสู่ระบบให้ผู้ใช้ผ่านฟีเจอร์ป้อนข้อความอัตโนมัติ
เพิ่มช่องป้อนข้อความอัตโนมัติที่มีหลายประเภท
ในบางกรณี คุณอาจต้องการให้ TextField
จัดการกับ ContentType
มากกว่า 1 รายการ เช่น ช่องเข้าสู่ระบบอาจยอมรับอีเมลหรือชื่อผู้ใช้ คุณเพิ่มเนื้อหาหลายประเภทลงใน TextField
ได้โดยใช้โอเปอเรเตอร์ +
TextField( value = textFieldValue.value, onValueChange = { textFieldValue.value = it }, modifier = Modifier.semantics { contentType = ContentType.Username + ContentType.EmailAddress } )
ดูข้อมูลประเภททั้งหมดที่บันทึกได้ด้วยฟีเจอร์ป้อนข้อความอัตโนมัติได้ที่ข้อมูลอ้างอิง ContentType
ป้อนข้อมูลด้วยการป้อนข้อความอัตโนมัติ
เมื่อเพิ่ม ContentType
ใน TextField
แล้ว คุณไม่จําเป็นต้องดําเนินการใดๆ เพิ่มเติมเพื่อให้ผู้ใช้กรอกข้อมูลเข้าสู่ระบบได้
เมื่อผู้ใช้คลิกช่องที่เปิดใช้การป้อนข้อความอัตโนมัติ หากมีการจัดเก็บข้อมูลที่เกี่ยวข้อง ผู้ใช้จะเห็นชิปในแถบเครื่องมือเหนือแป้นพิมพ์ซึ่งแจ้งให้กรอกข้อมูลเข้าสู่ระบบ
![ชิปในแถบเครื่องมือข้อความที่แสดงข้อมูลเข้าสู่ระบบที่บันทึกไว้](https://developer.android.com/static/develop/ui/compose/images/text/autofill_image_5.png?hl=th)
ประหยัดอินเทอร์เน็ตด้วยฟีเจอร์ป้อนข้อความอัตโนมัติผ่านการนําทาง
คอมโพซจะพยายามระบุโดยอัตโนมัติเมื่อผู้ใช้ไปยังส่วนอื่นๆ ภายนอกหน้าเว็บและบันทึกข้อมูลเข้าสู่ระบบที่ป้อน เมื่อเปิดใช้การป้อนข้อความอัตโนมัติในช่องหนึ่งๆ ช่องนั้นจะบันทึกข้อมูลเข้าสู่ระบบโดยอัตโนมัติเมื่อผู้ใช้ออกจากหน้าเว็บโดยที่ไม่ต้องเขียนโค้ดเพิ่มเติม
บันทึกข้อมูลอย่างชัดเจนด้วยฟีเจอร์ป้อนข้อความอัตโนมัติ
หากต้องการบันทึกข้อมูลเข้าสู่ระบบใหม่อย่างชัดเจนผ่านช่องข้อความด้วยฟีเจอร์ป้อนข้อความอัตโนมัติ ผู้จัดการป้อนข้อความอัตโนมัติควรดำเนินการกับบริบทการป้อนข้อความอัตโนมัติ (หรือยกเลิก) จากนั้นผู้จัดการการป้อนข้อความอัตโนมัติในเครื่องจะสื่อสารกับเฟรมเวิร์กการป้อนข้อความอัตโนมัติทุกครั้งที่จําเป็น หากต้องการนำข้อมูลเข้าสู่ระบบที่ผู้ใช้ป้อนออก ให้เรียกใช้ AutofillManager.cancel เพื่อลบข้อมูลที่รอดำเนินการโดยไม่บันทึก
ข้อมูลโค้ดต่อไปนี้แสดงวิธีบันทึกข้อมูลด้วยการป้อนอัตโนมัติโดยใช้ปุ่มอย่างชัดแจ้ง
สร้างตัวแปรภายในเพื่อเก็บข้อมูลตัวจัดการการป้อนข้อความอัตโนมัติ ซึ่งสามารถเรียกดูได้ดังนี้
val autofillManager = LocalAutofillManager.current
ใน
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 } ) }
บันทึกบริบทการป้อนข้อความอัตโนมัติตามต้องการด้วยการคลิกปุ่มต่อไปนี้
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 ทุกครั้งที่ผู้ใช้ออกจากหน้าจอ หากปุ่มส่งลิงก์กับการนำทาง ก็ไม่จำเป็นต้องเรียกใช้ Commit หากยังต้องการคลิกส่งเพื่อเรียกให้แสดงกล่องโต้ตอบบันทึก ให้เพิ่มคอมมิตที่นี่
เมื่อผู้ใช้คลิกปุ่มดังกล่าว ผู้ใช้จะเห็นชีตด้านล่างนี้ซึ่งแจ้งให้บันทึกข้อมูลเข้าสู่ระบบไปยังผู้ให้บริการข้อมูลเข้าสู่ระบบที่เลือก
![Bottom Sheet ที่แจ้งให้ผู้ใช้บันทึกรหัสผ่าน](https://developer.android.com/static/develop/ui/compose/images/text/autofill_image_2.png?hl=th)
ประหยัดอินเทอร์เน็ตมือถือด้วยการป้อนรหัสผ่านอัตโนมัติผ่านฟีเจอร์แนะนำรหัสผ่านที่รัดกุม
เมื่อคุณใช้ประเภทเนื้อหา NewUsername
และ NewPassword
ผู้ใช้อาจเห็นปุ่มในแป้นพิมพ์เพื่อแนะนำรหัสผ่านที่รัดกุม ทั้งนี้ขึ้นอยู่กับผู้ให้บริการข้อมูลเข้าสู่ระบบ เมื่อคลิกตัวเลือกนี้ Bottom Sheet จะปรากฏขึ้น ซึ่งช่วยให้ผู้ใช้บันทึกข้อมูลเข้าสู่ระบบได้ คุณไม่จำเป็นต้องติดตั้งใช้งานสิ่งใดเพิ่มเติมเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานนี้
![ชิปแนะนำรหัสผ่านที่รัดกุมในแถบเครื่องมือของแป้นพิมพ์](https://developer.android.com/static/develop/ui/compose/images/text/autofill_image_3.png?hl=th)
![Bottom Sheet ที่แจ้งให้ผู้ใช้ใช้รหัสผ่านที่รัดกุม](https://developer.android.com/static/develop/ui/compose/images/text/autofill_image_4.png?hl=th)
การแก้ปัญหา
เมื่อเรียกใช้เส้นทางของผู้ใช้ "กำลังบันทึก" หากคุณคลิก "ไม่ตอนนี้" มากกว่า 1 ครั้ง ผู้ให้บริการข้อมูลเข้าสู่ระบบอาจไม่แสดงชีตด้านล่างอีกต่อไป หากต้องการเปิดใช้อีกครั้งและทำให้ตัวเลือกปรากฏขึ้นอีกครั้ง คุณต้องนำแอปที่บล็อกตัวเลือก "จำรหัสผ่านนี้ไหม" ออก
![Bottom Sheet ที่แจ้งให้ผู้ใช้บันทึกรหัสผ่าน](https://developer.android.com/static/develop/ui/compose/images/text/autofill_image_6.png?hl=th)
ปรับแต่งการป้อนข้อความอัตโนมัติเพิ่มเติม
ในเส้นทางของผู้ใช้ทั่วไปสำหรับการป้อนข้อความอัตโนมัติ เมื่อคอมโพเนนต์ที่เปิดใช้ฟีเจอร์ป้อนข้อความอัตโนมัติได้รับการป้อนข้อมูลเข้าสู่ระบบแล้ว คอมโพเนนต์จะเปลี่ยนสีและไฮไลต์เพื่อแจ้งให้ผู้ใช้ทราบว่าการป้อนข้อความอัตโนมัติเสร็จสมบูรณ์แล้ว
หากต้องการปรับแต่งสีไฮไลต์นี้ ให้ใช้ 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)