Interaktions-Handler zu Designs hinzufügen

In diesem Abschnitt erfahren Sie, wie Sie Ihrem Design über Interaktions-Handler Interaktionen hinzufügen.

NewsApp mit Tippinteraktion

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.

  1. 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.

    Das Figma-Plug-in mit der ausgewählten Hero-Item-Variante

  2. 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.

    Das Figma-Plug-in mit der ausgewählten Variante des Menüsymbols

  3. 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.

    Das Figma-Plug-in mit ausgewähltem Tipp-Handler

Benannte Version speichern

Markieren wir diese Version nun als bereit für den Import in Code.

  1. Öffnen Sie das Figma Relay-Plug-in, falls es noch nicht geöffnet ist.

  2. Klicken Sie unten rechts im Dialogfeld auf Für Entwickler freigeben.

  3. 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

  4. Klicken Sie auf Speichern.

  5. 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:

  1. 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).

    Option „UI-Paket aktualisieren“ im Kontextmenü

  2. Klicken Sie auf Schaltfläche „Projekt erstellen“, um Ihr Projekt zu erstellen. Dadurch wird aus dem aktualisierten UI-Paket eine aktualisierte Version des zusammensetzbaren Codes generiert.

    Schaltfläche „Build“ in der Symbolleiste

  3. 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.

  1. Scrollen Sie in app/java/com/example/hellonews/ui/home/HomeScreen.kt nach unten zu PostListArticleStories 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(...)
...

  2. Fügen Sie für postTop Handler für onNewsCardTapped 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))
      ...
  }
}

  3. 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))
      }
  }
}

  4. Scrollen Sie in HomeScreen.kt nach unten zu PostListAudioStories 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(...)
...

  5. Füge für jeden Beitrag Handler für onNewsCardTapped hinzu. Da die Audiovariante ein Menü hat, weisen Sie createOnTapped zu onMenuTapped 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))
      }
  }
}

  6. Klicken Sie auf ▶, um die App zu erstellen und im Emulator auszuführen.

    Schaltfläche „Ausführen“ in der Symbolleiste
    Nachrichten-App in Aktion in der Vorschau

    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.