Mostrare o nascondere la password in base a un'opzione di attivazione/disattivazione dell'utente

Puoi creare un'icona per nascondere o mostrare una password in base a un'opzione di attivazione/disattivazione dell'utente per migliorare la sicurezza e l'esperienza utente.

Compatibilità delle versioni

Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Mostrare o nascondere una password in base al pulsante di attivazione/disattivazione dell'utente

Per mostrare o nascondere una password in base a un'opzione di attivazione/disattivazione dell'utente, crea un campo di immissione per inserire le informazioni e utilizza un'icona cliccabile per l'opzione di attivazione/disattivazione:

@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

Punti chiave del codice

  • Mantiene lo stato di visibilità della password in showPassword.
  • Utilizza un composable BasicSecureTextField per l'inserimento della password.
  • Ha un'icona finale cliccabile che attiva/disattiva il valore showPassword.
  • Definisce l'attributo textObfuscationMode e lo stato visibile/non visibile dell'icona finale in base allo stato di showPassword.

Risultati

Figura 1. Attiva/disattiva l'icona di visualizzazione e occultamento della password.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

Testo visualizzato

Il testo è un elemento centrale di qualsiasi interfaccia utente. Scopri diversi modi per presentare il testo nella tua app in modo da offrire un'esperienza utente piacevole.
Collezione di guide rapide
Scopri come implementare modi per consentire agli utenti di interagire con la tua app inserendo testo e utilizzando altri metodi di inserimento.
Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.
Vai alle domande frequenti Lascia un feedback