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.