Chip zum Darstellen komplexer Entitäten erstellen

Die Chip-Komponente ist ein kompaktes, interaktives UI-Element. Sie stellen komplexe Entitäten wie Kontakte oder Tags dar, oft mit einem Symbol und einem Label. Sie kann anklickbar, abwählbar oder ausblendbar sein.

Die fünf Arten von Chips und ihre Verwendungsmöglichkeiten:

• Unterstützen: Der Nutzer wird bei einer Aufgabe unterstützt. Erscheint oft als temporäres UI-Element als Reaktion auf Nutzereingaben.
• Filter: Damit können Nutzer Inhalte anhand einer Reihe von Optionen eingrenzen. Sie können ausgewählt oder deaktiviert werden und enthalten bei Auswahl möglicherweise ein Häkchensymbol.
• Eingabe: Stellt von Nutzern bereitgestellte Informationen dar, z. B. Auswahlen in einem Menü. Sie können ein Symbol und Text enthalten und ein „X“ zum Entfernen.
• Vorschlag: Bietet Nutzern Empfehlungen basierend auf ihren letzten Aktivitäten oder Eingaben. Sie werden in der Regel unter einem Eingabefeld angezeigt, um Nutzer zu Aktionen anzuregen.
• Elevated: Sie wirken nicht flach, sondern haben ein erhöhtes Erscheinungsbild.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Assistenz-Chip erstellen

Mit dem AssistChip-Komposit können Sie ganz einfach einen Assistenz-Chip erstellen, der Nutzer in eine bestimmte Richtung lenkt. Ein Unterscheidungsmerkmal ist der Parameter leadingIcon, mit dem Sie ein Symbol auf der linken Seite des Chips anzeigen können, wie in Abbildung 1 dargestellt. Im folgenden Beispiel wird gezeigt, wie Sie dies implementieren können:

Filter-Chip erstellen

Für das FilterChip-Kompositelement müssen Sie erfassen, ob der Chip ausgewählt ist. Im folgenden Beispiel wird gezeigt, wie Sie ein Häkchensymbol nur anzeigen können, wenn der Nutzer den Chip ausgewählt hat:

Ergebnisse

Eingabe-Chip erstellen

Mit dem InputChip-Komposit können Sie Chips erstellen, die aus einer Nutzerinteraktion resultieren. Wenn ein Nutzer beispielsweise in einem E-Mail-Client eine E-Mail schreibt, kann ein Eingabechip eine Person darstellen, deren Adresse der Nutzer in das Feld „An:“ eingegeben hat.

Die folgende Implementierung zeigt einen Eingabe-Chip, der sich in einem ausgewählten Zustand befindet. Der Nutzer schließt den Chip, indem er darauf drückt.

Ergebnisse

Vorschlags-Chip erstellen

Das SuggestionChip-Komposit ist das grundlegendste der auf dieser Seite aufgeführten Komposite, sowohl in Bezug auf die API-Definition als auch auf die gängigen Anwendungsfälle. Vorschlags-Chips enthalten dynamisch generierte Hinweise. In einer KI-Chat-App könnten Sie beispielsweise Vorschlags-Chips verwenden, um mögliche Antworten auf die letzte Nachricht anzuzeigen.

Betrachten Sie diese Implementierung von SuggestionChip:

Ergebnisse

Erhöhten Chip erstellen

In allen Beispielen in diesem Dokument werden die Basis-Kompositionen verwendet, die ein flaches Erscheinungsbild haben. Wenn Sie einen Chip mit einem erhöhten Erscheinungsbild wünschen, verwenden Sie eines der drei folgenden Composeables:

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

Wichtige Fakten

Den vier Chiptypen entsprechen vier Composeables mit den folgenden gemeinsamen Parametern:

• label: Der String, der auf dem Chip angezeigt wird.
• icon: Das Symbol, das am Anfang des Chips angezeigt wird. Einige zusammensetzbare Funktionen haben einen separaten leadingIcon- und trailingIcon-Parameter.
• onClick: Das Lambda, das der Chip aufruft, wenn der Nutzer darauf klickt.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.

Zu den FAQs Feedback geben