Autouzupełnianie w narzędziu do tworzenia

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

Wpisywanie danych logowania i wypełnianie formularzy jest czasochłonne i może prowadzić do błędów. Autouzupełnianie pozwala użytkownikom oszczędzać czas poświęcany na wypełnianie pól i minimalizuje błędy podczas wpisywania danych.

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

Wypełnij dane logowania

Autouzupełnianie umożliwia użytkownikom wprowadzanie danych logowania na te sposoby:

• System wyświetla użytkownikowi sugestie autouzupełniania, gdy kliknie on pole, w którym ustawiono semantykę autouzupełniania.
• System wyświetla użytkownikowi sugestie autouzupełniania i filtruje je na podstawie tego, co użytkownik wpisuje.

Zapisz dane uwierzytelniające

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

• System wyświetla okno zapisu, które prosi użytkownika o zapisanie informacji, gdy wprowadzi on nowe lub zaktualizowane informacje w polu z włączoną funkcją autouzupełniania. Można to zrobić na 2 sposoby:
  • jawnie, przez przesłanie informacji (np. kliknięcie przycisku);
  • niejawnie, gdy użytkownik opuszcza 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żywać autouzupełniania w aplikacji, aby ułatwić użytkownikom pobieranie zapisanych danych. Autouzupełnianie obsługuje komponenty tekstowe za pomocą BasicTextField i wszystkich pól tekstowych Material, które są oparte na tym komponencie.

Ustaw autouzupełnianie

Zanim zaczniesz używać interfejsów API autouzupełniania na urządzeniu lub emulatorze, musisz aktywować autouzupełnianie w Ustawieniach. Możesz tam określić dostawcę danych logowania, który będzie przechowywać Twoje dane logowania na potrzeby autouzupełniania.

Rysunek 1. Strona ustawień pokazująca, jak określić dostawcę danych logowania.

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

Aby wskazać, że TextField obsługuje autouzupełnianie, ustaw semantykę ContentType z typami, które pole może akceptować. Wskazuje to usługom autouzupełniania, jakie dane użytkownika mogą być istotne dla tego konkretnego pola. Użyj ContentType.Username, aby ustawić TextField, który użytkownicy mogą wypełnić swoją nazwą użytkownika.

Ustawiając semantykę ContentType, możesz umożliwić użytkownikom dostęp do informacji autouzupełniania zapisanych już u dostawcy danych logowania na urządzeniu. Jeśli na przykład użytkownik zalogował się już w aplikacji w przeglądarce Chrome na laptopie i zapisał hasło u dostawcy danych uwierzytelniających, dane logowania zostaną mu udostępnione przez autouzupełnianie.

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

Dodawanie pól autouzupełniania z wieloma typami

W niektórych przypadkach możesz chcieć, aby TextField przyjmował 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 +.

Wszystkie typy danych, które można zapisać za pomocą autouzupełniania, znajdziesz w dokumentacji ContentType.

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

Wypełnianie danych za pomocą autouzupełniania

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

Gdy użytkownik kliknie pole z włączonym autouzupełnianiem, a w magazynie danych są zapisane odpowiednie dane, na pasku narzędzi nad klawiaturą pojawi się element, który poprosi go o podanie danych logowania.

Rysunek 2. Elementy na pasku narzędzi tekstu pokazujące zapisane dane logowania.

Zapisywanie danych za pomocą autouzupełniania podczas nawigacji

Compose automatycznie próbuje określić, kiedy użytkownik opuszcza stronę i przesyła wpisane dane logowania. Gdy pole zostanie włączone w funkcji autouzupełniania, będzie automatycznie zapisywać dane logowania, gdy użytkownik opuści stronę, bez konieczności stosowania dodatkowego kodu.

Zapisywanie danych za pomocą autouzupełniania

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

Poniższe fragmenty kodu pokazują, jak zapisać 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 wybrany typ treści za pomocą Modifier.semantics:

   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. W razie potrzeby zatwierdź kontekst autouzupełniania, klikając przycisk:

   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

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 chcesz, aby kliknięcie przycisku Prześlij powodowało wyświetlenie okna zapisu, dodaj tutaj Zatwierdź.

Gdy użytkownik kliknie przycisk, zobaczy tę planszę dolną z prośbą o zapisanie danych logowania u wybranego dostawcy danych logowania:

Rysunek 3. Plansza dolna z prośbą o zapisanie hasła.

Zapisywanie danych za pomocą autouzupełniania dzięki sugestii silnego hasła

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 Zaproponuj silne hasło. Gdy użytkownik kliknie ten przycisk, pojawi się plansza dolna, która umożliwia zapisanie danych logowania. Nie musisz niczego więcej wdrażać, aby użytkownicy mogli korzystać z tej funkcji.

Rysunek 4. Element „Zaproponuj silne hasło” na pasku narzędzi klawiatury.

Rysunek 5. Plansza dolna zachęcająca użytkowników do używania silnego hasła.

Rozwiązywanie problemów

Jeśli podczas wywoływania ścieżki użytkownika „zapisywanie” klikniesz „Nie teraz” więcej niż raz, dostawca danych logowania może przestać wyświetlać dolny arkusz. Aby ponownie włączyć tę funkcję i sprawić, że będzie się pojawiać, musisz usunąć konkretne aplikacje, które zablokowały pytanie „Zapamiętać to hasło?”.

Rysunek 6. Plansza dolna z prośbą o zapisanie hasła.

Dalsze dostosowywanie autouzupełniania

W typowym procesie autouzupełniania, gdy komponent z włączoną funkcją autouzupełniania zostanie wypełniony danymi logowania, zmienia on kolor i zostaje wyróżniony, aby zasygnalizować użytkownikowi, że autouzupełnianie zostało zakończone.

Aby dostosować kolor wyróżnienia, użyj CompositionLocal i podaj dowolny kolor. Domyślny kolor wyróżnienia autouzupełniania to Color(0x4dffeb3b).

val customHighlightColor = Color.Red

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