Tính năng Tự động điền trong Compose

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 các ứng dụng khác. Những ứng dụng điền vào các 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 hoạt động đầu vào của người dùng.

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 xác thực

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 hiển thị các đề xuất của tính năng 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 hiển thị các đề xuất của tính năng Tự động điền cho người dùng và lọc các đề xuất đó dựa trên nội dung mà người dùng nhập.

Lưu thông tin xác thực

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 kích hoạt mộ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 có bật tính năng Tự động điền. Bạn có thể lưu theo 2 cách:
    • Rõ ràng, bằng cách xác nhận thông tin (ví dụ: thông qua một lượt nhấp vào nút)
    • Ngầm, khi người dùng rời khỏi trang
  • Tuỳ thuộc vào nhà cung cấp thông tin xác thực, hệ thống có thể đề xuất một mật khẩu mạnh cho người dùng khi một trường có ContentType.NewPassword được đặt.

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 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 mình.

Trang cài đặt cho biết cách chỉ định một trình cung cấp thông tin đăng nhập.
Hình 1. Một trang cài đặt cho biết cách chỉ định nhà cung cấp thông tin xác thực.

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 biết cho các 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 một TextField mà người dùng có thể điền bằng 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 đã lưu trong 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 của họ thông qua 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.

Trường văn bản dựa trên giá trị

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

Trường văn bản dựa trên trạng thái

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

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ó nhiều ContentType. Ví dụ: một 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 ContentType .

Trường văn bản dựa trên giá trị

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

Trường văn bản dựa trên trạng thái

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

Điền dữ liệu bằng tính năng Tự động điền

Khi bạn thêm một ContentType vào TextField, bạn sẽ không cần phải làm gì khác để người dùng có thể điền thông tin xác thực.

Khi người dùng nhấp vào một trường có 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 chip trong thanh công cụ phía trên bàn phím, nhắc họ điền thông tin xác thực.

Các khối trong thanh công cụ văn bản cho biết thông tin đăng nhập đã lưu.
Hình 2. Các chip trong thanh công cụ văn bản cho thấy thông tin xác thực đã lưu.

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 sẽ tự động cố gắng xác định thời điểm người dùng di chuyển khỏi một trang và xác nhận thông tin xác thực đã nhập. Sau khi một trường được bật tính năng Tự động điền, trường đó sẽ tự động lưu thông tin xác thực khi người dùng di chuyển 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 thông tin xác thực mới một cách rõ ràng thông qua các trường văn bản bằng tính năng Tự động điền, ngữ cảnh Tự động điền phải được xác nhận (hoặc huỷ) bởi trình quản lý 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 khi cần. Nếu bạn muốn xoá thông tin xác thực 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 một cách rõ ràng bằng tính năng Tự động điền bằng cách sử dụng một nút:

  1. Tạo một biến cục bộ để lưu giữ trình quản lý Tự động điền, có thể truy xuất theo cách sau: 

    val autofillManager = LocalAutofillManager.current
    AutofillSnippets.kt

  2. Trong TextField(s), hãy thêm loại nội dung bạn chọn thông qua Modifier.semantics:

    • Với các trường văn bản dựa trên giá trị: 

      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

    • Với các trường văn bản dựa trên trạng thái: 

      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. Xác nhận ngữ cảnh Tự động điền khi cần thông qua một lượt nhấp vào nút:

    • Với các trường văn bản dựa trên giá trị: 

      val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        value = usernameTextFieldValue.value,
        onValueChange = { usernameTextFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewUsername },
    )

    Spacer(modifier = Modifier.height(16.dp))

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

    // Submit button
    Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
}
      AutofillSnippets.kt

    • Với các trường văn bản dựa trên trạng thái: 

      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 được gọi mỗi khi người dùng di chuyển khỏi màn hình. Nếu nút Submit được liên kết với thao tác điều hướng, thì bạn không cần gọi Commit. Nếu bạn vẫn muốn nhấp vào Submit để kích hoạt hộp thoại lưu, hãy thêm Commit vào đâ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 nhà cung cấp thông tin xác thực đã chọn:

Bảng dưới cùng nhắc người dùng lưu mật khẩu.
Hình 3. Bảng dưới cùng nhắc người dùng lưu mật khẩu.

Lưu dữ liệu bằng tính năng Tự động điền thông qua tính năng đề xuất mật khẩu mạnh

Tuỳ thuộc vào 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 trong 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 kỳ điều gì khác để người dùng có trải nghiệm này.

Thẻ đề xuất mật khẩu mạnh trong thanh công cụ bàn phím.
Hình 4. Chip đề xuất mật khẩu mạnh trong thanh công cụ bàn phím.
Bảng dưới cùng nhắc người dùng sử dụng mật khẩu mạnh.
Hình 5. Bảng dưới cùng nhắc người dùng sử dụng mật khẩu mạnh mật khẩu.

Khắc phục sự cố

Khi gọi hành trình của người dùng "lưu", nếu bạn nhấp vào "Không phải bây giờ" nhiều lần, nhà cung cấp thông tin xác thực có thể không còn hiển thị bảng dưới cùng nữa. Để bật lại và hiển thị lại một lần nữa, bạn cần xoá các ứng dụng cụ thể đã chặn "Ghi nhớ mật khẩu này?".

Bảng dưới cùng nhắc người dùng lưu mật khẩu.
Hình 6.Bảng dưới cùng nhắc người dùng lưu mật khẩu.

Tuỳ chỉnh thêm tính năng Tự động điền

Trong hành trình của người dùng Tự động điền thông thường, khi một thành phần có bật tính năng Tự động điền đã được điền sẵn thông tin xác thực, thành phần đó sẽ thay đổi màu và được làm nổi bật để báo hiệu cho người dùng rằng tính năng Tự động điền đã hoàn tất thành công.

Để tuỳ chỉnh màu làm nổi bật này, hãy sử dụng CompositionLocal và cung cấp bất kỳ màu nào bạn muốn. Màu làm nổi bật mặc định của tính năng Tự động điền được xác định là Color(0x4dffeb3b).

Các trường văn bản dựa trên giá trị

val customHighlightColor = Color.Red

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

Các trường văn bản dựa trên trạng thái

val customHighlightColor = Color.Red

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