Ein-/Aus-Schalter hinzufügen

Mit der Komponente Switch können Nutzer zwischen zwei Zuständen wechseln: angeklickt und nicht angeklickt. Mit einem Schalter kann der Nutzer Folgendes tun:

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

Die Komponente besteht aus zwei Teilen: dem Schieberegler und dem Track. Der Schieberegler ist der bewegliche 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 die Option zu aktivieren oder zu deaktivieren.

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 ist eine minimale Implementierung des Switch-Kompositions-Elements:

Ergebnisse

Ein einfacher Schalter, der nicht angeklickt ist.
Abbildung 1 Ein Kästchen ohne Häkchen.
Ein einfacher Schalter, der aktiviert ist.
Abbildung 2. Ein angeklickter Schalter.

Benutzerdefiniertes Thumbnail erstellen

Du kannst einen beliebigen Composeable-Parameter für den thumbContent-Parameter übergeben, um einen benutzerdefinierten Thumbnail zu erstellen. Im folgenden Beispiel wird ein Schalter mit einem benutzerdefinierten Symbol für den Schieberegler verwendet:

Ergebnisse

Das Aussehen ohne Häkchen entspricht dem Beispiel im vorherigen Abschnitt. Wenn Sie diese Option aktivieren, wird diese Implementierung jedoch so angezeigt:

Ein Schalter, der mit dem Parameter „thumbContent“ ein benutzerdefiniertes Symbol anzeigt, wenn er aktiviert ist.
Abbildung 3 Ein Schalter mit einem benutzerdefinierten Häkchensymbol.

Benutzerdefinierte Farben verwenden

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

Ergebnisse

Ein Schalter, der mit dem Parameter „colors“ einen Schalter mit benutzerdefinierten Farben für den Schieberegler und den Stift anzeigt.
Abbildung 4: Ein Schalter mit benutzerdefinierten Farben.

Wichtige Fakten

  • Grundlegende Parameter:

    • checked: Der anfängliche Status des Schalters.
    • onCheckedChange: Ein Rückruf, 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: Hiermit kannst du die Farbe des Titels und des Thumbnails anpassen.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

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

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.
Zu den FAQs Feedback geben