Ajouter des gestionnaires d'interaction aux conceptions

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

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.

   

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.

   

3. Si vous sélectionnez le gestionnaire en appuyant sur un bouton, vous remarquerez qu'il n'affiche s'applique à la variante audio-item, car les autres variantes une icône de menu. Toutefois, l'utilisateur ayant appuyé sur NewsCard s'applique à ces trois éléments. . Cela signifie que vous pouvez fournir un gestionnaire (dans le code) à exécuter lorsque l'une des trois variantes est utilisée, ce qui supprime les doublons du code et paramètres. Nous verrons son fonctionnement plus en détail dans les mises à jour dans Android Studio.

   

Enregistrer la version nommée

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

1. Ouvrez le plug-in Figma Relay, s'il n'est pas déjà ouvert.

2. Cliquez sur "Partager avec le développeur" dans l'angle inférieur droit de la boîte de dialogue.

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

   Exemple de titre: Interactions ajoutées

   Exemple de description: deux gestionnaires d'interactions ajoutés aux fiches

4. Cliquez sur Enregistrer.

5. Appuyez sur CMD-L sur un ordinateur MAC, puis 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. Ensuite, effectuez un clic droit sur app/ui-packages/news_card/, vers le bas de la cliquez sur Mettre à jour le package UI.

   

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

   <ph type="x-smartling-placeholder">

   </ph>

   Remarque :Des avertissements de compilation sont générés dans HomeScreen.kt, car il n'utilise pas les nouveaux paramètres dans NewsCard. Cela est normal.

3. Vous verrez que app/java/com/example/hellonews/newscard/NewsCard.kt 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 un avec 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 post, 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 post, ajoutez des gestionnaires pour onNewsCardTapped. Étant donné que la variante "Audio" contient 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.

   

   

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

Pour en savoir plus sur l'utilisation de Relay, consultez le workflow de Relay. . N'hésitez pas à nous contacter si vous avez commentaires.