Komponent Chip
to kompaktowy, interaktywny element interfejsu. Reprezentują one złożone elementy, takie jak kontakty lub tagi, często z ikoną i etykietą. Może być zaznaczany, usuwany lub klikalny.
Oto 5 rodzajów komponentów i miejsca, w których możesz ich używać:
- Pomoc: prowadzi użytkownika podczas wykonywania zadania. Często pojawia się jako tymczasowy element interfejsu w odpowiedzi na dane wejściowe użytkownika.
- Filtr: pozwala użytkownikom dostosować treści z zestawu opcji. Można je zaznaczać i odznaczać, a w przypadku zaznaczenia mogą zawierać ikonę znacznika wyboru.
- Wejście: reprezentuje informacje podawane przez użytkownika, takie jak wybory w menu. Mogą zawierać ikonę i tekst oraz przycisk „X” do usunięcia.
- Sugestia: wyświetla użytkownikowi rekomendacje na podstawie jego ostatniej aktywności lub danych wejściowych. Zazwyczaj pojawiają się pod polem wprowadzania danych, aby zachęcić użytkownika do podjęcia działania.
- Elevated (podniesiony): ma podniesiony wygląd zamiast płaskiego.
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 elementu pomocy
Komponent AssistChip
to prosty sposób na tworzenie elementów pomocy, które kierują użytkownika w określonym kierunku. Jedną z takich funkcji jest parametr leadingIcon
, który umożliwia wyświetlanie ikony po lewej stronie elementu, jak pokazano na rysunku 1. Ten przykład pokazuje, jak to zrobić:
![Prosty element pomocy.](https://developer.android.com/static/develop/ui/compose/images/components/chip-assist.png?hl=pl)
Tworzenie elementu prowadzącego do filtra
Komponent FilterChip
wymaga śledzenia, czy element jest wybrany. W tym przykładzie pokazujemy, jak wyświetlić ikonę zaznaczonego elementu tylko wtedy, gdy użytkownik go wybierze:
Wyniki
![Niewybrana ikona filtra bez znacznika i z tłem planu.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter.png?hl=pl)
![Wybrana ikona filtra z zaznacznikiem i kolorowe tło.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter-active.png?hl=pl)
Tworzenie elementu danych wejściowych
Możesz użyć komponentu InputChip
, aby tworzyć elementy, które są wynikiem interakcji z użytkownikiem. Na przykład w kliencie poczty, gdy użytkownik pisze e-maila, element wejściowy może reprezentować osobę, której adres został wpisany w polu „do:”.
Poniższa implementacja pokazuje element interfejsu, który jest w wybranym stanie. Użytkownik odrzuca element, gdy go naciśnie.
Wyniki
![Element wejściowy z awatarem i ikoną końcową.](https://developer.android.com/static/develop/ui/compose/images/components/chip-input.png?hl=pl)
Tworzenie elementu z sugestia
Komponent SuggestionChip
jest najprostszym z wymienionych na tej stronie, zarówno pod względem definicji interfejsu API, jak i typowych zastosowań. Elementy sugestii zawierają dynamicznie generowane wskazówki. Na przykład w aplikacji do czatu z AI możesz używać elementów z supozycjami, aby przedstawiać możliwe odpowiedzi na najnowszą wiadomość.
Rozważ implementację SuggestionChip
:
Wyniki
![Prosty element pomocy.](https://developer.android.com/static/develop/ui/compose/images/components/chip-suggestion.png?hl=pl)
Tworzenie elementu podniesionego
Wszystkie przykłady w tym dokumencie wykorzystują podstawowe komponenty, które mają płaski wygląd. Jeśli chcesz użyć elementu, który ma podwyższoną pozycję, użyj jednego z tych 3 komponentów:
Najważniejsze punkty
4 elementy składane odpowiadają 4 typom komponentów i mają te same parametry:
label
: ciąg znaków wyświetlany na chipie.icon
: ikona wyświetlana na początku elementu. Niektóre elementy kompozycyjne mają oddzielne parametryleadingIcon
itrailingIcon
.onClick
: funkcja Lambda wywoływana przez element, gdy użytkownik kliknie go.
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.com/static/images/quick-guides/collection-illustration.png?hl=pl)