Ein-/Aus-Schalter hinzufügen

Mit der Komponente Switch können Nutzer zwischen zwei Status wechseln: „checked“ (aktiviert) und „unchecked“ (deaktiviert). Mit einem Schalter können Nutzer Folgendes tun:

  • Aktivieren oder deaktivieren Sie eine Einstellung.
  • Funktion aktivieren oder deaktivieren
  • Wählen Sie eine Option aus.

Die Komponente besteht aus zwei Teilen: dem Ziehpunkt und der Spur. Der Thumb ist der ziehbare Teil des Schalters und der Track ist der Hintergrund. Der Nutzer kann den Schieberegler nach links oder rechts ziehen, um den Status des Schalters zu ändern. Sie können auch auf den Schalter tippen, um das Häkchen zu setzen oder zu entfernen.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Schalter implementieren

Das folgende Beispiel zeigt eine minimale Implementierung der zusammensetzbaren Funktion Switch:

Ergebnisse

Ein einfacher Schalter, der nicht aktiviert ist.
Abbildung 1: Ein deaktivierter Schalter.
Ein einfacher Schalter, der aktiviert ist.
Abbildung 2. Ein aktivierter Schalter.

Benutzerdefiniertes Thumbnail erstellen

Sie können für den Parameter thumbContent eine beliebige zusammensetzbare Funktion übergeben, um ein benutzerdefiniertes Vorschaubild zu erstellen. Das folgende Beispiel zeigt einen Schalter, für dessen Ziehpunkt ein benutzerdefiniertes Symbol verwendet wird:

Ergebnisse

Das Aussehen des deaktivierten Kästchens ist dasselbe wie im Beispiel im vorherigen Abschnitt. Wenn sie jedoch aktiviert ist, sieht die Implementierung so aus:

Ein Schalter, der mit dem Parameter „thumbContent“ ein benutzerdefiniertes Symbol anzeigt, wenn er aktiviert ist.
Abbildung 3. Ein Schalter mit einem benutzerdefinierten Symbol für den angekreuzten Zustand.

Benutzerdefinierte Farben verwenden

Mit dem Parameter colors können Sie die Farbe des Schalters und des Hintergrunds ändern. Dabei wird berücksichtigt, ob der Schalter aktiviert ist.

Ergebnisse

Ein Schalter, der den Parameter „colors“ verwendet, um einen Schalter mit benutzerdefinierten Farben für den Schalterknopf und die Markierung darzustellen.
Abbildung 4: Ein Schalter mit benutzerdefinierten Farben.

Wichtige Fakten

  • Grundlegende Parameter:

    • checked: Der ursprüngliche Status des Schalters.
    • onCheckedChange: Ein Callback, der aufgerufen wird, wenn sich der Status des Schalters ändert.
    • enabled: Gibt an, ob der Schalter aktiviert oder deaktiviert ist.
    • colors: Die für den Schalter verwendeten Farben.

  • Erweiterte Parameter

    • thumbContent: Hiermit können Sie das Aussehen des Thumbnails anpassen, wenn es ausgewählt ist.
    • colors: Damit können Sie die Farbe des Tracks und des Thumb anpassen.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden Kurzanleitungen, die umfassendere Ziele der Android-Entwicklung abdecken:

Hier erfahren Sie, wie Sie mit zusammensetzbaren Funktionen ganz einfach ansprechende UI-Komponenten auf Grundlage des Material Design-Designsystems erstellen können.
Sammlung von Kurzanleitungen

Fragen oder Feedback

Auf der Seite mit den häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können uns aber auch gern kontaktieren und uns Ihre Meinung mitteilen.
Zu den FAQs Feedback geben