Autouzupełnianie w Compose

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, nazywamy usługami autouzupełniania. Komunikacją między aplikacją a usługą autouzupełniania zarządza platforma autouzupełniania.

Wypełnianie danych logowania i formularzy jest czasochłonne i podatne na błędy. Autouzupełnianie pozwala użytkownikom oszczędzać czas spędzany na wypełnianiu pól i minimalizuje błędy danych wejściowych użytkownika.

Autouzupełnianie w Compose możesz zaimplementować za pomocą zaledwie kilku wierszy kodu. Ta funkcja zapewnia użytkownikom te korzyści:

Wypełnianie danych logowania

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

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

Zapisywanie danych logowania

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

  • Gdy użytkownik wpisze nowe lub zaktualizowane informacje w polu z włączoną funkcją autouzupełniania, system wyświetli okno zapisu z prośbą o zapisanie informacji. Zapisywanie można przeprowadzić na 2 sposoby:
    • Jawnie – przez zatwierdzenie informacji (np. kliknięcie przycisku).
    • Niejawnie – gdy użytkownik opuści stronę.
  • W zależności od dostawcy danych logowania system może zaproponować użytkownikowi silne hasło, gdy w polu ustawiono ContentType.NewPassword.

W aplikacji możesz używać autouzupełniania, aby usprawnić pobieranie zapisanych danych użytkowników. Autouzupełnianie obsługuje komponenty tekstowe za pomocą BasicTextField i wszystkich pól tekstowych Material, które są oparte na tym komponencie.

Konfigurowanie autouzupełniania

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

Strona ustawień, która pokazuje, jak określić dostawcę danych logowania.
Rysunek 1. Strona ustawień pokazująca, jak określić a dostawcę danych logowania.

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

Aby wskazać, że TextField ma włączoną funkcję autouzupełniania, ustaw semantykę ContentType z typami, które pole może akceptować. Informuje to usługi autouzupełniania, jakie dane użytkownika mogą być istotne w przypadku tego konkretnego pola. Użyj ContentType.Username, aby ustawić TextField, które użytkownicy mogą wypełniać swoją nazwą użytkownika.

Ustawiając semantykę ContentType, użytkownicy mogą uzyskiwać 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 Twojej aplikacji w przeglądarce Chrome na laptopie i zapisał hasło u dostawcy danych logowania, jego dane logowania będą mu udostępniane za pomocą autouzupełniania.

Pole tekstowe oparte na wartości

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

Pole tekstowe oparte na stanie

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ło więcej niż 1 ContentType. Na przykład pole logowania może akceptować adres e-mail lub nazwę użytkownika. Do TextField możesz dodać wiele typów treści za pomocą operatora +.

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

Pole tekstowe oparte na wartości

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

Pole tekstowe oparte na stanie

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łączoną funkcją autouzupełniania, a w systemie będą zapisane odpowiednie dane, w pasku narzędzi nad klawiaturą pojawi się chip z prośbą o wypełnienie danych logowania.

Kafelki na pasku narzędzi tekstowych z zapisanymi danymi logowania.
Rysunek 2. Chip w pasku narzędzi tekstowych pokazujący zapisane dane logowania.

Zapisywanie danych za pomocą autouzupełniania przez nawigację

Compose automatycznie próbuje określić, kiedy użytkownik przechodzi ze strony i zatwierdza wprowadzone dane logowania. Gdy pole ma włączoną funkcję autouzupełniania, automatycznie zapisuje dane logowania, gdy użytkownik opuści stronę, bez konieczności dodawania dodatkowego kodu.

Jawne zapisywanie danych za pomocą autouzupełniania

Aby jawnie zapisać nowe dane logowania za pomocą pól tekstowych z autouzupełnianiem, kontekst autouzupełniania powinien zostać zatwierdzony (lub anulowany) przez menedżera autouzupełniania. Lokalny menedżer autouzupełniania komunikuje się wtedy z platformą autouzupełniania, gdy jest to konieczne. Jeśli chcesz usunąć dane logowania wprowadzone przez użytkownika, wywołaj AutofillManager.cancel, aby usunąć wszystkie oczekujące dane bez ich zapisywania.

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

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

    val autofillManager = LocalAutofillManager.current
    AutofillSnippets.kt

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

    • W przypadku pól tekstowych opartych na wartości: 

      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

    • W przypadku pól tekstowych opartych na stanie: 

      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:

    • W przypadku pól tekstowych opartych na wartości: 

      val autofillManager = LocalAutofillManager.current

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

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

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

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

    • W przypadku pól tekstowych opartych na stanie: 

      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

Funkcja Commit jest wywoływana, gdy użytkownik opuści ekran. Jeśli przycisk Prześlij jest połączony z nawigacją, nie trzeba wywoływać funkcji Commit. Jeśli nadal chcesz, aby kliknięcie przycisku Prześlij powodowało wyświetlenie okna zapisu, dodaj tutaj Commit.

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

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

Zapisywanie danych za pomocą autouzupełniania przez sugerowanie 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 go klikną, pojawi się plansza dolna, która umożliwi im zapisanie danych logowania. Aby użytkownicy mogli korzystać z tej funkcji, nie musisz implementować niczego więcej.

Kliknij przycisk Zaproponuj silne hasło na pasku narzędzi klawiatury.
Rysunek 4. Chip „Zaproponuj silne hasło” na pasku narzędzi klawiatury toolbar.
Plansza dolna z prośbą o użycie silnego hasła.
Rysunek 5. Plansza dolna z prośbą o użycie silnego hasła.

Rozwiązywanie problemów

Jeśli podczas wywoływania procesu „zapisywania” użytkownik kliknie „Nie teraz” więcej niż raz, dostawca danych logowania może przestać wyświetlać planszę dolną. Aby ponownie włączyć tę funkcję i wyświetlić planszę, musisz usunąć konkretne aplikacje, które blokują pytanie „Zapamiętać to hasło?”.

Plansza dolna z prośbą o zapisanie hasła.
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, zmieni kolor i zostanie podświetlony, aby zasygnalizować użytkownikowi, że autouzupełnianie zostało zakończone.

Aby dostosować kolor podświetlenia, użyj CompositionLocal i podaj dowolny kolor. Domyślny kolor podświetlenia autouzupełniania jest zdefiniowany jako Color(0x4dffeb3b).

Pola tekstowe oparte na wartości

val customHighlightColor = Color.Red

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

Pola tekstowe oparte na stanie

val customHighlightColor = Color.Red

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