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

Komponent Switch umożliwia użytkownikom przełączanie się między 2 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łączanie i wyłączanie funkcji.
  • Wybierz opcję.

Składa się z 2 części: miniatury i ścieżki. Palec to element przeciągalny przełącznika, a ścieżka to tło. Użytkownik może przeciągnąć suwak w lewo lub w prawo, aby zmienić stan przełącznika. Może też kliknąć przełącznik, aby sprawdzić i wyczyścić ustawienia.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Przełączanie

Poniżej znajdziesz minimalną implementację kompozytu Switch:

Wyniki

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

Tworzenie niestandardowej miniatury

Aby utworzyć niestandardowy miniaturę, możesz podać dowolny komponent w parametrze thumbContent. Poniżej znajdziesz przykład przełącznika, który używa niestandardowej ikony w przycisku:

Wyniki

Wygląd niezaznaczonego pola jest taki sam jak w sekcji poprzedniej. Jednak po zaznaczeniu ta implementacja wygląda tak:

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

Używanie kolorów niestandardowych

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

Wyniki

Przełącznik, który używa parametru colors, aby wyświetlić przełącznik z niestandardowymi kolorami zarówno dla suwaka, jak i przycisku.
Rysunek 4. Przełącznik z niestandardowymi kolorami.

Najważniejsze punkty

  • Parametry podstawowe:

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

    • thumbContent: służy do dostosowywania wyglądu miniatury po zaznaczeniu.
    • colors: użyj tego, aby dostosować kolor utworu i miniatury.

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

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

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.