Isi otomatis di Compose

Beberapa aplikasi, seperti pengelola sandi, dapat mengisi komponen di aplikasi lain dengan data yang diberikan oleh pengguna. Aplikasi yang mengisi komponen aplikasi lain disebut layanan isi otomatis. Framework isi otomatis mengelola komunikasi antara aplikasi dan layanan isi otomatis.

Mengisi kredensial dan formulir adalah tugas yang memakan waktu dan rentan error. Isi otomatis memungkinkan pengguna menghemat waktu yang dihabiskan untuk mengisi kolom dan meminimalkan kesalahan input pengguna.

Hanya dengan beberapa baris kode, Anda dapat menerapkan Isi Otomatis di Compose. Fitur ini memberikan manfaat berikut kepada pengguna:

Mengisi kredensial

Isi otomatis memungkinkan pengguna mengisi kredensial mereka dengan cara berikut:

• Sistem menampilkan saran Isi Otomatis untuk pengguna saat mereka mengetuk kolom tempat semantik Isi Otomatis ditetapkan.
• Sistem menampilkan saran Isi Otomatis untuk pengguna dan memfilternya berdasarkan apa yang diketik pengguna.

Menyimpan kredensial

Pengguna dapat menyimpan kredensial melalui Isi Otomatis dengan cara berikut:

• Sistem memicu dialog simpan, yang meminta pengguna untuk menyimpan informasi saat mereka memasukkan informasi baru atau yang diperbarui ke kolom yang mengaktifkan Isi Otomatis. Penyimpanan dapat dilakukan dengan dua cara:
  • Secara eksplisit, dengan melakukan informasi (misalnya, melalui klik tombol)
  • Secara implisit, saat pengguna keluar dari halaman
• Bergantung pada penyedia kredensial Anda, sistem dapat menyarankan sandi yang kuat kepada pengguna saat kolom telah menetapkan ContentType.NewPassword.

Anda dapat menggunakan Isi Otomatis di aplikasi untuk menyederhanakan pengambilan data tersimpan bagi pengguna. Isi otomatis mendukung komponen teks melalui BasicTextField dan semua kolom teks Material yang dibuat berdasarkan komponen tersebut.

Siapkan Pengisian Otomatis

Sebelum menggunakan Autofill API di perangkat atau emulator, Anda harus mengaktifkan Isi Otomatis di Setelan. Di sana, Anda dapat menentukan penyedia kredensial untuk Isi Otomatis guna menyimpan kredensial Anda.

Menambahkan Isi Otomatis ke kolom teks menggunakan jenis konten

Untuk menunjukkan bahwa TextField mengaktifkan Isi Otomatis, tetapkan semantik ContentType dengan jenis yang dapat diterima kolom. Hal ini menunjukkan kepada layanan Isi Otomatis jenis data pengguna yang mungkin relevan dengan kolom tertentu ini. Gunakan ContentType.Username untuk menetapkan TextField yang dapat diisi pengguna dengan nama pengguna mereka.

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

Dengan menetapkan semantik ContentType, pengguna Anda dapat mengakses informasi Isi Otomatis yang sudah disimpan di penyedia kredensial perangkat mereka. Misalnya, jika pengguna telah login ke aplikasi Anda melalui browser Chrome di laptop dan menyimpan sandinya melalui penyedia kredensial, kredensial mereka akan ditampilkan kepada mereka melalui Isi Otomatis.

Menambahkan kolom Isi Otomatis dengan beberapa jenis

Dalam beberapa kasus, Anda mungkin ingin TextField menggunakan lebih dari satu ContentType. Misalnya, kolom login dapat menerima alamat email atau nama pengguna. Anda dapat menambahkan beberapa jenis konten ke TextField dengan operator +.

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

Untuk semua jenis data yang tersedia untuk disimpan dengan Isi Otomatis, lihat referensi ContentType.

Mengisi data dengan Isi Otomatis

Saat menambahkan ContentType di TextField, Anda tidak perlu melakukan hal lain agar pengguna dapat mengisi kredensial.

Saat pengguna mengklik kolom yang mengaktifkan Isi Otomatis, jika ada data yang relevan yang disimpan, mereka akan melihat chip di toolbar di atas keyboard yang meminta mereka untuk mengisi kredensial.

Menyimpan data dengan Isi Otomatis melalui navigasi

Compose secara otomatis mencoba menentukan kapan pengguna membuka halaman dan melakukan kredensial yang dimasukkan. Setelah diaktifkan, kolom Isi Otomatis akan otomatis menyimpan informasi kredensial saat pengguna keluar dari halaman tanpa memerlukan kode tambahan.

Menyimpan data secara eksplisit dengan Isi Otomatis

Untuk menyimpan kredensial baru secara eksplisit melalui kolom teks dengan Isi Otomatis, konteks Isi Otomatis harus di-commit (atau dibatalkan) oleh pengelola Isi Otomatis. Pengelola Isi Otomatis lokal kemudian berkomunikasi dengan framework Isi Otomatis jika diperlukan. Jika Anda ingin menghapus kredensial yang telah dimasukkan pengguna, panggil AutofillManager.cancel untuk menghapus data yang tertunda tanpa menyimpannya.

Cuplikan berikut menunjukkan cara menyimpan data dengan Isi Otomatis secara eksplisit menggunakan tombol:

1. Buat variabel lokal untuk menyimpan pengelola Isi Otomatis, yang dapat diambil dengan cara berikut:

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. Di TextField(s), tambahkan jenis konten yang diinginkan melalui 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. Lakukan commit konteks Isi Otomatis sesuai kebutuhan melalui klik tombol:

   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 dipanggil setiap kali pengguna keluar dari layar. Jika tombol Kirim ditautkan ke navigasi, Commit tidak perlu dipanggil. Jika Anda masih ingin mengklik Kirim untuk memicu dialog simpan, tambahkan Commit di sini.

Saat pengguna mengklik tombol, mereka akan melihat sheet bawah ini yang meminta mereka untuk menyimpan kredensial ke penyedia kredensial yang dipilih:

Menyimpan data dengan AutoFill melalui saran sandi kuat

Bergantung pada penyedia kredensial, saat Anda menggunakan jenis konten NewUsername dan NewPassword, pengguna mungkin melihat tombol di keyboard untuk Menyarankan sandi yang kuat. Saat mereka mengkliknya, sheet bawah akan muncul, yang memungkinkan mereka menyimpan kredensial. Anda tidak perlu menerapkan hal lain agar pengguna dapat memiliki pengalaman ini.

Pemecahan masalah

Saat memanggil perjalanan pengguna "menyimpan", jika Anda mengklik "Not now" lebih dari sekali, penyedia kredensial Anda mungkin tidak lagi menampilkan sheet bawah. Untuk mengaktifkannya kembali dan membuatnya muncul sekali lagi, Anda harus menghapus aplikasi tertentu yang telah memblokir "Ingat sandi ini?".

Menyesuaikan Isi Otomatis lebih lanjut

Dalam perjalanan pengguna Isi Otomatis yang biasa, saat komponen yang mengaktifkan Isi Otomatis telah diisi dengan kredensial, warnanya akan berubah dan menjadi ditandai untuk memberi tahu pengguna bahwa Isi Otomatis telah berhasil diselesaikan.

Untuk menyesuaikan warna sorotan ini, gunakan CompositionLocal dan berikan warna yang Anda inginkan.

val customHighlightColor = Color.Red

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

Warna sorotan Isi Otomatis default ditentukan sebagai Color(0x4dffeb3b).