Dodaj przełącznik, który użytkownicy mogą włączać i wyłączać

Komponent Switch umożliwia użytkownikom przełączanie się między dwoma stanami: zaznaczonym i niezaznaczonym. Użyj przełącznika, aby umożliwić użytkownikowi wykonanie jednej z tych czynności:

  • Włącz lub wyłącz ustawienie.
  • Włącz lub wyłącz funkcję.
  • Wybierz opcję.

Komponent składa się z 2 części: suwaka i ścieżki. Suwak to element przełącznika, który można przeciągać, a ścieżka to tło. Użytkownik może przeciągnąć suwak w lewo lub w prawo, aby zmienić stan przełącznika. Mogą też dotknąć przełącznika, aby sprawdzić i wyczyścić to pole.

Zgodność wersji

Ta implementacja wymaga, aby minimalny pakiet SDK projektu był ustawiony na poziom API 21 lub wyższy.

Zależności

Wdrażanie przełącznika

Poniższy przykład to minimalna implementacja funkcji kompozycyjnej Switch:

Wyniki

Podstawowy przełącznik, który jest odznaczony.
Rysunek 1. Niezaznaczony przełącznik.
Podstawowy przełącznik, który jest zaznaczony.
Rysunek 2. Zaznaczony przełącznik.

Tworzenie niestandardowej miniatury

Aby utworzyć niestandardową miniaturę, możesz przekazać dowolny element kompozycyjny do parametru thumbContent. Poniżej znajdziesz przykład przełącznika, który używa niestandardowej ikony dla suwaka:

Wyniki

Wygląd niezaznaczonego pola jest taki sam jak w przykładzie w poprzedniej sekcji. Jeśli jednak to pole jest zaznaczone, implementacja wygląda tak:

Przełącznik, który używa parametru thumbContent do wyświetlania niestandardowej ikony po zaznaczeniu.
Rysunek 3. Przełącznik z niestandardową ikoną zaznaczenia.

Używanie kolorów niestandardowych

Użyj parametru colors, aby zmienić kolor suwaka i ścieżki, biorąc pod uwagę, czy suwak jest zaznaczony.

Wyniki

Przełącznik, który używa parametru colors do wyświetlania przełącznika z niestandardowymi kolorami suwaka i przycisku.
Rysunek 4. Przełącznik z niestandardowymi kolorami.

Najważniejsze punkty

  • Parametry podstawowe:

    • checked: stan początkowy przełącznika.
    • onCheckedChange: wywołanie zwrotne, które jest wywoływane, gdy zmienia się stan przełącznika.
    • enabled: czy przełącznik jest włączony czy wyłączony.
    • colors: kolory użyte w przypadku przełącznika.
  • Parametry zaawansowane

    • thumbContent: użyj tej opcji, aby dostosować wygląd suwaka, gdy jest zaznaczony.
    • colors: użyj tej opcji, aby dostosować kolor ścieżki i suwaka.

Kolekcje, które zawierają ten przewodnik

Ten przewodnik jest częścią wyselekcjonowanych kolekcji przewodników, które obejmują szersze cele związane z programowaniem na Androida:

Dowiedz się, jak funkcje kompozycyjne mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu na podstawie systemu projektowania Material Design.

Masz pytania lub chcesz podzielić się opinią?

Odwiedź stronę z najczęstszymi pytaniami, aby zapoznać się z przewodnikami, lub skontaktuj się z nami i podziel się swoimi przemyśleniami.