Przejdź do tworzenia

Gdy użytkownik korzysta z aplikacji, często wchodzi w interakcję z elementami na ekranie. Nie jest to jednak jedyna forma interakcji. Inne formy interakcji mogą obejmować:

• Użytkownik ChromeOS może używać klawiszy strzałek na klawiaturze fizycznej do poruszania się po ekranie.
• Gracz może używać podłączonego kontrolera do gier, aby poruszać się po menu gry.
• Użytkownik aplikacji mobilnej może przełączać się między elementami za pomocą klawiatury ekranowej.

W takich przypadkach ważne jest śledzenie, który komponent jest aktywny w danym momencie. Nazywamy to fokusem. Elementy na ekranie powinny być zaznaczane w logicznej kolejności. Jetpack Compose ma domyślny sposób obsługi fokusu, który w większości przypadków jest prawidłowy. W niektórych przypadkach może być jednak konieczne zmodyfikowanie tego domyślnego działania.

Na tych stronach znajdziesz informacje o tym, jak używać fokusu w aplikacji:

• Zmiana kolejności przechodzenia między elementami: wyjaśnia, jak zmienić domyślną kolejność przechodzenia między elementami, dodać grupy elementów, na których można się skupić, i wyłączyć możliwość skupienia się na komponencie.
• Zmiana zachowania fokusu: opisuje, jak poprosić o fokus, przechwycić go i zwolnić oraz jak przekierować fokus po wejściu na ekran.
• Reagowanie na fokus: wyjaśnia, jak reagować na zmiany fokusu, dodawać wizualne wskazówki do elementów i rozumieć stan fokusu elementu.

Domyślna kolejność przechodzenia fokusu

Zanim przejdziemy do domyślnego działania wyszukiwania za pomocą fokusu, musimy wyjaśnić pojęcie poziomu w hierarchii. Ogólnie rzecz biorąc, możemy powiedzieć, że 2 Composables są na tym samym poziomie, gdy są rodzeństwem, czyli mają tych samych rodziców. Na przykład elementy w Column są na tym samym poziomie. Przejście o jeden poziom wyżej oznacza przejście z elementu podrzędnego do elementu Composablenadrzędnego lub, w tym samym przykładzie, powrót z elementu do Column, który go zawiera. Przejście na niższy poziom odbywa się w odwrotnym kierunku, czyli od elementu nadrzędnego Column do elementów podrzędnych. Możesz to zastosować do każdego Composable, który może zawierać inne Composables.

Nawigacja po interfejsie może odbywać się na kilka sposobów, z których większość użytkowników już zna:

• Karty: nawigacja jednowymiarowa, przechodzenie do przodu lub do tyłu. Nawigacja za pomocą klawisza TAB przenosi fokus na następny lub poprzedni element w hierarchii. Domyślnie Compose stosuje deklarację Composables. Nawigację w jednym kierunku można uzyskać za pomocą klawisza tab na klawiaturze lub pierścienia obrotowego na zegarku. Ten rodzaj wyszukiwania fokusu odwiedza każdy element na ekranie.
• Klawisze strzałek: nawigacja dwuwymiarowa, w lewo, w prawo, w górę lub w dół. Nawigacja dwuwymiarowa jest możliwa za pomocą pada kierunkowego na telewizorze lub klawiszy strzałek na klawiaturze. Kolejność przechodzenia obejmuje tylko elementy na danym poziomie. Aby przejść w dół lub w górę do innego poziomu, możesz użyć środka pada kierunkowego i przycisku Wstecz.

Weźmy na przykład zrzut ekranu poniżej, na którym znajdują się 4 przyciski jeden pod drugim. Chcesz przełączać się między nimi w kolejności, w jakiej się pojawiają. Jetpack Compose zapewnia takie działanie od razu: zestaw narzędzi umożliwia przechodzenie między poszczególnymi funkcjami kompozycyjnymi w kolejności pionowej od góry do dołu za pomocą klawisza tab lub przenoszenie fokusu przez naciśnięcie strzałki w górę lub w dół.

Gdy przełączysz się na inny rodzaj układu, niektóre rzeczy się zmienią. Jeśli układ ma więcej niż jedną kolumnę, tak jak na poniższym przykładzie, Jetpack Compose umożliwia poruszanie się po nich bez konieczności dodawania kodu. Jeśli naciśniesz klawisz tab, Jetpack Compose automatycznie wyróżni elementy w kolejności deklaracji, od First do Fourth. Użycie klawiszy strzałek na klawiaturze spowoduje przesunięcie zaznaczenia w wybranym kierunku w przestrzeni 2D.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Composables są zadeklarowane w 2 Rows, a elementy, na których skupia się uwaga, są zadeklarowane w kolejności od pierwszego do czwartego. Naciśnięcie klawisza tab spowoduje przejście do następnego elementu w tej kolejności:

We fragmencie kodu poniżej deklarujesz elementy w Columns, a nie w Rows:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Ten układ rozmieszcza elementy pionowo, od góry do dołu, od początku ekranu do jego końca:

Dwa poprzednie przykłady, mimo że różnią się nawigacją jednokierunkową, zapewniają takie samo działanie w przypadku nawigacji dwuwymiarowej. Dzieje się tak zwykle dlatego, że elementy na ekranie mają to samo położenie geograficzne w obu przykładach. Przejście w prawo od pierwszego elementu Column przenosi zaznaczenie na drugi, a przejście w dół od pierwszego elementu Column przenosi zaznaczenie na element poniżej.Row