Parâmetros de conteúdo

Introdução

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.

1. 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.

2. No plug-in Relay for Figma, clique em + e selecione image-content no menu suspenso. Em seguida, mude o nome para "thumbnail".

   

3. 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.

   

4. 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.

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

2. Clique em Compartilhar com o desenvolvedor.

3. 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

4. Clique em Salvar.

Atualizar componente no Android Studio

Vamos atualizar o componente NewsCard:

1. 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.

   

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

   

3. 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.

  

  Vamos integrar o componente NewsCard à tela inicial.

1. 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: import com.example.hellonews.newscard.NewsCard

   import com.example.hellonews.newscard.View

2. 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(...)
   ...
   

3. 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))
           ...
       }
   }
   

4. 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))
           }
       }
   }
   

5. 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(...)
   ...
   

6. 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))
           }
       }
   }
   

7. 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.