Przyciski umożliwiają użytkownikowi wywołanie określonego działania. Istnieją 5 typów przycisków:
Typ |
Wygląd |
Cel |
---|---|---|
Wypełniony | jednolite tło z tekstem o kontrastującym kolorze; |
w przypadku działań głównych, takich jak „Prześlij” i „Zapisz”. Efekt cienia podkreśla znaczenie przycisku. |
Tonalna | Kolor tła zmienia się, aby dopasować się do powierzchni. |
Główne lub znaczące działania. Wypełnione przyciski mają większą wagę wizualną i są odpowiednie do działań takich jak „Dodaj do koszyka” i „Zaloguj się”. |
Wysoka | Cień sprawia, że wyróżnia się na tle innych. |
Główne lub znaczące działania. Zwiększ wysokość, aby przycisk był bardziej widoczny. |
Z konturem | zawiera obramowanie bez wypełnienia. |
Ważne, ale nie główne działania. Przyciski z konturem dobrze pasują do innych przycisków, aby wskazać alternatywne działania, np. „Anuluj” lub „Wstecz”. |
Text | tekst bez tła ani obramowania; |
W przypadku mniej ważnych działań, takich jak linki nawigacyjne lub działania dodatkowe, np. „Dowiedz się więcej” lub „Wyświetl szczegóły”. |
Zgodność wersji
Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.
Zależności
Tworzenie wypełnionego przycisku
Komponent wypełnionego przycisku korzysta z podstawowego komponentu Button
. Domyślnie jest ona wypełniona jednolitym kolorem.
Wyniki

Tworzenie wypełnionego przycisku tonalnego
Wypełniony tonalny komponent przycisku używa komponentu FilledTonalButton
.
Domyślnie jest on wypełniony kolorem tonalnym.
Wyniki

Tworzenie przycisku z konturem
Zarysowany komponent przycisku używa komponentu OutlinedButton
. Domyślnie jest ona wyświetlana z obrysem.
Wyniki

Tworzenie przycisku z dostępem do uprawnień administracyjnych
Komponent przycisku wyższego poziomu korzysta z komponentu ElevatedButton
. Domyślnie ma cień, który reprezentuje efekt podświetlenia, i wygląda jak przycisk z konturem i cieniem.
Wyniki

Tworzenie przycisku tekstowego
Komponent przycisku tekstowego korzysta z komponentu TextButton
. Dopóki nie zostanie kliknięty, będzie widoczny tylko jako tekst. Domyślnie nie ma jednolitej wypełnienia ani obrysu.
Wyniki

Najważniejsze punkty
onClick
: funkcja wywoływana, gdy użytkownik naciśnie przycisk.enabled
: jeśli ma wartość false, przycisk jest niedostępny i nieaktywny.colors
: wystąpienie klasyButtonColors
, które określa kolory użyte w przycisku.contentPadding
: odstęp wewnątrz przycisku.
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:
