Adicionar gerenciadores de interação a designs

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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

NewsApp com interação por toque

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.

    O plug-in do Figma com a variante hero-item selecionada
  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.

    O plug-in do Figma com a variante do ícone de menu selecionada
  3. Se você selecionar o gerenciador on Menu tapped, verá que ele se aplica apenas à variante audio-item, porque as outras não têm um ícone de menu. No entanto, on NewsCard tapped se aplica às três variantes. Isso significa que é possível fornecer um gerenciador (em código) para ser executado quando qualquer uma das três variantes for tocada, removendo duplicação de código e parâmetros. Esse assunto vai ser abordado em mais detalhes na seção Atualizar componente no Android Studio abaixo.

    O plug-in do Figma com o gerenciador de toque selecionado

Salvar versão nomeada

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

  1. Adicione uma nova versão nomeada do arquivo do Figma. Acesse File > Save to Version History e insira um título e uma descrição para a nova versão. Qualquer título e descrição funcionam.

    Exemplo de título: "Interações adicionadas"

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

    Opção "Save to version history" no menu

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/ e, perto da parte de baixo do menu de contexto, clique em Update UI Package.

    Atualizar a opção de pacote de IU no menu de contexto
  2. Clique em Botão "Make Project" para criar seu projeto. Isso extrai o pacote de IU atualizado e gera uma versão atualizada do código de composição.

    Botão "Build" na barra de ferramentas
  3. Ao analisar app/java/com/example/hellonews/newscard/NewsCard.kt, você verá que os gerenciadores de interação foram adicionados como parâmetros ao 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(
        onNewsCardTapped: () -> Unit = {},
        thumbnail: Painter,
        headline: String,
        author: String,
        date: String,
        onMenuTapped: () -> Unit = {},
        modifier: Modifier = Modifier,
        view: View = View.HeroItem
    ) {
    ...
    

Integrar ao app

Agora, vamos adicionar alguns gerenciadores às nossas 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 e onMenuTapped. createOnTapped abre uma caixa de diálogo com os parâmetros dela 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),
                onMenuTapped = {},
                view = View.HeroItem
            )
            Spacer(modifier = Modifier.size(12.dp))
            ...
        }
    }
    
  3. Para cada postagem, adicione gerenciadores para onNewsCardTapped e onMenuTapped.

    @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),
                    onMenuTapped = {},
                    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 gerenciadores para onNewsCardTapped e onMenuTapped. Como a variante Audio tem um menu, também atribuímos 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.

    Botão "Run" na barra de ferramentas
    App de notícias em ação na visualização

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

Saiba mais sobre como trabalhar com esse plug-in na seção Fluxo de trabalho do Relay. Fique à vontade para nos enviar feedback.