Tworzenie elementu reprezentującego złożone elementy

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.
Rysunek 1. Element załącznika.

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.
Rysunek 2. Niewybrana ikona filtra.
Wybrana ikona filtra z zaznacznikiem i kolorowe tło.
Rysunek 3. Wybrany element filtra.

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ą.
Rysunek 4. Element wprowadzania tekstu.

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.
Rysunek 5. Element załącznika.

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 parametry leadingIcontrailingIcon.
  • 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:

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.