Autouzupełnianie w oknie tworzenia wiadomości

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, nazywane są 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 spędzany na wypełnianiu pól i minimalizuje błędy wprowadzania danych.

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

Wypełnianie danych logowania

Autouzupełnianie umożliwia użytkownikom wypełnianie danych logowania w ten sposób:

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

Zapisz dane uwierzytelniające

Użytkownicy mogą zapisywać dane logowania za pomocą autouzupełniania w ten sposób:

  • Gdy użytkownik wpisze nowe lub zaktualizowane informacje w polu z włączoną funkcją autouzupełniania, system wyświetli okno dialogowe zapisu, w którym poprosi o zapisanie informacji. Zapisywanie może odbywać się na 2 sposoby:
    • wyraźnie, 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 sugerować użytkownikowi silne hasło, gdy w polu jest ustawiona wartość ContentType.NewPassword.

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

Ustaw autouzupełnianie

Zanim zaczniesz korzystać z interfejsów Autofill API na urządzeniu lub emulatorze, musisz włączyć 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ć dostawcę danych logowania.

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

Aby wskazać, że TextField jest włączone do automatycznego wypełniania, ustaw ContentType semantykę z typami, które może akceptować to pole. 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łnić swoją nazwą użytkownika.

Ustawiając semantykę ContentType, użytkownicy mogą uzyskać dostęp do informacji o autouzupełnianiu zapisanych już w 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 za pomocą dostawcy danych logowania, jego dane logowania zostaną mu udostępnione 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 zależne od stanu

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 TextFieldContentType. 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 ContentType tym artykule.

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 zależne od stanu

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, użytkownicy będą mogli wypełniać dane logowania bez konieczności wykonywania żadnych dodatkowych czynności.

Gdy użytkownik kliknie pole z włączonym autouzupełnianiem, a w pamięci są zapisane odpowiednie dane, na pasku narzędzi nad klawiaturą pojawi się przycisk z prośbą o wypełnienie danych logowania.

Kafelki na pasku narzędzi tekstowych z zapisanymi danymi logowania.
Rysunek 2. Elementy na pasku narzędzi tekstowych pokazujące zapisane dane logowania.

Zapisywanie danych za pomocą autouzupełniania podczas nawigacji

Funkcja pisania automatycznego próbuje określić, kiedy użytkownik opuszcza stronę i zatwierdza wpisane dane logowania. Gdy pole jest włączone w funkcji autouzupełniania, automatycznie zapisuje informacje o danych logowania, gdy użytkownik opuści stronę, bez konieczności dodawania dodatkowego kodu.

Wyraźne zapisywanie danych za pomocą autouzupełniania

Aby wyraźnie zapisać nowe dane logowania w polach tekstowych za pomocą autouzupełniania, menedżer autouzupełniania musi 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 funkcję AutofillManager.cancel, aby usunąć oczekujące dane bez ich zapisywania.

Poniższe fragmenty kodu pokazują, jak zapisywać dane za pomocą autouzupełniania, używając do tego 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 zależnych od stanu: 

      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 = 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

    • W przypadku pól tekstowych zależnych od stanu: 

      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 za każdym razem, gdy użytkownik opuści ekran. Jeśli przycisk Prześlij jest połączony z nawigacją, nie musisz wywoływać funkcji Commit. Jeśli nadal chcesz, aby kliknięcie przycisku Prześlij powodowało wyświetlenie okna zapisu, dodaj tutaj Zatwierdź.

Gdy użytkownik kliknie przycisk, zobaczy ten arkusz u dołu ekranu 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ą automatycznego wypełniania dzięki sugestiom 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 klikną tę opcję, pojawi się arkusz u dołu ekranu, który umożliwi im zapisanie danych logowania. Aby użytkownicy mogli korzystać z tej funkcji, nie musisz niczego dodatkowo wdrażać.

Chip „Zaproponuj silne hasło” na pasku narzędzi klawiatury.
Rysunek 4. na pasku narzędzi klawiatury.
Plansza dolna z prośbą o użycie silnego hasła.
Ilustracja 5. Plansza dolna z prośbą o użycie 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ę wyświetlać, musisz usunąć konkretne aplikacje, które blokują pytanie „Zapamiętać to hasło?”.

Plansza dolna z prośbą o zapisanie hasła.
Ilustracja 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 kolor i jest podświetlany, 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 to 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 zależne od stanu

val customHighlightColor = Color.Red

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