Menampilkan atau menyembunyikan sandi berdasarkan tombol pengguna

Anda dapat membuat ikon untuk menyembunyikan atau menampilkan sandi berdasarkan tombol pengguna untuk meningkatkan keamanan dan meningkatkan pengalaman pengguna.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Menampilkan atau menyembunyikan sandi berdasarkan tombol pengguna

Untuk menampilkan atau menyembunyikan sandi berdasarkan tombol pengguna, buat kolom input untuk memasukkan informasi dan gunakan ikon yang dapat diklik untuk tombol:

@Composable
fun PasswordTextField() {
    val state = remember { TextFieldState() }
    var showPassword by remember { mutableStateOf(false) }
    BasicSecureTextField(
        state = state,
        textObfuscationMode =
        if (showPassword) {
            TextObfuscationMode.Visible
        } else {
            TextObfuscationMode.RevealLastTyped
        },
        modifier = Modifier
            .fillMaxWidth()
            .padding(6.dp)
            .border(1.dp, Color.LightGray, RoundedCornerShape(6.dp))
            .padding(6.dp),
        decorator = { innerTextField ->
            Box(modifier = Modifier.fillMaxWidth()) {
                Box(
                    modifier = Modifier
                        .align(Alignment.CenterStart)
                        .padding(start = 16.dp, end = 48.dp)
                ) {
                    innerTextField()
                }
                Icon(
                    if (showPassword) {
                        Icons.Filled.Visibility
                    } else {
                        Icons.Filled.VisibilityOff
                    },
                    contentDescription = "Toggle password visibility",
                    modifier = Modifier
                        .align(Alignment.CenterEnd)
                        .requiredSize(48.dp).padding(16.dp)
                        .clickable { showPassword = !showPassword }
                )
            }
        }
    )
}
TextSnippets.kt

Poin-poin penting tentang kode

  • Mempertahankan status visibilitas sandi dishowPassword.
  • Menggunakan composable BasicSecureTextField untuk entri sandi.
  • Memiliki ikon akhir yang dapat diklik, yang mengalihkan nilai showPassword.
  • Menentukan atribut textObfuscationMode dan status ikon akhir yang terlihat/tidak terlihat berdasarkan status showPassword.

Hasil

Gambar 1. Mengaktifkan/menonaktifkan ikon sandi tampilkan dan sembunyikan.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Teks tampilan

Teks adalah bagian utama dari setiap UI. Cari tahu berbagai cara untuk menyajikan teks di aplikasi Anda guna memberikan pengalaman pengguna yang menyenangkan.
Koleksi panduan cepat
Pelajari cara menerapkan cara bagi pengguna untuk berinteraksi dengan aplikasi Anda dengan memasukkan teks dan menggunakan cara input lainnya.
Koleksi panduan cepat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.
Buka FAQ Berikan masukan