Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
In diesem Abschnitt lernen Sie, wie Sie Ihrem Design
Interaktionen hinzufügen, indem Sie
Interaktions-Handler.
Mit Interaktions-Handlern kann angegeben werden, wo sich eine Komponente
mit denen interagiert hat (z. B. durch Tippen oder Doppeltippen). Interaktions-Handler können hinzugefügt werden,
auf jede Schicht innerhalb
eines Designs anwenden.
Handler hinzufügen
Jeder Ebene können Interaktions-Handler hinzugefügt werden. So können Designschaffende angeben,
welche Teile der Komponente
interaktiv sind.
Wählen Sie die Hero-Artikel-Variante (den Rahmen) aus und klicken Sie auf + neben dem
Parameter und wählen Sie tap-handler aus, um einen Interaktions-Handler hinzuzufügen. Dieses
können Entwickler Code schreiben, der darauf reagiert, wenn ein Nutzer auf die Karte tippt.
Wiederholen Sie den vorherigen Schritt mit der Menü-Symbolebene im audio-item.
Variante. So können Entwickler ein Menü anzeigen, wenn Nutzende auf das Menü tippen.
.
Wenn Sie den Handler auf das Menü getippt auswählen, werden Sie feststellen, dass er nur
gilt für die Variante audio-item, da die anderen Varianten keine
ein Menüsymbol. Auf NewsCard angetippt gilt jedoch für alle drei
Varianten. Das bedeutet, dass Sie einen Handler (im Code) angeben können, der ausgeführt wird, wenn
wird eine der drei Varianten angetippt.
Parameter. Wie dies funktioniert, erfahren wir im folgenden Update
Komponente im Android Studio.
Benannte Version speichern
Markieren wir nun diese Version als bereit für den Import in Code.
Öffnen Sie das Figma Relay-Plug-in, falls es noch nicht geöffnet ist.
Klicken Sie unten rechts im Dialogfeld auf „Share with developer“ (Für Entwickler freigeben).
Geben Sie auf dem Bildschirm Für Entwickler freigeben einen Namen und eine Beschreibung für den
Version.
Beispieltitel: Hinzugefügte Interaktionen
Beispielbeschreibung: Zwei Interaktions-Handler zu Karten hinzugefügt
Klicken Sie auf Speichern.
Drücken Sie Cmd + L (Mac) und Strg + L (Windows), um den Komponentenlink zu kopieren
in die Zwischenablage.
Komponente in Android Studio aktualisieren
Aktualisieren wir jetzt die NewsCard-Komponente:
Öffnen Sie in Android Studio das Fenster des Projekttools in der Ansicht Android.
Klicken Sie dann mit der rechten Maustaste auf app/ui-packages/news_card/
Klicken Sie im Kontextmenü auf Update UI Package (UI-Paket aktualisieren).
Klicken Sie auf , um Ihr Projekt zu erstellen. Damit werden das aktualisierte UI-Paket
eine aktualisierte Version des zusammensetzbaren Codes generiert.
<ph type="x-smartling-placeholder"></ph>
Sieh dir app/java/com/example/hellonews/newscard/NewsCard.kt an
Die Interaktions-Handler werden NewsCard als Parameter hinzugefügt.
(onNewsCardTapped, onMenuTapped)
// Design to select for NewsCardenumclassView{HeroItem,ArticleItem,AudioItem}/*** Displays a summary of a news article.** This composable was generated from the UI package 'news_card'.* Generated code; do not edit directly*/@ComposablefunNewsCard(modifier:Modifier=Modifier,view:View=View.HeroItem,thumbnail:Painter=EmptyPainter(),headline:String="",author:String="",date:String="",onNewsCardTapped:()->Unit={},onMenuTapped:()->Unit={}){...
In die App einbinden
Jetzt fügen wir unseren Interaktionen einige Handler hinzu.
Scrollen Sie in app/java/com/example/hellonews/ui/home/HomeScreen.kt nach unten zu
PostListArticleStories, um Zeile 175.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.