Umschalter (Steuerelement)

Umschalter sind Steuerelemente einer grafischen Benutzeroberfläche (GUI). Hauptsächlich dienen sie dazu, zwei Zustände („an“ und „aus“) abzubilden. Es existieren allerdings auch Implementierungen mit einem zusätzlichen neutralen Zustand.

Verschiedene Zustände eines Umschalters.

Umschalter sind eng verwandt mit Kontrollkästchen. Bei Kontrollkästchen hat deren Betätigung in der Regel keine unmittelbare Auswirkung auf das Verhalten der Anwendung. Wirksam wird die Zustandsänderung in der Regel erst durch die Betätigung einer Schaltfläche (z. B. „OK“, „Übernehmen“ oder „Speichern“).

Im Wesentlichen existieren zwei weit verbreitete Arten von Umschaltern:

• Umschalter, Toggle Switch oder einfach nur Schalter bzw. Switch:
  Dieses Steuerelement ist das Äquivalent zu physischen Kipp- oder Wippschaltern. Diese Art von Steuerelement setzte sich erst durch die Verbreitung von Touchscreens und mobilen Endgeräten durch. Dort werden sie insbesondere zur Änderung von Einstellungen verwendet. Auch unter modernen Desktopbetriebssystemen wie beispielsweise Windows 10 oder 11 werden sie inzwischen an vielen Stellen eingesetzt.
• Umschaltfläche auch Toggle Button oder selten Flip-Flop-Button:
  Bei dieser Variante handelt es sich um eine Schaltfläche, deren Zustandsänderung nach dem Anklicken erhalten bleibt. Umschaltflächen waren bereits in sehr alten Komponenten-Frameworks und Betriebssystemen mit einer grafischen Benutzeroberfläche enthalten. Abgesehen von Schaltern in Symbolleisten, oder Menüs, werden diese in modernen Anwendungen allerdings kaum noch verwendet.

Beide Arten von Schaltern eignen sich zur digitalen Echtzeitsteuerung von technischen Anlagen. Im privaten Bereich lassen sich im Smart Home beispielsweise Lampen, Steckdosen oder Sicherheitssysteme aktivieren oder deaktivieren. Verfügt ein Gerät über mehrere Intensitätsstufen (z. B. die Helligkeit von dimmbaren Lampen oder die Richttemperatur von Klimaanlagen), eignen sich Schieberegler besser.

Erscheinungsbild

Zweidimensionale Schalter für Touchscreens wurden bereits Anfang der 1990er Jahre bezüglich deren Gestaltung, Handhabung und psychologischer Auswirkungen untersucht. Die wichtigsten Aspekte sind dabei:

• Den Nutzern muss der aktuelle Zustand des Schalters klar ersichtlich sein.
• Den Nutzern muss klar sein, dass sie den Zustand durch eine Eingabe verändern können.
• Den Nutzern muss eine sichtbare Rückmeldung nach der Zustandsänderung gegeben werden.

Um die ersten beiden Kriterien zu erfüllen, sollte die Darstellung minimalistisch, aber aussagekräftig sein.

Bei Umschaltern werden die beiden Zustände „an“ und „aus“ durch die beiden Enden des Schalters repräsentiert. Für einige GUI-Frameworks existieren allerdings auch Implementierungen mit einem zusätzlichen neutralen Zustand. Der neutrale Zustand wird in diesem Fall durch die Mittelposition repräsentiert.

Bei Umschaltflächen wirken sich Zustandsänderungen auf die Art der Umrandung, die Farbgestaltung und den Dargestellten Inhalt aus. Beispielsweise kann ein klassischer Schalter mit 3D-Effekt zwischen den beiden Zuständen „erhoben“ (aus) und „vertieft“ (an) wechseln.

Eine Symbolleiste mit einem Toggle-Button.

Für Symbolleisten und Menüs können einzelne Schaltflächen bzw. Menüeinträge als Schalter definiert werden. Zustandsänderungen dieser Elemente wirken sich auch hier direkt auf das Erscheinungsbild und Verhalten der Anwendung aus. Ein häufiges Beispiel stellen Umschaltflächen in Symbolleisten zur Formatierung von Textabschnitten („Fett“, „Kursiv“ und „Unterstrichen“) dar. Die Betätigung einer dieser Schaltflächen hat unmittelbare Auswirkungen auf den gerade markierten Text. Umgekehrt wird der dargestellte Zustand der Schaltfläche von dem gerade markierten Text beeinflusst.

Die zunehmende Verbreitung von Touchscreens und mobilen Endgeräten führten in den letzten Jahren zu einem Paradigmenwechsel bezüglich der Gestaltung und dem Verhalten von grafischen Benutzeroberflächen. Die klassischen Standardschaltflächen „OK“, „Übernehmen“ und „Abbrechen“ wurden in Dialogfenstern teilweise abgeschafft, da die einzelnen Einstellungen sofort bei einer Zustandsänderung (durch den Benutzer) umgesetzt werden. Eine explizite Bestätigung der Modifikationen ist in diesem Fall überflüssig. Unter Windows wird dieses Prinzip vor allem in UWP-Apps umgesetzt.

Alternativen

Verschiedene Zustände eines Kontrollkästchens.

Die häufigste Alternative zu Schaltern stellen Kontrollkästchen dar. Im Gegensatz zu Schaltern, sind Kontrollkästchen praktisch in sämtlichen Betriebssystemen mit einer grafischen Benutzeroberfläche nativ implementiert. Sie existierten bereits zu Zeiten der zeichenorientierten Benutzeroberflächen (TUI). Von der Funktionsweise her sind beide Steuerelemente sehr ähnlich. Der Unterschied beruht hauptsächlich auf dem Zeitpunkt, zu dem sich die Zustandsänderung des Steuerelements auf die Anwendung auswirkt.

Obwohl die Richtlinien der meisten namhaften Anbieter (darunter auch Microsoft, Apple und Google) für die Gestaltung von grafischen Benutzeroberflächen den Unterschied zwischen Schaltern und Kontrollkästchen explizit hervorheben, halten sich nicht alle Softwareentwickler daran.

Ebenso ist es möglich, pro Anwendungsfall, eine Gruppe aus zwei Optionsfeldern ( an | aus) anzubieten. Sehr selten trifft man auch auf Kombinationsfelder mit zwei oder drei Einträgen für die Zustände: „Standard“, „Aktiviert“ und „Deaktiviert“.

Schieberegler sollten nicht für binäre Werte verwendet werden.

Implementierungen

Umschalter sind Steuerelemente, die vor allem durch Anwendungen für mobile Endgeräte und Touchscreens in den letzten Jahren weit verbreitet wurden. Ein Großteil der modernen Betriebssysteme und Komponenten-Frameworks enthalten Umschalter.

Microsoft Windows (Systemkomponente)

Unter Windows können Kontrollkästchen über den Fensterstil BS_PUSHLIKE als versenkbare Schaltfläche (Toggle Button) dargestellt werden, allerdings gibt es keine native Repräsentation als Umschalter (Toggle Switch). Um diese Lücke zu schließen, gibt es jedoch entsprechende ActiveX-Komponenten von Drittanbietern. Zudem besteht unter Windows die Möglichkeit, über das sogenannte Owner-Draw-Prinzip, die Oberfläche eines Kontrollkästchen selbst (in Form eines Schiebeschalters) zu zeichnen.

Microsoft .NET

Windows Forms

Für Windows Forms existiert keine Komponente, die einen Umschalter darstellt. Es können jedoch Kontrollkästchen als versenkbare Schaltfläche dargestellt werden. Intern wird dabei die Systemkomponente und deren Verhalten genutzt. Deshalb kann auch hier das Owner-Draw-Prinzip bei Bedarf genutzt werden, um die optische Darstellung zu verbessern. Von Drittanbietern existieren diverse Implementierungen von Schaltern. Ebenso können ActiveX-Komponenten von Drittanbietern auch in Windows Forms Anwendungen mit Hilfe eine Wrapper-Klasse eingebunden werden. Unter Visual Studio existiert ein Assistent, der eine solche Wrapper-Klasse automatisch erstellen kann.

Windows Presentation Foundation (WPF)

Für WPF existiert keine native Implementierung, allerdings gibt es auch hier viele kommerzielle und freie Implementierungen von Drittanbietern.

Universal Windows Platform (UWP)

Für UWP-Apps existiert die Komponente Windows.UI.Xaml.Controls.ToggleSwitch.

Xamarin

Auch Xamarin stellt Entwicklern ein Steuerelement für Schalter an, nämlich die Komponente Xamarin.Forms.Switch.

Microsoft Fluent UI Web Components

In der Komponentenbibliothek Microsoft Fluent UI Web Components sind Schalter ebenfalls von Haus aus enthalten.

Embarcadero Delphi und C++

Visual Component Library (VCL)

Die Visual Component Library von Embarcadero Technologies enthält für die integrierten Entwicklungsumgebungen (IDE) bzw. Programmiersprachen Embarcadero Delphi und C++Builder die Klasse Vcl.WinXCtrls.TToggleSwitch. Für eigene Implementierungen existiert die Basisklasse Vcl.WinXCtrls.TCustomToggleSwitch.

Ein Umschalter zum Wechseln des Designs.

Ein sehr häufiger Anwendungsfall für Umschalter ist das Aktivieren oder Deaktivieren des dunklen Modus auf Webseiten oder in (mobilen) Anwendungen. Das folgende Beispiel ändert das Design einer Anwendung in Abhängigkeit der Position eines Schalters.

Gegeben sei eine Delphi 10.2 VCL-Anwendung mit einem Formular der Basisklasse Vcl.Forms.TForm namens „MainForm“. Auf dem Formular befindet sich eine Instanz der Klasse Vcl.WinXCtrls.TToggleSwitch namens „StyleSwitch“. Ist dieser Schalter eingeschaltet, nutzt die Anwendung das dunkle Design „Obsidian“, ansonsten wird standardmäßig das helle Design „Luna“ verwendet. Beide Designs sind im Lieferumfang von Delphi standardmäßig enthalten.

Gemäß der Intention von Schaltern, hat die Betätigung dieses Schalters unmittelbare Auswirkungen auf das Erscheinungsbild der Anwendung.

unit MainUnit;

interface

//Erforderliche Bibliotheken einbinden.
uses
  System.Classes,
  Vcl.Forms,
  Vcl.Controls,
  Vcl.WinXCtrls,
  Vcl.Themes;

//Hauptfenster und dessen Bestandteile deklarieren.
type
  TMainForm = class(TForm)
    StyleSwitch: TToggleSwitch;
    procedure StyleSwitchClick(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure UpdateStyle;
  end;

//Eine Instanz des Hauptfensters deklarieren.
var
  MainForm: TMainForm;

implementation

{$R *.dfm}

procedure TMainForm.FormCreate(Sender: TObject);
begin
  //Schalterposition auf "aus" setzen.
  StyleSwitch.State := tssOff;
  UpdateStyle;
end;

procedure TMainForm.StyleSwitchClick(Sender: TObject);
begin
  //Wenn die Schalterposition geändert wird,
  //soll das Design entsprechend geändert werden.
  UpdateStyle;
end;

procedure TMainForm.UpdateStyle;
begin
  //Design in Abhängigkeit der Schalterposition setzen.
  if StyleSwitch.State = tssOn then
  begin
    //Dunkles Design verwenden.
    TStyleManager.TrySetStyle('Obsidian', true);
  end
  else
  begin
    //Helles Design verwenden.
    TStyleManager.TrySetStyle('Luna', true);
  end;
end;

end.

FireMonkey (FMX)

Für plattformübergreifende Anwendungen existiert die FireMonkey-Komponente FMX.StdCtrls.TSwitch. Für eigene Implementierungen existiert die Basisklasse FMX.StdCtrls.TCustomSwitch.

Java

Java Swing

Unter Java Swing existiert die Komponente javax.swing.JToggleButton. Diese kann über den Look and Feel Mechanismus an das Design des Betriebssystems angepasst werden. Umschalter sind zwar nicht enthalten, allerdings kann (ähnlich wie unter Windows) die Oberfläche selbst gezeichnet werden – beispielsweise in Form eines Schalters. Dies geschieht über die Methode „paintComponent“, die unter Swing für jede Komponente bereitgestellt wird und von Entwicklern bei Bedarf überschrieben werden kann.

JavaFX

In JavaFX existieren nur Toggle Buttons, die allerdings so formatiert werden können, dass sie wie ein Schalter aussehen. Die Funktion selbst ist in jedem Fall ohnehin identisch. Es gibt aber auch Frameworks von Drittanbietern, die Schalter als eigenständiges Steuerelement bereitstellen. Ein Beispiel dafür ist die weit verbreitete Open Source Komponentenbibliothek ControllsFX.

JavaServer Faces (JSF)

Manche Komponenten-Frameworks für JavaServer Faces beinhalten Schalter. Dazu zählen unter anderem BootsFaces und PrimeFaces.

Android

Unter Android leiten sich Umschalter (android.widget.Switch) und Umschaltflächen (android.widget.ToggleButton) von der abstrakten Klasse android.widget.CompoundButton ab und sind bezüglich ihrer Kernfunktion identisch. Beide Komponenten unterscheiden sich praktisch nur in der visuellen Darstellung. Während Umschaltflächen bereits seit der ersten Version von Android enthalten sind, stehen Umschalter erst seit Android Ice Cream Sandwich (API Level 14) zur Verfügung.

Apple macOS und iOS

Für macOS wird die Komponente NSSwitch angeboten. Eine Besonderheit dieser Implementierung besteht darin, dass nicht nur der boolesche Wert des Schalters abgefragt werden kann, sondern auch dessen aktuelle Position während der Betätigung. Das ermöglicht beispielsweise sanfte Übergänge zwischen optischen Veränderungen an der Benutzeroberfläche. Dadurch kann der Benutzer auch den Zustandswechsel abbrechen, falls das erwartbare Endergebnis nicht auf Gefallen stößt. Für iOS und SwiftUI existiert die Komponente UISwitch.

HTML 5 und CSS 3

Umschalter sind in keinem bisherigen HTML Standard als eigenständiger Typ für Formularfelder enthalten. In aktuellen Browsern kann jedoch mit Hilfe von CSS die Darstellung von gewöhnlichen Kontrollkästchen so manipuliert werden, dass sie wie Schalter aussehen. Über das „onchange“-Ereignis ist es möglich, mit Hilfe einer Skriptsprache (z. B. JavaScript), eine richtlinienkonforme Aktion auszuführen, sobald sich der Zustand des Schalters ändert.

In (webbasierten) Dokumentationen werden häufig Piktogramme von Schaltern ( an | aus) verwendet. Einige moderne Symbolschriftarten (z. B. Font Awesome) enthalten derartige Piktogramme. Alternativ existieren sehr viele Vektor- und Rastergrafiken die Schalter repräsentieren.