Besteleme ekranında 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 hataya açık bir iştir. Otomatik doldurma, kullanıcıların alanları doldururken harcadıkları zamandan tasarruf etmelerini sağlar ve kullanıcı girişi hatalarını en aza indirir.

Yalnızca birkaç satır kodla Compose'da otomatik doldurma özelliğini 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 yöntemlerle doldurmasına olanak tanır:

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

Kimlik bilgisini kaydet

Kullanıcılar, kimlik bilgilerini otomatik doldurma özelliğiyle aşağıdaki şekillerde kaydedebilir:

• Sistem, kullanıcı otomatik doldurma özellikli bir alana yeni veya güncellenmiş bilgi girdiğinde bilgileri kaydetmesini isteyen bir kaydetme iletişim kutusu tetikler. Kaydetme işlemi iki şekilde yapılabilir:
  • Açıkça, bilgi göndererek (örneğin, bir düğmeyi tıklayarak)
  • Dolaylı olarak, 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.

Kullanıcıların kayıtlı verileri daha kolay alabilmesi için uygulamanızda otomatik doldurma özelliğini kullanabilirsiniz. Otomatik doldurma, BasicTextField ve bu bileşeni temel alan tüm Material metin alanları aracılığıyla metin bileşenlerini destekler.

Otomatik doldurma ayarla

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

İç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 semantiğini alanın kabul edebileceği türlerle ayarlayın. Bu, otomatik doldurma hizmetlerine bu alanla ilgili olabilecek kullanıcı verisi 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ın, cihazlarının kimlik bilgisi sağlayıcısına kaydedilmiş otomatik doldurma bilgilerine erişmesini sağlayabilirsiniz. Örneğin, bir kullanıcı dizüstü bilgisayarındaki Chrome tarayıcı üzerinden uygulamanızda oturum açtıysa ve şifresini bir kimlik bilgisi sağlayıcı aracılığıyla kaydettiyse kimlik bilgileri, otomatik doldurma özelliği aracılığıyla kullanıcıya sunulur.

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

Birden fazla türde otomatik doldurma alanı ekleme

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

Otomatik doldurma ile kaydedilebilecek tüm veri türleri için ContentType referansına bakın.

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 etkin olduğu bir alanı tıkladığında, kayıtlı alakalı veriler varsa klavyenin üstündeki araç çubuğunda kimlik bilgilerini doldurmasını isteyen bir çip görür.

Navigasyon sırasında otomatik doldurma ile veri kaydetme

Compose, kullanıcının bir sayfadan ne zaman ayrıldığını ve girilen kimlik bilgilerini ne zaman kaydettiğini otomatik olarak belirlemeye çalışır. Bir alan için otomatik doldurma etkinleştirildiğinde, kullanıcı sayfadan ayrıldığında kimlik bilgileri otomatik olarak kaydedilir ve ek kod gerekmez.

Otomatik doldurma ile verileri açıkça kaydetme

Yeni kimlik bilgilerini otomatik doldurma özelliğiyle metin alanları üzerinden açıkça kaydetmek için otomatik doldurma bağlamının otomatik doldurma yöneticisi tarafından onaylanması (veya iptal edilmesi) gerekir. Ardından, yerel Otomatik Doldurma yöneticisi gerektiğinde Otomatik Doldurma Çerçevesi ile iletişim kurar. Kullanıcının girdiği kimlik bilgilerini kaldırmak istiyorsanız bekleyen verileri kaydetmeden silmek için AutofillManager.cancel yöntemini çağırın.

Aşağıdaki snippet'lerde, bir düğme kullanarak verilerin Otomatik Doldurma ile açıkça nasıl kaydedileceği gösterilmektedir:

1. Otomatik doldurma yöneticisini tutmak için yerel bir değişken oluşturun. Bu değişkeni aşağıdaki şekilde alabilirsiniz:

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. TextField(s) sayfanızda, seçtiğiniz içerik türünü Modifier.semantics üzerinden ekleyin:

   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. Otomatik doldurma bağlamını bir düğmeyi tıklayarak gerektiği gibi uygulayın:

   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 ayrıldığında Commit çağrılır. Gönder düğmesi gezinmeye bağlıysa Onayla'nın çağrılması gerekmez. Gönder'i tıklayarak kaydetme iletişim kutusunun tetiklenmesini istiyorsanız buraya Uygula'yı ekleyin.

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

Güçlü şifre önerisiyle otomatik doldurma özelliğini kullanarak verileri kaydetme

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. Bu düğmeyi tıkladıklarında, kimlik bilgilerini kaydedebilecekleri bir alt sayfa açılır. Kullanıcıların bu deneyimi yaşaması için başka bir şey uygulamanız gerekmez.

Sorun giderme

"Kaydetme" kullanıcı yolculuğunu çağırırken birden fazla kez "Şimdi değil"i 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 şifre hatırlansın mı?" seçeneğini engelleyen belirli uygulamaları kaldırmanız gerekir.

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

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

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

val customHighlightColor = Color.Red

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