Introducción
![Cómo actualizar NewsCard con más parámetros](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/content-parameters-advanced/update-with-more-parameters.png?authuser=19&hl=es)
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.
- 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).
En el complemento Relay for Figma, haz clic en +, selecciona
image-content
en el menú desplegable y, luego, cambia el nombre a "thumbnail".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.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.
Abre el complemento Figma Relay, si aún no está abierto.
Haz clic en Compartir con el desarrollador.
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.
Haz clic en Guardar.
Cómo actualizar el componente en Android Studio
Actualicemos el componente NewsCard:
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.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.
Si observas
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
, verás que los parámetros de contenido que agregamos (thumbnail
,headline
,author
ydate
) 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.
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: importcom.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
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(...) ...
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)) ... } }
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)) } } }
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(...) ...
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)) } } }
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.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Cómo agregar controladores de interacción a los diseños
- Cómo manejar variantes de diseño
- Convierte los diseños a código en Android Studio