Một số ứng dụng, chẳng hạn như trình quản lý mật khẩu, có thể điền dữ liệu mà người dùng cung cấp vào các thành phần trong ứng dụng khác. Những ứng dụng điền vào thành phần của các ứng dụng khác được gọi là dịch vụ tự động điền. Khung tự động điền quản lý quá trình giao tiếp giữa ứng dụng và dịch vụ tự động điền.
Việc điền thông tin xác thực và biểu mẫu rất tốn thời gian và dễ xảy ra lỗi. Tính năng tự động điền giúp người dùng tiết kiệm thời gian điền vào các trường và giảm thiểu lỗi do người dùng nhập.
Chỉ với vài dòng mã, bạn có thể triển khai tính năng Tự động điền trong Compose. Tính năng này mang lại cho người dùng những lợi ích sau:
Điền thông tin đăng nhập
Tính năng tự động điền cho phép người dùng điền thông tin xác thực theo những cách sau:
- Hệ thống sẽ hiển thị các đề xuất Tự động điền cho người dùng khi họ nhấn vào một trường có ngữ nghĩa Tự động điền.
- Hệ thống sẽ hiển thị các đề xuất Tự động điền cho người dùng và lọc các đề xuất đó dựa trên nội dung người dùng nhập.
Lưu thông tin đăng nhập
Người dùng có thể lưu thông tin xác thực thông qua tính năng Tự động điền theo những cách sau:
- Hệ thống sẽ kích hoạt hộp thoại lưu, nhắc người dùng lưu thông tin khi họ nhập thông tin mới hoặc thông tin cập nhật vào một trường đã bật tính năng Tự động điền.
Bạn có thể lưu theo hai cách:
- Rõ ràng, bằng cách cam kết thông tin (ví dụ: thông qua một lượt nhấp vào nút)
- Ngầm định, khi người dùng rời khỏi trang
- Tuỳ thuộc vào trình cung cấp thông tin xác thực, hệ thống có thể đề xuất mật khẩu mạnh cho người dùng khi một trường được đặt
ContentType.NewPassword.
Bạn có thể sử dụng tính năng Tự động điền trong ứng dụng để đơn giản hoá việc truy xuất dữ liệu đã lưu cho người dùng. Tính năng tự động điền hỗ trợ các thành phần văn bản thông qua BasicTextField và tất cả các trường văn bản Material được xây dựng trên thành phần đó.
Thiết lập Tự động điền
Trước khi sử dụng API Tự động điền trên thiết bị hoặc trình mô phỏng, bạn phải kích hoạt tính năng Tự động điền trong phần Cài đặt. Tại đó, bạn có thể chỉ định một trình cung cấp thông tin xác thực cho tính năng Tự động điền để lưu trữ thông tin xác thực của bạn.
Thêm tính năng Tự động điền vào trường văn bản bằng cách sử dụng loại nội dung
Để cho biết rằng TextField đã bật tính năng Tự động điền, hãy đặt ngữ nghĩa ContentType với các loại mà trường có thể chấp nhận. Điều này cho dịch vụ Tự động điền biết loại dữ liệu người dùng nào có thể liên quan đến trường cụ thể này. Sử dụng ContentType.Username để đặt TextField mà người dùng có thể điền tên người dùng của họ.
Bằng cách đặt ngữ nghĩa ContentType, người dùng có thể truy cập vào thông tin Tự động điền đã được lưu trong trình cung cấp thông tin xác thực của thiết bị. Ví dụ: nếu người dùng đã đăng nhập vào ứng dụng của bạn thông qua trình duyệt Chrome trên máy tính xách tay và lưu mật khẩu thông qua một nhà cung cấp thông tin xác thực, thì thông tin xác thực của họ sẽ được cung cấp cho họ thông qua tính năng Tự động điền.
TextField( state = rememberTextFieldState(), modifier = Modifier.semantics { contentType = ContentType.Username } )
Thêm các trường Tự động điền có nhiều loại
Trong một số trường hợp, bạn có thể muốn TextField của mình đảm nhận nhiều hơn một ContentType. Ví dụ: trường đăng nhập có thể chấp nhận địa chỉ email hoặc tên người dùng. Bạn có thể thêm nhiều loại nội dung vào TextField bằng toán tử +.
Để biết tất cả các loại dữ liệu có thể lưu bằng tính năng Tự động điền, hãy xem tài liệu tham khảo về ContentType.
TextField( state = rememberTextFieldState(), modifier = Modifier.semantics { contentType = ContentType.Username + ContentType.EmailAddress } )
Điền dữ liệu bằng tính năng Tự động điền
Khi thêm ContentType vào TextField, bạn sẽ không cần làm gì khác để người dùng có thể điền thông tin đăng nhập.
Khi người dùng nhấp vào một trường đã bật tính năng Tự động điền, nếu có dữ liệu liên quan được lưu trữ, họ sẽ thấy một khối trong thanh công cụ phía trên bàn phím nhắc họ điền thông tin đăng nhập.
Lưu dữ liệu bằng tính năng Tự động điền thông qua thao tác điều hướng
Compose tự động cố gắng xác định thời điểm người dùng rời khỏi một trang và gửi thông tin đăng nhập đã nhập. Sau khi được bật tính năng Tự động điền, một trường sẽ tự động lưu thông tin đăng nhập khi người dùng rời khỏi trang mà không cần thêm mã.
Lưu dữ liệu một cách rõ ràng bằng tính năng Tự động điền
Để lưu rõ ràng thông tin xác thực mới thông qua các trường văn bản bằng tính năng Tự động điền, trình quản lý Tự động điền phải cam kết (hoặc huỷ) bối cảnh Tự động điền. Sau đó, trình quản lý Tự động điền cục bộ sẽ giao tiếp với khung Tự động điền bất cứ khi nào cần thiết. Nếu bạn muốn xoá thông tin đăng nhập mà người dùng đã nhập, hãy gọi AutofillManager.cancel để xoá mọi dữ liệu đang chờ xử lý mà không lưu dữ liệu đó.
Các đoạn mã sau đây cho biết cách lưu dữ liệu bằng tính năng Tự động điền một cách rõ ràng bằng cách sử dụng một nút:
Tạo một biến cục bộ để giữ Trình quản lý tự động điền. Bạn có thể truy xuất biến này theo cách sau:
val autofillManager = LocalAutofillManager.current
Trong
TextField(s), hãy thêm loại nội dung bạn đã chọn thông quaModifier.semantics: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 } ) }
Xác nhận ngữ cảnh Tự động điền khi cần bằng cách nhấp vào nút:
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") } }
Commit được gọi bất cứ khi nào người dùng rời khỏi màn hình. Nếu nút Submit (Gửi) được liên kết với thao tác điều hướng, thì bạn không cần gọi Commit (Cam kết). Nếu bạn vẫn muốn nhấp vào Gửi để kích hoạt hộp thoại lưu, hãy thêm Cam kết tại đây.
Khi người dùng nhấp vào nút này, họ sẽ thấy bảng dưới cùng này nh��c họ lưu thông tin xác thực vào trình cung cấp thông tin xác thực đã chọn:
Lưu dữ liệu bằng tính năng Tự động điền thông qua đề xuất mật khẩu mạnh
Tuỳ thuộc vào trình cung cấp thông tin xác thực, khi bạn sử dụng các loại nội dung NewUsername và NewPassword, người dùng có thể thấy một nút trên bàn phím để Đề xuất mật khẩu mạnh. Khi họ nhấp vào nút này, một bảng dưới cùng sẽ xuất hiện, cho phép họ lưu thông tin xác thực. Bạn không cần triển khai
bất cứ điều gì khác để người dùng có được trải nghiệm này.
Khắc phục sự cố
Khi gọi hành trình "lưu" của người dùng, nếu bạn nhấp vào "Không phải bây giờ" nhiều lần, thì nhà cung cấp thông tin xác thực có thể không hiển thị trang tính dưới cùng nữa. Để bật lại và cho phép thông báo này xuất hiện một lần nữa, bạn cần xoá những ứng dụng cụ thể đã chặn thông báo "Nhớ mật khẩu này?".
Tuỳ chỉnh thêm tính năng Tự động điền
Trong hành trình thông thường của người dùng tính năng Tự động điền, khi một thành phần hỗ trợ tính năng Tự động điền được điền thông tin đăng nhập, thành phần đó sẽ thay đổi màu sắc và được làm nổi bật để báo cho người dùng biết rằng tính năng Tự động điền đã hoàn tất thành công.
Để tuỳ chỉnh màu đánh dấu này, hãy sử dụng CompositionLocal và cung cấp màu bạn muốn. Màu đánh dấu mặc định của tính năng Tự động điền được xác định là Color(0x4dffeb3b).
val customHighlightColor = Color.Red CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) { TextField( state = rememberTextFieldState(), modifier = Modifier.semantics { contentType = ContentType.Username } ) }