Mithilfe der Auswahl können Nutzer bestimmte Daten auswählen und festlegen.
Auswahl
Auswahlelemente sollten verwendet werden, damit Nutzer aus einer endlichen Anzahl von Elementen auswählen können.
Standardmäßig werden Elemente unbegrenzt in beide Richtungen wiedergegeben. Sie können dieses Verhalten deaktivieren, wenn die Reihenfolge in der Liste wichtig ist, oder wenn Sie es den Nutzern ermöglichen möchten, mit einem schnellen Wischen zum ersten und letzten Element zu gelangen.
Anatomie
Anatomie
A. Inaktive Spalte
B. Doppelpunktbruch
C. Auswahlspalte
D. Beliebtester Content
E. Mittlerer Inhalt
F. Inhalt am unteren Rand
Breite und Höhe
Die Auswahlgruppe füllt die verfügbare Höhe und Breite aus. Es gibt vier Layoutoptionen für die Auswahlspalten. Jedes Layout ist zentriert und füllt die verfügbare Höhe aus. Die Spaltenbreite wird durch die Breite definiert, die für die Anzahl der Ziffern erforderlich ist, die in der Schriftart benötigt werden. Die Datumsauswahl ist die Ausnahme. Sie füllt den Bildschirm horizontal aus und geht über den Rand.
Beispiel: Zahlen berechnen die Breite von "00" und legen dann die Breite fest. Bei Textfeldern wird beispielsweise für das Feld „Monat“ die Breite von „MMM“ berechnet (der breiteste Buchstabe im lateinischen Alphabet). Die Breite und Höhe (die Zeilenhöhe des verwendeten Schriftstils) wird daher von der verwendeten Schriftart beeinflusst.
Die Größe der Auswahlelemente variiert je nach Haltepunkt.
Nutzung
Beispiele für die Datums- und Uhrzeitauswahl
Eine vordefinierte Implementierung der Datums- und Uhrzeitauswahl finden Sie in der Horologen-Bibliothek auf GitHub.
Wenn Sie eine ähnliche Funktion erstellen möchten, bei der Nutzer einen mehrteiligen Wert aus mehreren Auswahlfeldern auswählen, verwenden Sie die integrierte PickerGroup-Komponente. Bei diesem Objekt wird ein Fokuskoordinatorobjekt verwendet, um den Fokus dem richtigen Picker-Element zuzuweisen.
Adaptive Layouts
TimePicker 24 Stunden
TimePicker 12H
Datumsauswahl
Responsives Verhalten
Textgröße erhöhen
Nach dem Haltepunkt „225+“ ändert sich die Schriftgröße des Picker-Elements. Der obere und der untere Text in der Spalte „Lazy Scrolling“ werden angepasst (A), ebenso wie der Text in der Mitte. Hier einige Beispiele:
Zweispaltiges Layout
Unter dem Haltepunkt von 225 dp
Schriftart: Display 2
Über 225 dp Haltepunkt
Schriftart: Display 1
Dreispaltiges Layout
Unter dem Haltepunkt von 225 dp
Schriftart: Display 3
Über dem Haltepunkt von 225 dp
Schriftart: Display 2
Größe des Farbverlaufs vergrößert
Die Höhe des Farbverlaufs in der Auswahlspalte wird durch den verfügbaren Platz bestimmt. Sowohl der obere als auch der untere Farbverlauf wird auf ein Drittel der verfügbaren Höhe eingestellt (33%). Das bedeutet, dass der Farbverlauf bei jeder verfügbaren Bildschirmgröße proportional skaliert wird. Das Placement ist unabhängig vom Spaltenlayout.
Unter dem Haltepunkt von 225 dp
Größe: 33% der Spaltenhöhe
Über dem Haltepunkt von 225 dp
Größe: 33% der Spaltenhöhe
Vergrößerung des Spaltenabstands
Der Spaltenabstand wird über den Haltepunkt von mindestens 225 hinaus skaliert. Er beginnt entweder bei 2 dp oder bei 4 dp und wird auf 6 dp ansteigen. Das hängt davon ab, welches Layout Sie ausgewählt haben: entweder ein zwei- oder dreispaltiges Layout.
Zweispaltiges Layout
Unter dem Haltepunkt von 225 dp
Spaltenabstand von 4 dp
Über dem Haltepunkt von 225 dp
Spaltenabstand von 6 dp
Dreispaltiges Layout
Unter dem Haltepunkt von 225 dp
Spaltenabstand von 2 dp
Über dem Haltepunkt von 225 dp
Spaltenabstand von 6 dp