Selektor ułatwia użytkownikom wybór i ustawienie konkretnych danych.
Selektor
Selektory powinny umożliwiać użytkownikom wybór spośród skończonej liczby produktów.
Domyślnie elementy są zapętlone w nieskończoność w obu kierunkach. Możesz je wyłączyć, jeśli kolejność na liście jest ważna lub chcesz umożliwić użytkownikom dotarcie do pierwszego i ostatniego elementu za pomocą szybkiego przesunięcia.
Anatomia
Anatomia
A. Kolumna Nieaktywna
B. Colon Breaker
C. Kolumna selektora
D. Najlepsza treść
E. Treści pośrednie
F. Treść u dołu
Szerokości i wysokości
W przypadku grupy selektora dostępna jest wysokość i szerokość. Dostępne są 4 opcje układu kolumn selektora. Każdy układ jest wyśrodkowany i wypełnia dostępną wysokość. Szerokość kolumn jest określana na podstawie szerokości potrzebnej do umieszczenia cyfr potrzebnych do umieszczenia w czcionce. Wyjątkiem jest selektor daty, który wypełnia ekran i wychodzi poza krawędź.
Na przykład liczby ustalają szerokość równą „00”, a następnie ustawiają szerokość. Na przykład w polach tekstowych, np. w polu miesiąca, wartość ta zostanie przedstawiona jako szerokość „MMM” (czyli najszersza litera w alfabecie łacińskim). Użyta czcionka ma więc wpływ na szerokość i wysokość (czyli wysokość wiersza danego stylu).
Elementy wyboru mają różne rozmiary w obrębie punktu przerwania.
Wykorzystanie
Zobacz przykłady selektora daty i godziny
Gotowy selektor daty i godziny znajdziesz w bibliotece Horologist w GitHubie.
Jeśli chcesz utworzyć podobne środowisko, w którym użytkownicy wybierają wartość wieloczęściową w różnych selektorach, użyj wbudowanego komponentu PickerGroup. Ten obiekt używa obiektu koordynatora ostrości, aby przypisać zaznaczenie do właściwego elementu selektora.
Adaptacyjne układy
TimePicker 24 godz.
TimePicker 12 godz.
Selektor daty
Działanie responsywne
Zwiększenie rozmiaru tekstu
Po przekroczeniu limitu 225 punktów przerwania zmienia się rozmiar czcionki w elemencie selektora. Treść górna i dolna w kolumnie z leniwym przewijaniem dostosowuje się (A) i tekst środkowy. Oto kilka przykładów:
Układ dwukolumnowy
Poniżej punktu przerwania wynoszącego 225 dp
Czcionka: Display 2
Powyżej punktu przerwania 225 dp
Czcionka: Display 1
Układ 3 kolumn
Poniżej punktu przerwania wynoszącego 225 dp
Czcionka: Display 3
Powyżej punktu przerwania wynoszącego 225 dp
Czcionka: reklamy displayowe 2
Zwiększenie rozmiaru gradientu
Wysokość gradientu w kolumnie selektora jest definiowana przez dostępną przestrzeń. Zarówno gradienty górny, jak i dolny są ustawione na jedną trzecią (33%) dostępnej wysokości. Oznacza to, że na każdym dostępnym rozmiarze ekranu gradient skaluje się proporcjonalnie. Pozycja niezależna od układu kolumn.
Poniżej punktu przerwania wynoszącego 225 dp
Rozmiar: 33% wysokości kolumny
Powyżej punktu przerwania wynoszącego 225 dp
Rozmiar: 33% wysokości kolumny
Zwiększenie odstępów między kolumnami
Odstępy między kolumnami skalują się poza wartość punktu przerwania powyżej 225 dp, zaczynając od 2 lub 4 dp i wzrost do 6 dp. Zależy to od wybranego układu (układ z 2 lub 3 kolumnami).
Układ dwukolumnowy
Poniżej punktu przerwania wynoszącego 225 dp
Luka w kolumnie: 4 dp
Powyżej punktu przerwania wynoszącego 225 dp
Luka w kolumnie 6 dp
Układ 3 kolumn
Poniżej punktu przerwania wynoszącego 225 dp
Luka w kolumnie: 2 dp
Powyżej punktu przerwania wynoszącego 225 dp
Luka w kolumnie 6 dp