Kullanıcının açma/kapatma düğmesine göre şifreyi gösterme veya gizleme

Güvenliği artırmak ve kullanıcı deneyimini iyileştirmek için kullanıcı açma/kapatma işlemine göre şifreyi gizleyen veya gösteren bir simge oluşturabilirsiniz.

Sonuçlar

Şekil 1. Şifreyi göster ve gizle simgesini açıp kapatma.

Sürüm uyumluluğu

Bu uygulama, projenizin minSDK'sının API düzeyi 21 veya sonraki sürümlere ayarlanmasını gerektirir.

Bağımlılıklar

Kullanıcı açma/kapatma işlemine göre şifreyi gösterme veya gizleme

Kullanıcı açma/kapatma işlemine göre şifreyi göstermek veya gizlemek için bilgi girişi yapılacak bir giriş alanı oluşturun ve açma/kapatma işlemi için tıklanabilir bir simge kullanın:

@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 }
                )
            }
        }
    )
}

Kodla ilgili önemli noktalar

  • showPassword uygulamasında şifre görünürlüğü durumunu korur.
  • Şifre girişi için BasicSecureTextField composable'ı kullanır.
  • showPassword değerini açıp kapatan, tıklanabilir bir sondaki simgeye sahiptir.
  • textObfuscationMode özelliğini ve showPassword durumuna göre sondaki simgenin görünür/görünür olmayan durumunu tanımlar.

Bu rehberi içeren koleksiyonlar

Bu kılavuz, daha kapsamlı Android geliştirme hedeflerini ele alan aşağıdaki seçilmiş Hızlı Kılavuz koleksiyonlarının bir parçasıdır:

Metin, herhangi bir kullanıcı arayüzünün temel bileşenidir. Kullanıcılara keyifli bir deneyim sunmak için uygulamanızdaki metinleri farklı şekillerde sunmanın yollarını öğrenin.
Kullanıcıların metin girerek ve diğer giriş yöntemlerini kullanarak uygulamanızla etkileşim kurmasını nasıl sağlayacağınızı öğrenin.

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek hızlı kılavuzlar hakkında bilgi edinebilir veya düşüncelerinizi bize iletebilirsiniz.