Ajouter des gestionnaires d'interaction aux conceptions

Dans cette section, nous allons apprendre à ajouter des interactions à notre conception via des gestionnaires d'interactions.

Application d'actualités avec interaction tactile

Les gestionnaires d'interaction permettent de spécifier les endroits où il est possible d'interagir avec un composant (en appuyant une fois ou deux, par exemple). Vous pouvez ajouter des gestionnaires d'interaction à n'importe quelle couche d'une conception.

Ajouter des gestionnaires

Vous pouvez ajouter des gestionnaires d'interaction à n'importe quelle couche. Cela permet aux concepteurs de spécifier les parties du composant qui sont interactives.

  1. Sélectionnez la variante hero-item (le frame), cliquez sur + à côté de Paramètres, puis sélectionnez tap-handler pour ajouter une gestionnaire d'interactions. Cela permet aux développeurs d'écrire du code qui réagit lorsqu'un utilisateur appuie sur la vignette.

    Plug-in Figma avec la variante "hero-item" sélectionnée

  2. Répétez l'étape précédente avec la couche d'icône menu dans la variante audio-item. Cela permet aux développeurs d'afficher un menu lorsqu'un utilisateur appuie sur l'icône de menu.

    Plug-in Figma avec la variante d'icône de menu sélectionnée

  3. Si vous sélectionnez le gestionnaire en appuyant sur le menu, vous remarquerez qu'il ne s'applique qu'à la variante audio-item, car les autres variantes n'ont pas d'icône de menu. Cependant, l'option On NewsCard tapped s'applique aux trois variantes. Cela signifie que vous pouvez fournir un gestionnaire (dans le code) à exécuter lorsque l'utilisateur appuie sur l'une des trois variantes, ce qui supprime la duplication du code et des paramètres. Nous verrons comment cela fonctionne plus en détail dans la section Mettre à jour le composant dans Android Studio.

    Plug-in Figma avec le gestionnaire d'appui sélectionné

Enregistrer la version nommée

Nous allons maintenant marquer cette version comme étant prête à être importée dans le code.

  1. Si ce n'est pas déjà fait, ouvrez le plug-in Figma Relay.

  2. Cliquez sur Partager avec un développeur dans le coin inférieur droit de la boîte de dialogue.

  3. Sur l'écran Partager avec un développeur, saisissez un nom et une description pour la version.

    Exemple de titre: Interactions ajoutées

    Exemple de description: Deux gestionnaires d'interaction ajoutés aux fiches

  4. Cliquez sur Enregistrer.

  5. Appuyez sur CMD-L sur un MAC, ou sur CTRL-L sous Windows pour copier le lien du composant dans le presse-papiers.

Mettre à jour le composant dans Android Studio

Mettez à jour le composant NewsCard :

  1. Dans Android Studio, assurez-vous que la fenêtre d'outil Projet se trouve dans la vue Android. Effectuez ensuite un clic droit sur app/ui-packages/news_card/, puis en bas du menu contextuel, cliquez sur Update UI Package (Mettre à jour le package UI).

    Option "Mettre à jour le package UI" dans le menu contextuel

  2. Cliquez sur Bouton "Créer un projet" pour créer votre projet. Le package UI mis à jour est alors utilisé et une version mise à jour du code composable est générée.

    Bouton "Créer" dans la barre d'outils

  3. Examinez app/java/com/example/hellonews/newscard/NewsCard.kt et constatez que les gestionnaires d'interaction sont ajoutés en tant que paramètres à NewsCard (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 = {}
) {
...

Intégrer à l'application

Ajoutons maintenant des gestionnaires à nos interactions.

  1. Dans app/java/com/example/hellonews/ui/home/HomeScreen.kt, faites défiler l'écran jusqu'à PostListArticleStories, vers la ligne 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. Pour postTop, ajoutez des gestionnaires pour onNewsCardTapped. createOnTapped ouvre une boîte de dialogue contenant ses paramètres de titre et de corps.

    @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. Pour chaque article, ajoutez des gestionnaires pour onNewsCardTapped.

    @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. Toujours dans HomeScreen.kt, faites défiler l'écran jusqu'à PostListAudioStories, vers la ligne 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. Pour chaque article, ajoutez des gestionnaires pour onNewsCardTapped. Étant donné que la variante "Audio" comporte un menu, attribuez createOnTapped à onMenuTapped.

    @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. Cliquez sur ▶ pour créer l'appli et l'exécuter dans l'émulateur.

    Bouton &quot;Exécuter&quot; dans la barre d&#39;outils
    Application d&#39;actualités en preview

    Parfait ! Vous connaissez maintenant les fonctionnalités avancées de Relay.

Pour en savoir plus sur l'utilisation de Relay, consultez la section Workflow de Relay. N'hésitez pas à nous faire part de vos commentaires.