In diesem Abschnitt erfahren Sie, wie Sie Ihrem Design über Interaktions-Handler Interaktionen hinzufügen.
Mit Interaktions-Handlern können Sie angeben, wo mit einer Komponente interagiert werden kann (z. B. angetippt oder doppelt angetippt werden). Interaktions-Handler können jeder Ebene innerhalb eines Designs hinzugefügt werden.
Handler hinzufügen
Interaktions-Handler können jeder Ebene hinzugefügt werden. So können Designer festlegen, welche Teile der Komponente interaktiv sind.
Wählen Sie die hero-item-Variante (den Frame) aus, klicken Sie neben Parameter auf + und wählen Sie
tap-handler
aus, um einen Interaktions-Handler hinzuzufügen. Dadurch können Entwickler Code schreiben, der auf das Tippen eines Nutzers auf die Karte reagiert.Wiederholen Sie den vorherigen Schritt mit dem Symbol für das Menü in der Variante audio-item. So können Entwickler ein Menü einblenden, wenn ein Nutzer auf das Menüsymbol tippt.
Wenn Sie den Handler on Menu tapped auswählen, werden Sie feststellen, dass er nur für die Variante audio-item gilt, da die anderen Varianten kein Menüsymbol haben. Die Regel on 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 auf eine der drei Varianten getippt wird. Dadurch wird doppelter Code und doppelte Parameter entfernt. Wie das funktioniert, sehen wir uns im folgenden Abschnitt Komponente aktualisieren in Android Studio genauer an.
Benannte Version speichern
Markieren wir diese Version nun 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 Für Entwickler freigeben.
Geben Sie auf dem Bildschirm Für Entwickler freigeben einen Namen und eine Beschreibung für die Version ein.
Beispieltitel: Hinzugefügte Interaktionen
Beispielbeschreibung: Zwei Interaktions-Handler wurden den Karten hinzugefügt
Klicken Sie auf Speichern.
Drücken Sie auf einem Mac Strg + L und auf einem Mac Strg + L, um den Komponentenlink in die Zwischenablage zu kopieren.
Komponente in Android Studio aktualisieren
Aktualisieren wir nun die Komponente NewsCard:
Achten Sie in Android Studio darauf, dass sich das Fenster „Project Tool“ in der Ansicht Android befindet. Klicken Sie dann mit der rechten Maustaste auf
app/ui-packages/news_card/
und klicken Sie unten im Kontextmenü auf Update UI Package (UI-Paket aktualisieren).Klicken Sie auf , um Ihr Projekt zu erstellen. Dadurch wird aus dem aktualisierten UI-Paket eine aktualisierte Version des zusammensetzbaren Codes generiert.
Unter
app/java/com/example/hellonews/newscard/NewsCard.kt
werden die Interaktions-Handler als Parameter zu NewsCard hinzugefügt (onNewsCardTapped
,onMenuTapped
).// Design to select for NewsCard enum class View { 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 */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "", onNewsCardTapped: () -> Unit = {}, onMenuTapped: () -> Unit = {} ) { ...
In App integrieren
Als Nächstes fügen wir unseren Interaktionen Handler hinzu.
Scrollen Sie in
app/java/com/example/hellonews/ui/home/HomeScreen.kt
nach unten zuPostListArticleStories
um Zeile 175.... @Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories(...) @Composable fun Dialog(...) ...
Fügen Sie für
postTop
Handler füronNewsCardTapped
hinzu.createOnTapped
öffnet ein Dialogfeld mit seinen Parametern als Titel und Text.@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { Spacer(modifier = Modifier.size(12.dp)) NewsCard( thumbnail = painterResource(postTop.imageId), headline = postTop.title, author = postTop.metadata.author.name, date = postTop.metadata.date, onNewsCardTapped = createOnTapped("Card Tapped", postTop.title), view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
Füge für jeden Beitrag Handler für
onNewsCardTapped
hinzu.@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { ... posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, onNewsCardTapped = createOnTapped("Card Tapped", post.title), view = View.ArticleItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Scrollen Sie in
HomeScreen.kt
nach unten zuPostListAudioStories
um Zeile 260.... @Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories(...) @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable fun Dialog(...) ...
Füge für jeden Beitrag Handler für
onNewsCardTapped
hinzu. Da die Audiovariante ein Menü hat, weisen SiecreateOnTapped
zuonMenuTapped
zu.@Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { Column( horizontalAlignment = ..., modifier = ... ) { posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, onNewsCardTapped = createOnTapped("Card Tapped", post.title), onMenuTapped = createOnTapped("Menu Tapped", post.title), view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Klicken Sie auf ▶, um die App zu erstellen und im Emulator auszuführen.
Super! Sie haben jetzt die erweiterten Funktionen von Relay kennengelernt.
Weitere Informationen zur Arbeit mit Relay finden Sie im Abschnitt Relay-Workflow. Wir freuen uns auch über Feedback von Ihnen.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Inhaltsparameter
- Umgang mit Designvarianten