Introdução
![Atualização do NewsCard com mais parâmetros](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/content-parameters-advanced/update-with-more-parameters.png?authuser=19&hl=pt)
O conteúdo da maioria dos designs de IU não é estático, mudando de acordo com os dados. Nesta seção, adicionamos dados ao nosso design usando parâmetros de conteúdo, o que permite que os designers especifiquem qual parte de um precisa ser preenchida com dados.
Adicionar parâmetros no Figma
Vamos adicionar parâmetros de conteúdo ao nosso componente.
- Abra o Figma. No NewsCardTutorial, selecione a camada thumbnail image na hero-item variant: ⌘ + clique no Mac ou Ctrl + clique no Windows e no Linux na imagem.
No plug-in Relay for Figma, clique em + e selecione
image-content
no menu suspenso. Em seguida, mude o nome para "thumbnail".Selecione a camada headline text, clique em + e selecione
text-content
. Repita as mesmas etapas para as camadas de texto author e date na variante hero-item. Dê a eles os nomes de "headline", "author" e "date", respectivamente.Clique no parâmetro thumbnail no plug-in. Em todas as variantes do componente, a camada thumbnail é uma imagem e está selecionada.
Como as três camadas têm o mesmo nome ("thumbnail") e são do mesmo tipo de dados (image-content), o parâmetro de conteúdo foi conectado a elas em todas as três variantes. Isso significa que um parâmetro fornece os mesmos dados a diversas variantes. Isso também vale para os parâmetros headline, author e date.
Salvar versão nomeada
Agora, vamos marcar essa versão como pronta para ser importada para o código.
Abra o plug-in Figma Relay, se ainda não estiver aberto.
Clique em Compartilhar com o desenvolvedor.
Na tela Compartilhar com o desenvolvedor, digite um nome e uma descrição para a versão.
Exemplo de título: parâmetros adicionados
Exemplo de descrição: Parâmetros de conteúdo adicionados ao card
Clique em Salvar.
Atualizar componente no Android Studio
Vamos atualizar o componente NewsCard:
No Android Studio, confira se a janela de ferramentas do Project está na visualização Android. Em seguida, clique com o botão direito do mouse em
app/ui-packages/news_card/
e clique em Update UI Package.Clique em
para criar seu projeto. Isso vai pegar o pacote de IU atualizado e gerar uma versão atualizada do código de composição.
Veja em
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
que os parâmetros de conteúdo que adicionamos (thumbnail
,headline
,author
,date
) ficam na nossa lista de parâmetros do elemento combinável.// View to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * News card component intended to display news items for a list * * This composable was generated from the UI package 'news_card'. * Generated code; don't edit directly. */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "" ) { ...
Integrar no app
Vamos voltar ao app. A IU dele ainda não foi modificada. Ele contém uma lista de matérias comuns e notícias em áudio. Esses são os dois elementos combináveis necessários para adicionar o componente NewsCard a:
- o elemento combinável PostListArticleStories, que é responsável pelas notícias frequentes;
- o parâmetro postTop, que representa a matéria principal;
- o parâmetro posts, que representa o restante das matérias;
- o elemento PostListAudioStories, que processa as matérias em áudio.
Em
app/java/com/example/hellonews/ui/home/HomeScreen.kt
, adicione as seguintes importações ao lado das outras linhas de importação próximas à parte de cima do arquivo: importcom.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
Ainda em HomeScreen.kt, role para baixo até PostListArticleStories.
@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(...) ...
Em postTop, substitua o componente Text pelo NewsCard recém-importado usando a visualização HeroItem.
@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, view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
Em cada post, substitua o componente Text pelo NewsCard recém-importado usando a visualização ArticleItem.
@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, view = View.ArticleItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Podemos fazer o mesmo com as matérias em áudio na parte de baixo. Ainda no
HomeScreen.kt
, role para baixo até 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(...) ...
Em cada postagem, substitua o componente Text pelo NewsCard recém-importado usando a visualização AudioItem.
@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, view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Clique em
para criar o projeto novamente e ver o resultado na visualização de tela dividida:
Próxima etapa
Em seguida, vamos adicionar algumas interações ao app.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Adicionar gerenciadores de interação a designs
- Como processar variantes de design
- Converter designs em código no Android Studio