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.
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.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.
Se você selecionar o gerenciador on Menu tapped, você perceberá que ele se aplica apenas à variante audio-item, porque as outras variantes não têm um ícone de menu. No entanto, on NewsCard tapped se aplica às três variantes. Isso significa que você pode fornecer um gerenciador (em código) para ser executado quando qualquer uma das três variantes for tocada, removendo a duplicação de código e parâmetros. Veremos em mais detalhes como isso funciona na seção Atualizar componente no Android Studio.
Salvar versão nomeada
Agora, vamos marcar essa versão como pronta para ser importada para o código.
Abra o plug-in do Figma Relay, se ainda não estiver aberto.
Clique em Compartilhar com o desenvolvedor no canto inferior direito da caixa de diálogo.
Na tela Compartilhar com a tela do desenvolvedor, insira um nome e uma descrição para a versão.
Exemplo de título: Interações adicionadas
Exemplo de descrição: dois gerenciadores de interação foram adicionados aos cards
Clique em Salvar.
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:
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.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.
Observe
app/java/com/example/hellonews/newscard/NewsCard.kt
e observe 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( 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 nossas interações.
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(...) ...
Para
postTop
, adicione gerenciadores paraonNewsCardTapped
.createOnTapped
abre uma caixa de diálogo com os 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)) ... } }
Para cada postagem, adicione gerenciadores 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)) } } }
Ainda no
HomeScreen.kt
, role para baixo até oPostListAudioStories
, 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(...) ...
Para cada postagem, adicione gerenciadores para
onNewsCardTapped
. Como a variante de áudio tem um menu, atribuacreateOnTapped
aonMenuTapped
.@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)) } } }
Clique em ▶ para criar e executar o app no emulador.
Oba! Você aprendeu os recursos avançados do Relay.
Saiba mais sobre como trabalhar com o Relay na seção Fluxo de trabalho do Relay. Também queremos saber se você tem algum feedback.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Parâmetros de conteúdo
- Como processar variantes de design