Parâmetros de conteúdo

Introdução

Atualização do NewsCard com mais parâmetros

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

    O plug-in do Figma com o parâmetro "thumbnail" adicionado
  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.

    O plug-in do Figma com os parâmetros "headline", "author" e "date" adicionados
  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.

    O plug-in do Figma com todas as três camadas thumbnail selecionadas

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.

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

    Botão "Build" na barra de ferramentas
  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.
    A IU do app com três seções
    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 Botão &quot;Make Project&quot; para criar o projeto novamente e ver o resultado na visualização de tela dividida:

    Visualização do NewsApp

Próxima etapa

Em seguida, vamos adicionar algumas interações ao app.