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ının açma/kapatma düğmesine göre şifreyi gizleyecek veya gösterecek bir simge oluşturabilirsiniz.

Sürüm uyumluluğu

Bu uygulama için projenizin minSDK değerinin API düzeyi 21 veya üstü olarak ayarlanması gerekir.

Bağımlılıklar

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

Bir şifreyi kullanıcının açma/kapatma düğmesine göre göstermek veya gizlemek için bilgi girmek üzere bir giriş alanı oluşturun ve açma/kapatma düğmesi 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'te şifre görünürlüğü durumunu korur.
  • Şifre girişi için BasicSecureTextField bileşeni kullanır.
  • showPassword değerini değiştiren tıklanabilir bir son simgesi vardır.
  • showPassword durumuna göre textObfuscationMode özelliğini ve son simgesinin görünür/görünmez durumunu tanımlar.

Sonuçlar

Şekil 1. Şifre gösterme ve gizleme simgesini açma/kapatma.

Bu kılavuzu içeren koleksiyonlar

Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş Hızlı Kılavuz koleksiyonlarından biridir:

Metin, her kullanıcı arayüzünün temel bileşenidir. Kullanıcılara keyifli bir deneyim sunmak için uygulamanızda metinleri sunmanın farklı yollarını öğrenin.
Kullanıcıların metin girerek ve diğer giriş yöntemlerini kullanarak uygulamanızla nasıl etkileşime geçebileceğini öğrenin.

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek kısa kılavuzlar hakkında bilgi edinebilir veya bize ulaşarak düşüncelerinizi bizimle paylaşabilirsiniz.