RadioButton
Die RadioButton-Komponente stellt eine einzelne Option dar, die ausgewählt oder abgewählt werden kann. Radio-Buttons werden typischerweise gruppiert, sodass die Auswahl eines Buttons automatisch die Auswahl der anderen aufhebt, wodurch Benutzer eine einzige Wahl aus einer Menge von sich gegenseitig ausschließenden Optionen treffen können.
Verwendungsmöglichkeiten
Der RadioButton eignet sich am besten für Szenarien, in denen Benutzer eine einzelne Auswahl aus einem vordefinierten Set von Optionen treffen müssen. Hier sind einige Beispiele, wann der RadioButton verwendet werden sollte:
-
Umfragen oder Fragebögen: Radio-Buttons werden häufig in Umfragen oder Fragebögen eingesetzt, bei denen Benutzer eine einzelne Antwort aus einer Liste von Optionen auswählen müssen.
-
Einstellungsmöglichkeiten: Anwendungen, die Einstellungs- oder Präferenzpaneele umfassen, verwenden oft Radio-Buttons, um Benutzern zu erlauben, eine einzelne Option aus einer Menge von sich gegenseitig ausschließenden Auswahlmöglichkeiten zu wählen.
-
Filtern oder Sortieren: Ein
RadioButtonkann in Anwendungen verwendet werden, die von den Benutzern verlangen, eine einzelne Filter- oder Sortieroption auszuwählen, wie etwa das Sortieren einer Liste von Elementen nach verschiedenen Kriterien.
RadioButton-KomponentenVerwenden Sie eine RadioButtonGroup, um eine Gruppe von Radio-Buttons zu verwalten, wenn Benutzer eine einzige Option auswählen sollen.
Text und Positionierung
Verwenden Sie setText(String text), um das Label eines Radio-Buttons festzulegen. Standardmäßig erscheint der Text rechts von der Komponente. Um die Position zu ändern, verwenden Sie setTextPosition(Position.LEFT) oder setTextPosition(Position.RIGHT) mit dem HasTextPosition.Position-Enum.
Aktivierung
Radio-Buttons können über zwei Arten der Aktivierung gesteuert werden: manuelle Aktivierung und automatische Aktivierung. Diese bestimmen, wann ein RadioButton seinen Zustand ändert. Standardmäßig ist der Zustand Activation.MANUAL, aus dem RadioButton.Activation-Enum.
Manuelle Aktivierung
Wenn ein Radio-Button auf manuelle Aktivierung eingestellt ist, bedeutet das, dass er nicht automatisch aktiviert wird, wenn er den Fokus erhält. Manuelle Aktivierung erlaubt es dem Benutzer, durch die Optionen des Radio-Buttons mit der Tastatur oder anderen Eingabemethoden zu navigieren, ohne sofort die ausgewählte Option zu ändern.
Wenn der Radio-Button Teil einer Gruppe ist, wird das Auswählen eines anderen Radio-Buttons innerhalb der Gruppe automatisch den zuvor ausgewählten Radio-Button abwählen. Manuelle Aktivierung bietet eine genauere Kontrolle über den Auswahlprozess, da eine explizite Aktion des Benutzers erforderlich ist, um die ausgewählte Option zu ändern.
Automatische Aktivierung
Aktivieren Sie die automatische Aktivierung mit setActivation(Activation.AUTO). In diesem Modus wird der Radio-Button jedes Mal aktiviert, wenn er den Fokus erhält, einschließlich durch Klicken, automatische Fokussierung oder Tab-Navigation.
Schalter
Ein RadioButton kann auch so eingestellt werden, dass er als Schalter angezeigt wird, der eine alternative visuelle Darstellung zur Auswahl von Optionen bietet. Normalerweise sind Radio-Buttons kreisförmig oder abgerundet und zeigen eine einzelne Wahl aus einer Gruppe von Optionen an.
Ein RadioButton kann in einen Schalter verwandelt werden, der einem Kippschalter oder Schieberegler ähnelt, indem einer von zwei Methoden verwendet wird:
- Die Fabrikmethode: Der RadioButton kann mit den folgenden Fabrikmethoden erstellt werden:
Switch(String text, boolean checked);
Switch(String text);
Switch();
Diese Methoden spiegeln den RadioButton-Konstruktor wider und erstellen die Komponente mit der Schalter-Eigenschaft, die bereits aktiviert ist.
- Setter: Es ist auch möglich, einen bereits vorhandenen
RadioButtonin einen Schalter zu ändern, indem der entsprechende Setter verwendet wird:
myRadioButton.setSwitch(true);
Wenn ein RadioButton als Schalter angezeigt wird, erscheint er typischerweise als oblonges Format mit einem Indikator, der ein- oder ausgeschaltet werden kann. Diese visuelle Darstellung gibt Benutzern eine intuitivere und vertrautere Benutzeroberfläche, ähnlich wie physische Schalter, die häufig in elektronischen Geräten zu finden sind.
Einen RadioButton als Schalter anzuzeigen, kann die Benutzererfahrung verbessern, indem eine klare und unkomplizierte Möglichkeit zur Auswahl von Optionen bereitgestellt wird. Es kann die visuelle Attraktivität und Benutzerfreundlichkeit von Formularen, Einstellungsfenstern oder jedem anderen Interface-Element verbessern, das mehrere Auswahlmöglichkeiten erfordert.
Das Verhalten des RadioButton bleibt dasselbe, wenn er als Schalter dargestellt wird, was bedeutet, dass innerhalb einer Gruppe immer nur eine Option ausgewählt werden kann. Das schalterartige Aussehen ist eine visuelle Transformation, die die Funktionalität eines RadioButton beibehält.
Styling
Größen
Verwenden Sie setExpanse() mit dem Expanse-Enum, um die Größe eines RadioButton anzupassen, ohne CSS schreiben zu müssen. Die verfügbaren Werte sind XSMALL, SMALL, MEDIUM, LARGE, XLARGE und NONE.
Best Practices
Um eine optimale Benutzererfahrung bei der Verwendung der RadioButton-Komponente sicherzustellen, sollten folgende Best Practices berücksichtigt werden:
-
Optionen klar kennzeichnen: Stellen Sie für jede
RadioButton-Option klaren und prägnanten Text zur Verfügung, um die Auswahl genau zu beschreiben. Der Text sollte leicht verständlich und voneinander zu unterscheiden sein. -
Radio-Buttons gruppieren: Gruppieren Sie verwandte Radio-Buttons, um deren Zusammenhang anzuzeigen. Dies hilft den Benutzern zu verstehen, dass innerhalb einer bestimmten Gruppe nur eine Option ausgewählt werden kann. Dies kann effektiv mittels der
RadioButtonGroup-Komponente erfolgen. -
Standardauswahl bereitstellen: Falls zutreffend, ziehen Sie in Betracht, eine Standardauswahl für Radio-Buttons bereitzustellen, um Benutzer zu leiten, wenn sie das erste Mal mit den Optionen konfrontiert werden. Die Standardauswahl sollte mit der häufigsten oder bevorzugten Wahl übereinstimmen.
