Adicionar gerenciadores de interação a designs

Nesta seção, vamos aprender a adicionar interações ao nosso design usando gerenciadores de interação.

Os gerenciadores de interação proporcionam uma maneira de especificar onde interagir com um componente (com um toque, dois toques etc.). Eles podem ser adicionados a qualquer camada de um design.

Adicionar gerenciadores

Os gerenciadores de interação podem ser adicionados a qualquer camada. Isso permite que os designers especifiquem quais partes do componente são interativas.

1. Selecione a variante hero-item (o frame), clique em + ao lado de Parameters e selecione tap-handler para adicionar uma gerenciador de interação. Isso permite que os desenvolvedores escrevam um código que reaja ao toque de um usuário no card.

   

2. Repita a etapa anterior com a camada do ícone menu na variante audio-item. Isso permite que os desenvolvedores mostrem um menu quando um usuário tocar no ícone de menu.

   

3. Se você selecionar o gerenciador on Menu tapped, perceberá que ele só se aplica à variante audio-item, porque as outras variantes não têm um ícone de menu. No entanto, on NewsCard toped se aplica aos três variantes. Isso significa que você pode fornecer um gerenciador (no código) para ser executado quando qualquer uma das três variantes é tocada, removendo duplicação de código e parâmetros. Vamos ver como isso funciona com mais detalhes no próximo treinamento no Android Studio.

   

Salvar versão nomeada

Agora, vamos marcar essa versão como pronta para ser importada para o código.

1. Abra o plug-in Figma Relay, se ainda não estiver aberto.

2. Clique em Compartilhar com o desenvolvedor no canto inferior direito da caixa de diálogo.

3. Na tela Compartilhar com o desenvolvedor, insira um nome e uma descrição para o para a versão anterior.

   Exemplo de título: Interações adicionadas

   Exemplo de descrição: dois gerenciadores de interação adicionados aos cards

4. Clique em Salvar.

5. Pressione CMD-L em um MAC e CTRL-L no Windows para copiar o link do componente para a área de transferência.

Atualizar componente no Android Studio

Agora vamos atualizar o componente NewsCard:

1. No Android Studio, verifique se a janela de ferramentas Project está na visualização Android. Em seguida, clique com o botão direito do mouse em app/ui-packages/news_card/, próximo à parte inferior menu de contexto, clique em Update UI Package.

   

2. Clique em para criar seu projeto. Isso extrai o pacote de IU atualizado e gera uma versão atualizada do código de composição.

   

   Observação: isso resulta em avisos de build no HomeScreen.kt, uma vez que ele não está usando os novos parâmetros no NewsCard. Esse resultado é esperado.

3. Observe app/java/com/example/hellonews/newscard/NewsCard.kt e observe que: Os gerenciadores de interação são adicionados como parâmetros a 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 = {}
   ) {
   ...
   

Integrar ao app

Agora vamos adicionar alguns gerenciadores às interações.

1. Em app/java/com/example/hellonews/ui/home/HomeScreen.kt, role para baixo até PostListArticleStories, próximo à linha 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. Para postTop, adicione gerenciadores para onNewsCardTapped. createOnTapped abre um com parâmetros como título e corpo.

   @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. Para cada postagem, adicione manipuladores para 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. Ainda no HomeScreen.kt, role para baixo até o PostListAudioStories, próximo à linha 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. Para cada postagem, adicione manipuladores para onNewsCardTapped. Como a variante "Áudio" tiver um menu, atribua createOnTapped a 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. Clique em ▶ para criar e executar o app no emulador.

   

   

   Oba! Você aprendeu os recursos avançados do Relay.

Saiba mais no artigo Fluxo de trabalho do Relay nesta seção. Também gostaríamos de saber se você tem algum feedback.