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'impostazione di attivazione/disattivazione dell'utente per migliorare la sicurezza e l'esperienza utente.

Risultati

Figura 1. Attivazione/disattivazione dell'icona di visualizzazione/occultamento della password.

Compatibilità delle versioni

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

Dipendenze

Mostrare o nascondere una password in base all'attivazione/disattivazione dell'utente

Per mostrare o nascondere una password in base a un pulsante di attivazione/disattivazione dell'utente, crea un campo di immissione per inserire le informazioni e utilizza un'icona selezionabile per il pulsante 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 sul 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 di showPassword.
  • Definisce l'attributo textObfuscationMode e lo stato visibile/non visibile dell'icona finale in base allo stato di showPassword.

Raccolte che contengono questa guida

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

Testo visualizzato

Il testo è un elemento centrale di qualsiasi UI. Scopri diversi modi per presentare il testo nella tua app e offrire un'esperienza utente piacevole.
Raccolta di guide rapide
Scopri come implementare modi per consentire agli utenti di interagire con la tua app inserendo testo e utilizzando altri mezzi di input.
Raccolta di guide rapide

Hai domande o feedback

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