Parámetros de contenido

Introducción

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

   

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.

   

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.

   

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 el nombre y la descripción de 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.

   

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

   

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.

  

  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. 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 para volver a compilar tu proyecto y ver el resultado en la vista previa (vista de pantalla dividida):

   

Paso siguiente

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