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 error 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 akan 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 akan 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 mengonfirmasi 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 memiliki ContentType.NewPassword yang ditetapkan.

Anda dapat menggunakan Isi Otomatis di aplikasi untuk menyederhanakan pengambilan data yang disimpan untuk pengguna. Isi otomatis mendukung komponen teks melalui BasicTextField dan semua kolom teks Material yang dibuat di 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.

Dengan menyetel 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 laptopnya dan menyimpan sandinya melalui penyedia kredensial, kredensialnya akan diberikan kepadanya melalui Isi Otomatis.

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

Menambahkan kolom Isi Otomatis dengan beberapa jenis

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

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

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

Mengisi data dengan Isi Otomatis

Saat Anda 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 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 keluar dari halaman dan memasukkan kredensial yang diinput. Setelah kolom diaktifkan untuk Isi Otomatis, kolom tersebut 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 kapan pun 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 Anda pilih melalui Modifier.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 }
       )
   }
   AutofillSnippets.kt

3. Commit konteks Isi Otomatis sesuai kebutuhan melalui klik tombol:

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

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

Menyimpan data dengan Isi Otomatis melalui saran sandi kuat

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

Pemecahan masalah

Saat memanggil perjalanan pengguna "menyimpan", jika Anda mengklik "Lain kali" lebih dari sekali, penyedia kredensial Anda mungkin tidak lagi menampilkan panel 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 umum, saat komponen yang mendukung Isi Otomatis telah diisi dengan kredensial, komponen tersebut akan berubah warna dan ditandai untuk memberi tahu pengguna bahwa Isi Otomatis telah berhasil diselesaikan.

Untuk menyesuaikan warna sorotan ini, gunakan CompositionLocal dan berikan warna yang Anda inginkan. Warna sorotan Isi Otomatis default ditentukan sebagai Color(0x4dffeb3b).

val customHighlightColor = Color.Red

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