Selektory
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Selektor pomaga użytkownikom wybrać i ustawić określone dane.
Selektor
Selektory powinny umożliwiać użytkownikom wybór spośród skończonej liczby elementów.
Domyślnie elementy będą się nieskończenie powtarzać w obie strony. Rozważ wyłączenie tego zachowania, jeśli kolejność na liście jest ważna, lub umożliwienie użytkownikom szybkiego docierania do pierwszego i ostatniego elementu za pomocą szybkiego przesunięcia.
Anatomia
Anatomia
A. Nieaktywna kolumna
B. Przecinek
C. Kolumna selektora
D. Najpopularniejsze treści
E. Treści środkowe
F. Treść na dole
Szerokość i wysokość
Grupa selektora wypełnia dostępną wysokość i szerokość. Kolumny selektora mają 4 opcje układu. Każdy układ jest wyśrodkowany i wypełnia dostępną wysokość. Szerokość kolumn jest określana przez szerokość potrzebną do umieszczenia liczby cyfr potrzebnych w czcionce. Wyjątkiem jest selektor daty, który wypełnia ekran w poziomie i wychodzi poza jego krawędź.
Na przykład liczby będą określać szerokość „00”, a potem ustawiać szerokość. W przypadku pól tekstowych, np. pola miesiąca, szerokość będzie odpowiadać szerokości litery „M” (najszerszej litery w alfabecie łacińskim). Szerokość i wysokość (czyli wysokość linii danego stylu czcionki) będą więc zależeć od użytej czcionki.
Elementy selektora różnią się rozmiarem w zależności od punktu przełamania.
Wykorzystanie
Zapoznaj się z tymi przykładami selektorów daty i godziny
Aby skorzystać z gotowej implementacji selektora daty i czasu, otwórz bibliotekę Horologist w GitHub.
Jeśli chcesz stworzyć podobną funkcję, w ramach której użytkownicy będą wybierać złożoną wartość w kilku elementach selektora, użyj wbudowanego komponentu PickerGroup. Ten obiekt używa obiektu koordynatora fokusa, aby przypisać fokus do odpowiedniego elementu selektora.
Układy adaptacyjne
Selektor czasu 24 godziny
Wybór czasu 12 godz.
Selektor daty
Elastyczne działanie
Zwiększenie rozmiaru tekstu
Po przekroczeniu wartości 225+ rozmiar czcionki elementu selektora zmienia się. Treści z góry i dołu w kolumnie z wolnym przewijaniem są dostosowywane (A), podobnie jak treść z poziomu środkowego. Oto kilka przykładów:
Układ z 2 kolumnami
Poniżej punktu przerwania 225 dp
Czcionka: Display 2
Powyżej punktu przerwania 225 dp
Czcionka: Display 1
Układ z 3 kolumnami
Poniżej punktu przerwania 225 dp
Czcionka: Wyświetlanie 3
Powyżej punktu przerwania 225 dp
Czcionka: Display 2
Zwiększenie rozmiaru gradientu
Gradient w kolumnie selektora jest definiowany pod względem wysokości przez dostępne miejsce. Gradienty górny i dolny są ustawione na jedną trzecią (33%) dostępnej wysokości. Oznacza to, że w przypadku każdego dostępnego rozmiaru ekranu gradient jest skalowany proporcjonalnie. Niezależnie od układu kolumn.
Poniżej punktu przerwania 225 dp
Rozmiar: 33% wysokości kolumny
Powyżej punktu przerwania 225 dp
Rozmiar: 33% wysokości kolumny
Zwiększenie odstępów między kolumnami
Od punktu przełamania 225+ odstęp między kolumnami zwiększa się, zaczynając od 2 dp lub 4 dp do 6 dp. To zależy od wybranego układu: 2 kolumny lub 3 kolumny.
Układ z 2 kolumnami
Poniżej punktu przerwania 225 dp
Odstęp między kolumnami: 4 dp
Powyżej punktu przerwania 225 dp
Odstęp między kolumnami: 6 dp
Układ z 3 kolumnami
Poniżej punktu przerwania 225 dp
Odstęp między kolumnami: 2 dp
Powyżej punktu przerwania 225 dp
Odstęp między kolumnami: 6 dp
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-07-27 UTC."],[],[],null,["# Pickers\n\nThe [Picker](/reference/kotlin/androidx/wear/compose/material/package-summary#Picker(androidx.wear.compose.material.PickerState,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.material.ScalingParams,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Function2)) helps users select and set specific data. \n**Picker**\n\nPickers should be used to let users choose amongst a finite number of items. \n\nBy default items will be looped infinitely in both directions. Consider disabling this behaviour if order in the list is important, or to allow users to reach the first and last element with a quick swipe.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\n**Anatomy**\n\nA. Inactive Column \n\nB. Colon Breaker \n\nC. Picker Column \n\nD. Top Content \n\nE. Middle Content \n\nF. Bottom Content\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Widths and heights**\n\nThe Picker Group fills the available height and width. There are four layout options for the picker columns. Each layout is centred and fills the available height. Column widths are defined by the width needed to accommodate the number of digits needed in the font, Date-picker is the exception, horizontally it fills the screen and bleeds off the edge.\n\nFor example numbers will work out width of '00' is and then set the width. For text fields, for the month field for example, will be worked out as the width of 'MMM' (which is the widest letter in the latin alphabet). The width and height (which is the line height of that type style used) will therefore be affected by the font used.\n\nPicker items vary in size across the breakpoint.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nSee the following examples of Date and Time Pickers\n\nFor a prebuilt date and time picker implementation, check out the [Horologist Library](https://github.com/google/horologist#-composables) on GitHub. \n\n\nIf you want to create a similar experience, where users choose a multi-part value across multiple pickers, use the built-in [PickerGroup](/reference/kotlin/androidx/wear/compose/material/package-summary#PickerGroup(kotlin.Array,androidx.compose.ui.Modifier,androidx.wear.compose.material.PickerGroupState,kotlin.Function1,kotlin.Boolean,kotlin.Boolean,androidx.wear.compose.material.TouchExplorationStateProvider,kotlin.Function1)) component. This object uses a focus coordinator object to assign focus to the correct Picker element.\n\nAdaptive layouts\n----------------\n\n**TimePicker 24H**\n\n**TimePicker 12H**\n\n**Date Picker**\n\n**Responsive behavior**\n-----------------------\n\n### **Text size increase**\n\nPast the 225+ Breakpoint, the Picker element's font size changes. Top and Bottom copy within the lazy scrolling column adjusts (A), as does the Middle copy. Below are some examples of this:\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 2 \n**Above 225 dp breakpoint**\n\nFont: Display 1\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Three column layout** \n**Below the 225 dp breakpoint**\n\nFont: Display 3 \n**Above the 225 dp breakpoint**\n\nFont: Display 2\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Gradient size increase**\n--------------------------\n\nThe gradient on the Picker column is defined in height by the available space. Both Top and Bottom Gradients are set at a third (33%) of the available height. This means at each available screen size, the gradient scales proportionally. Sitting independent of the column layout. \n**Below the 225 dp breakpoint**\n\nSize: 33% of column height \n**Above the 225 dp breakpoint**\n\nSize: 33% of column height\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Column spacing increase**\n---------------------------\n\nColumn spacing scales past the 225+ Breakpoint, either starting at 2 dp or 4 dp and growing to 6 dp. This depends on which layout you've selected; either 2 or 3 column layouts\n\n**Two column layout** \n**Below the 225 dp breakpoint**\n\n4 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Three column layout**\n\n**Below the 225 dp breakpoint**\n\n2 dp column gap \n**Above the 225 dp breakpoint**\n\n6 dp column gap\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
