Interaktions-Handler zu Designs hinzufügen

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

NewsApp mit Tippinteraktion

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.

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

    Das Figma-Plug-in mit der ausgewählten Variante des Hauptelements

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

    Das Figma-Plug-in mit ausgewählter Menü-Symbolvariante

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

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

Benannte Version speichern

Markieren wir nun diese Version 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 „Share with developer“ (Für Entwickler freigeben).

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

  4. Klicken Sie auf Speichern.

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

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

    Option „UI Package“ im Kontextmenü aktualisieren

  2. Klicken Sie auf Schaltfläche „Projekt erstellen“, um Ihr Projekt zu erstellen. Damit werden das aktualisierte UI-Paket eine aktualisierte Version des zusammensetzbaren Codes generiert.

    <ph type="x-smartling-placeholder">
    </ph> Schaltfläche „Build“ in der Symbolleiste

  3. 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 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 die App einbinden

Jetzt fügen wir unseren Interaktionen einige 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 eine mit seinen Parametern als Titel und Textkörper.

    @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ügen Sie jedem Post 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. In HomeScreen.kt nach unten scrollen bis PostListAudioStories, um die 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ügen Sie jedem Post Handler für onNewsCardTapped hinzu. Da die Audiovariante über ein Menü verfügt, 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 kennen die erweiterten Funktionen von Relay.

Weitere Informationen zur Verwendung von Relay finden Sie im Relay-Workflow. . Wir freuen uns auch, von Ihnen zu hören, falls Sie Feedback.