Autouzupełnianie w oknie tworzenia wiadomości

Niektóre aplikacje, np. menedżery haseł, mogą wypełniać komponenty w innych aplikacjach danymi dostarczonymi przez użytkownika. Aplikacje, które wypełniają komponenty innych aplikacji, nazywamy usługami autouzupełniania. Platforma autouzupełniania zarządza komunikacją między aplikacją a usługą autouzupełniania.

Wypełnianie formularzy i danych logowania jest czasochłonne i może powodować błędy. Autouzupełnianie pozwala użytkownikom oszczędzać czas poświęcany na wypełnianie pól i minimalizuje błędy wprowadzania danych przez użytkownika.

Wystarczy kilka linii kodu, aby zaimplementować autouzupełnianie w Compose. Ta funkcja zapewnia użytkownikom te korzyści:

Wypełnianie danych logowania

Autouzupełnianie umożliwia użytkownikom wypełnianie danych logowania w takie sposoby:

• System wyświetla użytkownikowi sugestie autouzupełniania, gdy ten kliknie pole, w którym ustawiono semantyczne autouzupełnianie.
• System wyświetla użytkownikowi sugestie automatycznego wypełniania i filtruje je na podstawie tego, co użytkownik wpisze.

Zapisz dane uwierzytelniające

Użytkownicy mogą zapisywać dane logowania za pomocą autouzupełniania na te sposoby:

• System uruchamia okno zapisywania, które prosi użytkownika o zapisanie informacji, gdy wpisze on nowe lub zaktualizowane informacje w polu z włączoną funkcją autouzupełniania. Możesz zapisać dokument na 2 sposoby:
  • wyraźnie, poprzez zatwierdzenie informacji (np. przez kliknięcie przycisku);
  • domyślnie, gdy użytkownik przejdzie na inną stronę
• W zależności od dostawcy danych logowania system może zasugerować użytkownikowi silne hasło, gdy pole ma ustawioną wartość ContentType.NewPassword.

Możesz użyć funkcji Autouzupełniania w swojej aplikacji, aby usprawnić pobieranie zapisanych danych przez użytkowników. Autouzupełnianie obsługuje komponenty tekstowe za pomocą BasicTextField i wszystkich pól tekstowych w Material Design, które są tworzone na podstawie tego komponentu.

Ustaw autouzupełnianie

Zanim użyjesz interfejsów API autouzupełniania na urządzeniu lub w emulatorze, musisz włączyć autouzupełnianie w ustawieniach. Możesz tam określić dostawcę danych uwierzytelniających dla autouzupełniania, aby przechowywać swoje dane logowania.

Dodawanie autouzupełniania do pola tekstowego za pomocą typu treści

Aby wskazać, że TextField ma włączone autouzupełnianie, ustaw semantykę ContentType z typami, które może przyjmować to pole. Wskazuje usługom autouzupełniania, jakie dane użytkownika mogą być istotne w danym polu. Użyj elementu ContentType.Username, aby ustawić TextField, który użytkownicy mogą wypełnić, podając swoją nazwę użytkownika.

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

Ustawienie semantyki ContentType umożliwia użytkownikom dostęp do informacji autouzupełniania zapisanych już na urządzeniu w dostawcy danych uwierzytelniających. Jeśli na przykład użytkownik zalogował się już w Twojej aplikacji w przeglądarce Chrome na laptopie i zapisał hasło za pomocą dostawcy danych uwierzytelniających, jego dane logowania są wyświetlane za pomocą autouzupełniania.

Dodawanie pól autouzupełniania o różnych typach

W niektórych przypadkach możesz chcieć, aby TextField obejmował więcej niż 1 ContentType. Na przykład pole logowania może akceptować adres e-mail lub nazwę użytkownika. Możesz dodać wiele typów treści do TextField za pomocą operatora +.

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

Informacje o wszystkich typach danych, które można zapisać za pomocą autouzupełniania, znajdziesz w ContentType artykule.

Wypełnianie danych za pomocą Autouzupełniania

Gdy dodasz ContentType w TextField, nie musisz nic robić, aby użytkownicy mogli wypełnić dane logowania.

Gdy użytkownik kliknie pole z włączoną funkcją Autouzupełniania, a dane są zapisane, na pasku narzędzi nad klawiaturą pojawi się element, który poprosi o uzupełnienie danych logowania.

Oszczędzanie danych dzięki autouzupełnianiu podczas nawigacji

Funkcja tworzenia automatycznie próbuje określić, kiedy użytkownik przechodzi z jednej strony na inną i zapisuje wprowadzone dane logowania. Gdy pole ma włączone autouzupełnianie, automatycznie zapisuje informacje o danych logowania, gdy użytkownik przejdzie na inną stronę, bez potrzeby stosowania dodatkowego kodu.

Zapisuj dane wyraźnie za pomocą autouzupełniania

Aby za pomocą autouzupełniania zapisać nowe dane logowania w polach tekstowych, menedżer autouzupełniania powinien zatwierdzić (lub anulować) kontekst autouzupełniania. Lokalny menedżer autouzupełniania komunikuje się z platformą autouzupełniania w razie potrzeby. Jeśli chcesz usunąć dane logowania wprowadzone przez użytkownika, wywołaj metodę AutofillManager.cancel, aby usunąć wszystkie oczekujące dane bez ich zapisywania.

Poniższe fragmenty kodu pokazują, jak zapisywać dane za pomocą autouzupełniania, używając przycisku:

1. Utwórz zmienną lokalną, która będzie przechowywać menedżera autouzupełniania. Można go pobrać w ten sposób:

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. W TextField(s) dodaj odpowiedni typ treści za pomocą Modifier.semantics:

   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

3. W razie potrzeby zapisz kontekst autouzupełniania, klikając przycisk:

   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

Metoda Commit jest wywoływana, gdy użytkownik opuszcza ekran. Jeśli przycisk Prześlij jest połączony z nawigacją, nie trzeba wywoływać metody Commit. Jeśli mimo wszystko chcesz, aby kliknięcie Prześlij powodowało wyświetlenie okna zapisywania, dodaj tutaj opcję Zrealizuj.

Gdy użytkownik kliknie przycisk, zobaczy dolny panel z prośbą o zapisanie danych logowania w wybranym dostawcy danych logowania:

Oszczędzanie danych dzięki automatycznemu wypełnianiu za pomocą sugestii silnych haseł

W zależności od dostawcy danych logowania, gdy używasz typów treści NewUsername i NewPassword, użytkownicy mogą zobaczyć na klawiaturze przycisk Sugeruj silne hasło. Gdy kliknie ten przycisk, wyświetli się panel u dołu ekranu, w którym będzie można zapisać dane logowania. Nie musisz implementować żadnych innych funkcji, aby użytkownicy mogli korzystać z tej funkcji.

Rozwiązywanie problemów

Jeśli podczas korzystania z funkcji „zapisywania” użytkownik kliknie „Nie teraz” więcej niż raz, dostawca danych uwierzytelniających może przestać wyświetlać arkusz na dole. Aby ponownie włączyć tę opcję i uzyskać możliwość jej wyświetlania, musisz usunąć określone aplikacje, które zablokowały opcję „Zapamiętaj to hasło?”.

Dalsze dostosowywanie autouzupełniania

Podczas typowej ścieżki użytkownika autouzupełniania, gdy komponent z ta funkcją jest wypełniony danymi logowania, zmienia kolor i staje się podświetlony, aby sygnalizować użytkownikowi, że autouzupełnianie zostało zakończone.

Aby dostosować kolor podświetlenia, użyj atrybutu CompositionLocal i podaj dowolny kolor.

val customHighlightColor = Color.Red

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

Domyślny kolor wyróżnienia autouzupełniania to Color(0x4dffeb3b).