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
![Wypełniony przycisk na fioletowym tle z napisem „filled”](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-filled.png?hl=pl)
Tworzenie wypełnionego przycisku tonalnego
Wypełniony tonalny komponent przycisku używa komponentu FilledTonalButton
.
Domyślnie jest on wypełniony kolorem tonalnym.
Wyniki
![Przycisk tonalny na jasnofioletowym tle z napisem „filled” (wypełniony).](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-tonal.png?hl=pl)
Tworzenie przycisku z konturem
Zarysowany komponent przycisku używa komponentu OutlinedButton
. Domyślnie jest ona wyświetlana z obrysem.
Wyniki
![Przezroczysty przycisk z konturem i ciemną obwódką z napisem „Outlined” (Obrys).](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-outlined.png?hl=pl)
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
![Podniesiony przycisk na szarym tle z napisem „Elevated” (Podniesiony).](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-elevated.png?hl=pl)
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
![Przycisk tekstowy z napisem „Przycisk tekstowy”](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-text.png?hl=pl)
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:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=pl)