Ein-/Aus-Schalter hinzufügen

Mit der Komponente Switch können Nutzer zwischen zwei Status wechseln: „Aktiviert“ und „Deaktiviert“. Verwenden Sie einen Schalter, damit der Nutzer eine der folgenden Aktionen ausführen kann:

  • Aktiviere oder deaktiviere eine Einstellung.
  • Funktionen 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 Schieber nach links oder rechts ziehen, um den Status des Schalters zu ändern. Sie können auch auf den Schalter tippen, um ihn 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 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 ein beliebiges Composable für den Parameter thumbContent übergeben, um ein benutzerdefiniertes Vorschaubild zu erstellen. Im Folgenden sehen Sie ein Beispiel für einen Schalter, bei dem ein benutzerdefiniertes Symbol für den Thumb verwendet wird:

Ergebnisse

Das Aussehen des deaktivierten Kontrollkä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 Ziehpunkt 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-Systems erstellen können.
Sammlung von Kurzanleitungen

Fragen oder Feedback

Auf unserer Seite mit 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