Przejdź do tworzenia

Kiedy użytkownik wchodzi w interakcję z aplikacją, często dotyka elementów na ekranie. Nie jest to jednak jedyna forma interakcji. Inne formy interakcji to:

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

W takich przypadkach ważne jest, aby śledzić, który komponent jest aktywny w danym momencie. Nazywamy to koncentracją. Elementy na ekranie powinny być ustawione w logicznej kolejności. Jetpack Compose ma domyślny sposób obsługi zaznaczenia, który w większości przypadków działa poprawnie. W niektórych przypadkach może być jednak konieczne zmodyfikowanie tego działania domyślnego.

Na tych stronach opisaliśmy, jak korzystać z fokusu w aplikacji:

• Zmiana kolejności przechodzenia przez zaznaczenie: wyjaśnia, jak zmienić domyślną kolejność przechodzenia do elementu kompozycyjnego, dodać grupy fokusa i wyłączyć zaznaczenie elementu kompozycyjnego.
• Zmiana zachowania ostrości: opis sposobu wysyłania żądań, przechwytywania i zwalniania ostrości oraz przekierowania zaznaczenia po wejściu na ekran.
• Reagowanie na ostrość: wyjaśnia, jak reagować na zmiany ostrości, dodawać wizualne wskazówki do elementów i interpretować stan ostrości elementu.

Domyślna kolejność przemierzania zaznaczenia

Zanim zagłębimy się w domyślne działanie wyszukiwania, musimy zrozumieć pojęcie poziomu w hierarchii. Ogólnie rzecz biorąc, możemy powiedzieć, że 2 Composables są na tym samym poziomie, gdy są rodzeństwo, czyli mają tych samych rodziców. Na przykład elementy wewnątrz elementu Column są na tym samym poziomie. Przejście z elementu podrzędnego na poziom nadrzędny Composable lub zachowanie tego samego przykładu oznacza powrót z elementu do elementu Column, który go zawiera. Przejście na niższy poziom przebiega odwrotnie – od elementu nadrzędnego Column do elementów składowych. Tę koncepcję można stosować do wszystkich elementów Composable, które mogą zawierać inne elementy Composables.

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

• Karty: jednowymiarowa nawigacja z kierunkiem do przodu lub do tyłu. Nawigacja za pomocą klawisza Tab przenosi zaznaczenie do następnego lub poprzedniego elementu w hierarchii. Domyślnie funkcja tworzenia odbywa się zgodnie z deklaracją dotyczącą Composables. Nawigację jednokierunkową można uzyskać za pomocą klawisza tab na klawiaturze lub obudowy obrotowej na zegarku, a za pomocą tego rodzaju wyszukiwania skupienia będzie można odwiedzać każdy element na ekranie.
• Klawisze strzałek: dwuwymiarowe nawigacja w kierunku w lewo, w prawo, w górę lub w dół. Dwukierunkową nawigację można uzyskać za pomocą pada kierunkowego na telewizorze lub klawiszy strzałek na klawiaturze, a kolejność przemierzania umożliwia odwiedzanie tylko elementów na danym poziomie. Za pomocą środka pada kierunkowego i przycisku Wstecz możesz przechodzić w dół i z powrotem na inny poziom.

Przykładem jest poniższy zrzut ekranu, na którym znajdują się 4 przyciski, 1 pod drugim, które chcesz przeglądać w kolejności. Jetpack Compose zapewnia takie działanie od razu: zestaw narzędzi umożliwia przechodzenie między poszczególnymi funkcjami kompozycyjnymi w kolejności od góry do dołu za pomocą klawisza tab. Możesz też przenosić zaznaczenie, naciskając strzałkę w górę lub w dół.

Gdy przełączysz się na inny układ, nieco się to zmieni. Jeśli Twój układ zawiera więcej niż jedną kolumnę (tak jak w poniższym układzie), Jetpack Compose pozwala poruszać się po nich bez konieczności dodawania kodu. Gdy naciśniesz klawisz tab, Jetpack Compose automatycznie podświetli elementy w kolejności od pierwszej do czwartej. Przy użyciu klawiszy strzałek na klawiaturze zaznaczony jest zgodny z kierunkiem w przestrzeni 2D.

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

Elementy Composables są zadeklarowane w 2 elementach Rows, a elementy zaznaczenia w kolejności od pierwszego do czwartego. Naciśnięcie klawisza tab powoduje wygenerowanie takiej kolejności zaznaczenia:

We fragmencie kodu poniżej zadeklarujesz elementy w języku 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 przesuwa elementy w pionie od góry do dołu, od początku ekranu do końca:

Dwa poprzednie przykłady różnią się od siebie w nawigacji jednokierunkowej, ale dają takie same możliwości w przypadku nawigacji dwuwymiarowej. Zazwyczaj jest to spowodowane tym, że w obu przykładach elementy na ekranie znajdują się w tym samym miejscu geograficznym. Przejście w prawo od pierwszego elementu Column powoduje przeniesienie zaznaczenia na drugi element, a przejście z pierwszego elementu Row w dół – na element znajdujący się pod nim.

Polecane dla Ciebie

• Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
• Zmienianie działania skupienia
• ConstraintUkład w oknie tworzenia wiadomości
• Układy przepływu w sekcji Utwórz