Parámetros de contenido

Introducción

Cómo actualizar NewsCard con más parámetros

El contenido de la mayoría de los diseños de la IU no es estático, sino que cambia según los datos. En esta sección, agregamos datos a nuestro diseño a través de parámetros de contenido, lo que permite a los diseñadores especificar qué parte de un diseño se debe completar con datos.

Cómo agregar parámetros en Figma

Agreguemos parámetros de contenido a nuestro componente.

  1. Cambia a Figma. En NewsCardTutorial, selecciona la capa de thumbnail image en la variante hero-item (⌘ + clic en Mac o Ctrl + clic en Windows y Linux en la imagen).

  2. En el complemento Relay for Figma, haz clic en +, selecciona image-content en el menú desplegable y, luego, cambia el nombre a "thumbnail".

    El complemento de Figma con el parámetro "thumbnail" agregado

  3. Selecciona la capa headline text, haz clic en el signo + y selecciona text-content. Repite los mismos pasos para las capas de texto author y date en la variante hero-item. Nómbralas “headline”, “author” y “date” respectivamente.

    El complemento de Figma con los parámetros "headline", "author" y "date" agregados

  4. Haz clic en el parámetro de miniatura en el complemento. Observa que, en cada variante del componente, la capa de miniatura es una imagen y se selecciona.

    Debido a que las tres capas tienen el mismo nombre ("thumbnail") y tienen el mismo tipo de datos (image-content), se conectó el parámetro de contenido en las tres variantes. Esto significa que un parámetro proporciona los mismos datos a múltiples variantes. Esto también se aplica a los parámetros headline, author y date.

    El complemento de Figma con las tres capas de miniaturas seleccionadas

Cómo guardar una versión con nombre

Ahora, marquemos esta versión como lista para importarla al código.

  1. Abre el complemento Figma Relay, si aún no está abierto.

  2. Haz clic en Compartir con el desarrollador.

  3. En la pantalla Compartir con el desarrollador, ingresa un nombre y una descripción para la versión.

    Título de ejemplo: Parámetros agregados

    Descripción de ejemplo: Se agregaron parámetros de contenido a la tarjeta.

  4. Haz clic en Guardar.

Cómo actualizar el componente en Android Studio

Actualicemos el componente NewsCard:

  1. En Android Studio, asegúrate de que la ventana de herramientas Project esté en la vista de Android. Luego, haz clic con el botón derecho en app/ui-packages/news_card/ y selecciona Update UI Package.

    Opción Update UI Package en el menú contextual

  2. Haz clic en Botón Make Project para compilar tu proyecto. Se tomará el paquete de IU actualizado y se generará una versión actualizada del código componible.

    Botón Build en la barra de herramientas

  3. Si observas app/java (generated)/com/example/hellonews/newscard/NewsCard.kt, verás que los parámetros de contenido que agregamos (thumbnail, headline, author y date) aparecen en la lista de parámetros del elemento componible.

    // 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 = ""
) {
...

Cómo integrarlo a la app

Veamos nuestra app, cuya IU todavía no modificamos. Contiene una lista de noticias habituales y una lista de noticias de audio. Estos son los dos elementos componibles que necesitamos para agregar nuestro componente NewsCard a lo siguiente:

  • El elemento componible PostListArticleStories es responsable de las noticias normales.
  • El parámetro postTop representa la noticia principal.
  • El parámetro posts representa el resto de las noticias.
  • El elemento componible PostListAudioStories procesa las noticias en audio.
    La IU de la app con tres secciones
    Ahora, integremos el componente NewsCard a la pantalla principal.

  1. En app/java/com/example/hellonews/ui/home/HomeScreen.kt, agrega las siguientes importaciones junto a las otras líneas de importación cerca de la parte superior del archivo: import com.example.hellonews.newscard.NewsCard

    import com.example.hellonews.newscard.View

  2. Aún en HomeScreen.kt, desplázate hacia abajo hasta 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. Para postTop, reemplaza el componente Text con la NewsCard recién importada, mediante la vista 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. Para cada post, reemplaza el componente Text con la NewsCard recién importada, mediante la vista 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 hacer lo mismo con las noticias de audio en la parte inferior. Aún en HomeScreen.kt, desplázate hacia abajo hasta PostListAudioStories, cerca de la línea 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. Para cada post, reemplaza el componente Text con la NewsCard recién importada, mediante la vista 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. Haz clic en Botón Make Project para volver a compilar tu proyecto y ver el resultado en la vista previa (vista de pantalla dividida):

    Vista previa de NewsApp

Paso siguiente

A continuación, agregaremos algunas interacciones a nuestra app.