Oluşturma bölümünde otomatik doldurma

Şifre yöneticileri gibi bazı uygulamalar, diğer uygulamalardaki bileşenleri kullanıcı tarafından sağlanan verilerle doldurabilir. Diğer uygulamaların bileşenlerini dolduran uygulamalara otomatik doldurma hizmetleri denir. Otomatik doldurma çerçevesi, bir uygulama ile otomatik doldurma hizmeti arasındaki iletişimi yönetir.

Kimlik bilgilerini ve formları doldurmak zaman alan ve hata yapmaya açık bir iştir. Otomatik doldurma, kullanıcıların alanları doldurmak için harcadıkları zamandan tasarruf etmelerini sağlar ve kullanıcı giriş hatalarını en aza indirir.

Yalnızca birkaç satır kodla Compose'da otomatik doldurmayı uygulayabilirsiniz. Bu özellik, kullanıcılara aşağıdaki avantajları sağlar:

Kimlik bilgilerini doldurma

Otomatik Doldurma, kullanıcıların kimlik bilgilerini aşağıdaki şekillerde doldurmasına olanak tanır:

  • Sistem, kullanıcı Otomatik Doldurma semantiğinin ayarlandığı bir alana dokunduğunda Otomatik Doldurma önerilerini gösterir.
  • Sistem, kullanıcı için otomatik doldurma önerileri gösterir ve bunları kullanıcının yazdıklarına göre filtreler.

Kimlik bilgisini kaydet

Kullanıcılar, Otomatik Doldurma özelliğini kullanarak kimlik bilgilerini aşağıdaki şekillerde kaydedebilir:

  • Sistem, otomatik doldurma özelliği etkin bir alana yeni veya güncellenmiş bilgiler girildiğinde kullanıcıyı bilgileri kaydetmeye yönlendiren bir kaydetme iletişim kutusunu tetikler. Kaydetme işlemi iki şekilde yapılabilir:
    • Bilgi göndererek (ör. düğme tıklamasıyla)
    • Kullanıcı sayfadan ayrıldığında
  • Kimlik bilgisi sağlayıcınıza bağlı olarak, bir alanda ContentType.NewPassword ayarlandığında sistem kullanıcıya güçlü bir şifre önerebilir.

Uygulamanızda otomatik doldurma özelliğini kullanarak kullanıcılar için kayıtlı verilerin alınmasını kolaylaştırabilirsiniz. Otomatik doldurma, BasicTextField aracılığıyla metin bileşenlerini ve bu bileşen üzerine oluşturulan tüm Materyal metin alanlarını destekler.

Otomatik doldurma ayarla

Cihazınızda veya emülatörünüzde otomatik doldurma API'lerini kullanmadan önce Ayarlar'da otomatik doldurma özelliğini etkinleştirmeniz gerekir. Burada, kimlik bilgilerinizi depolamak için otomatik doldurma özelliğinde kullanılacak bir kimlik bilgisi sağlayıcı belirtebilirsiniz.

Kimlik bilgisi sağlayıcısının nasıl belirtileceğini gösteren bir ayarlar sayfası.
1. şekil. Kimlik bilgisi sağlayıcısının nasıl belirtileceğini gösteren bir ayarlar sayfası.

İçerik türünü kullanarak metin alanınıza otomatik doldurma ekleme

Bir TextField öğesinin otomatik doldurma özelliğinin etkin olduğunu belirtmek için ContentType anlamlarını alanın kabul edebileceği türlerle ayarlayın. Bu, otomatik doldurma hizmetlerine bu alanla ilgili olabilecek kullanıcı verilerinin türünü belirtir. Kullanıcıların kullanıcı adlarıyla doldurabileceği bir TextField ayarlamak için ContentType.Username kullanın.

ContentType semantiğini ayarlayarak kullanıcılarınız, cihazlarının kimlik bilgisi sağlayıcısında önceden kaydedilmiş otomatik doldurma bilgilerine erişebilir. Örneğin, bir kullanıcı dizüstü bilgisayarındaki Chrome tarayıcı üzerinden uygulamanızda oturum açtıysa ve kimlik bilgilerini bir kimlik bilgisi sağlayıcı aracılığıyla kaydettiyse kimlik bilgileri, otomatik doldurma özelliğiyle kullanıcıya sunulur.

Değere dayalı metin alanı

TextField(
    value = textFieldValue.value,
    onValueChange = {textFieldValue.value = it},
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

Eyalete dayalı metin alanı

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

Birden fazla tür içeren otomatik doldurma alanları ekleme

Bazı durumlarda, TextField öğenizin birden fazla ContentType olmasını isteyebilirsiniz. Örneğin, bir giriş alanı e-posta adresi veya kullanıcı adı kabul edebilir. + operatörünü kullanarak TextField öğenize birden fazla içerik türü ekleyebilirsiniz.

Otomatik doldurma ile kaydedilebilen tüm veri türleri için ContentType referansa bakın.

Değere dayalı metin alanı

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

Eyalete dayalı metin alanı

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

Otomatik Doldurma ile verileri doldurma

TextField içine ContentType eklediğinizde, kullanıcıların kimlik bilgilerini doldurabilmesi için başka bir işlem yapmanız gerekmez.

Kullanıcı, otomatik doldurma özelliğinin etkinleştirildiği bir alanı tıkladığında, depolanmış ilgili veriler varsa klavyenin üzerindeki araç çubuğunda kimlik bilgilerini doldurmasını isteyen bir çip görür.

Metin araç çubuğunda, kaydedilmiş kimlik bilgilerini gösteren çipler.
Şekil 2. Metin araç çubuğunda kayıtlı kimlik bilgilerini gösteren çipler.

Otomatik doldurma ile gezinerek veri tasarrufu yapma

Oluşturma özelliği, kullanıcının bir sayfadan ayrılıp girilen kimlik bilgilerini gönderdiğini otomatik olarak belirlemeye çalışır. Otomatik doldurma özelliği etkinleştirilen alanlar, kullanıcı sayfadan ayrıldığında ek kod gerektirmeden kimlik bilgisi bilgilerini otomatik olarak kaydeder.

Otomatik doldurma ile verileri açıkça kaydetme

Otomatik doldurma özelliğiyle metin alanları aracılığıyla yeni kimlik bilgilerini açıkça kaydetmek için otomatik doldurma bağlamının, otomatik doldurma yöneticisi tarafından onaylanması (veya iptal edilmesi) gerekir. Yerel otomatik doldurma yöneticisi, gerektiğinde otomatik doldurma çerçevesiyle iletişim kurar. Kullanıcının girdiği kimlik bilgilerini kaldırmak istiyorsanız bekleyen verileri kaydetmeden silmek için AutofillManager.cancel işlevini çağırın.

Aşağıdaki snippet'lerde, bir düğme kullanarak verilerin otomatik doldurma özelliğiyle nasıl açıkça kaydedileceği gösterilmektedir:

  1. Otomatik doldurma yöneticisini tutacak bir yerel değişken oluşturun. Bu değişken aşağıdaki şekilde alınabilir: 

    val autofillManager = LocalAutofillManager.current
    AutofillSnippets.kt

  2. TextField(s) bölümünde, seçtiğiniz içerik türünü Modifier.semantics aracılığıyla ekleyin:

    • Değere dayalı metin alanlarıyla: 

      val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewUsername }
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewPassword }
    )
}
      AutofillSnippets.kt

    • Duruma dayalı metin alanlarıyla: 

      val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewUsername }
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewPassword }
    )
}
      AutofillSnippets.kt

  3. Gerekirse bir düğmeyi tıklayarak otomatik doldurma bağlamını işleyin:

    • Değere dayalı metin alanlarıyla: 

      val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewUsername },
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.NewPassword },
    )

    // Submit button
    Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
}
      AutofillSnippets.kt

    • Duruma dayalı metin alanlarıyla: 

      val autofillManager = LocalAutofillManager.current

Column {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewUsername },
    )

    Spacer(modifier = Modifier.height(16.dp))

    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.NewPassword },
    )

    // Submit button
    Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
}
      AutofillSnippets.kt

Kullanıcı ekrandan uzaklaştığında commit çağrılır. Bir Gönder düğmesi gezinmeye bağlıysa Commit işlevinin çağrılması gerekmez. Gönder'in tıklanmasının kaydetme iletişim kutusunu tetiklemesini istiyorsanız buraya Commit'i ekleyin.

Kullanıcı düğmeyi tıkladığında, kimlik bilgilerini seçilen kimlik bilgisi sağlayıcıya kaydetmesini isteyen şu alt sayfayı görür:

Kullanıcılardan şifrelerini kaydetmelerini isteyen alt sayfa.
3. şekil. Kullanıcılardan şifrelerini kaydetmelerini isteyen alt sayfa.

Güçlü şifre önerisiyle otomatik doldurma özelliğini kullanarak veri tasarrufu yapma

Kimlik bilgisi sağlayıcınıza bağlı olarak, NewUsername ve NewPassword içerik türlerini kullanırken kullanıcılar klavyede Güçlü şifre öner düğmesini görebilir. Kullanıcılar bu düğmeyi tıkladığında, kimlik bilgilerini kaydetmelerine olanak tanıyan bir alt sayfa gösterilir. Kullanıcıların bu deneyimi yaşayabilmesi için başka bir işlem yapmanız gerekmez.

Klavyenin araç çubuğundaki güçlü şifre öner çipi.
4. şekil. Klavyenin araç çubuğundaki güçlü şifre öneri çipi.
Kullanıcılardan güçlü şifre kullanmalarını isteyen alt sayfa.
5. şekil. Kullanıcılardan güçlü şifre kullanmalarını isteyen alt sayfa.

Sorun giderme

"Kaydetme" kullanıcı yolculuğunu başlatırken "Şimdi değil"i birden fazla kez tıklarsanız kimlik bilgisi sağlayıcınız artık alt sayfayı göstermeyebilir. Bu özelliği yeniden etkinleştirmek ve tekrar görünmesini sağlamak için "Bu şifreyi hatırlansın mı?" seçeneğini engelleyen belirli uygulamaları kaldırmanız gerekir.

Kullanıcılardan şifrelerini kaydetmelerini isteyen alt sayfa.
Şekil 6. Kullanıcılardan şifrelerini kaydetmelerini isteyen alt sayfa.

Otomatik doldurma özelliğini daha fazla özelleştirme

Tipik bir otomatik doldurma kullanıcı yolculuğunda, otomatik doldurma özelliği etkin bir bileşen kimlik bilgileriyle doldurulduğunda renk değiştirir ve otomatik doldurma işleminin başarıyla tamamlandığını kullanıcıya bildirmek için vurgulanır.

Bu vurgu rengini özelleştirmek için CompositionLocal simgesini kullanın ve istediğiniz rengi girin. Varsayılan otomatik doldurma vurgu rengi Color(0x4dffeb3b) olarak tanımlanır.

Değere dayalı metin alanları

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt

Duruma dayalı metin alanları

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt