JETPACK COMPOSE desde CERO: Listas | #3

Summary

Este tutorial de programación y desarrollo para Android y iOS, impartido por Moure Dead by Price Mobile, enseña a trabajar con Jetpack Compose, un framework para construir interfaces de usuario nativas de Android. Aprende a integrar componentes en una columna con scroll, creando interfaces más complejas y eficientes. Se abordan conceptos como la reutilización de componentes, la creación de elementos compositivos y el uso de 'LazyColumn' para renderizar elementos en pantalla de manera eficiente. El objetivo es mejorar la experiencia del usuario y la performance de la aplicación al trabajar con listados, como los que podrían provenir de una base de datos.

Takeaways

• 😊 En esta clase aprenderemos a trabajar con scrolls y listas en Android.
• 📱 Jetpack Compose es el framework actual para construir interfaces de usuario en apps Android nativas.
• 💡 La clase anterior es esencial para entender esta lección.
• 🔔 Suscribirse y activar la campanita en el canal de YouTube es la mejor manera de apoyar al creador.
• 🖥️ Modificar la preview del modo claro permite visualizar el componente en una pantalla real.
• 🔄 Replicar el componente 'my component' dentro de una columna puede causar que se salga de la pantalla si no se usa scroll.
• ⬆️ Añadir un scroll vertical a la columna permite desplazar y visualizar todos los componentes.
• 📝 Crear una clase de datos 'main message' para manejar el título y el cuerpo de los mensajes.
• 🔄 Usar 'lazy column' en lugar de 'column' para pintar listas y consumir menos memoria.
• ⚡ 'Lazy column' renderiza solo los elementos que se muestran en la pantalla, mejorando el rendimiento.

Q & A

¿Qué es el curso de 'Murder Continua' sobre el que habla Carmen en el video?

El curso de 'Murder Continua' es un tutorial sobre cómo trabajar con Jetpack Compose, una herramienta para construir interfaces de usuario de aplicaciones Android nativas.

¿Qué es Jetpack Compose y para qué se usa?

Jetpack Compose es un framework de Google que permite a los desarrolladores crear interfaces de usuario de Android de manera más eficiente y moderna, reemplazando las vistas tradicionales y el uso de XML.

¿Cuál es el propósito principal de las vistas reutilizables vistas vistas en el contexto de este tutorial?

Las vistas reutilizables son componentes que se pueden utilizar en diferentes partes de la aplicación, facilitando el manejo de textos, imágenes, colores y estilos, y permitiendo una mejor organización y mantenimiento del código.

¿Qué es un 'scroll' y cómo se implementa en Jetpack Compose?

Un 'scroll' es una función que permite desplazarse por contenido que excede los límites de la pantalla. En Jetpack Compose, se implementa utilizando el modificador 'Modifier.verticalScroll' y asociándolo con un estado de scroll.

¿Cómo se pueden simular diferentes pantallas en la vista previa de Jetpack Compose?

Se puede simular diferentes pantallas utilizando la propiedad 'theme' para cambiar entre el modo claro y oscuro, y ajustando el tamaño de la vista previa para adaptarse a diferentes resoluciones de pantalla.

¿Qué es un 'data class' y cómo se utiliza en el contexto de este tutorial?

Un 'data class' es una clase especial en Kotlin que se utiliza para representar objetos inmutables y es útil para pasar datos como parámetros. En el tutorial, se utiliza para crear un objeto 'MainMessage' que engloba un título y un cuerpo de texto.

¿Qué es 'LazyColumn' y cómo difiere de 'Column' en Jetpack Compose?

LazyColumn es un componente de Jetpack Compose que solo renderiza los elementos que están visibles en la pantalla, lo que mejora la eficiencia y el rendimiento al trabajar con listas largas. Por otro lado, 'Column' simplemente apila los elementos verticalmente sin esta optimización.

¿Cómo se pueden personalizar los componentes en Jetpack Compose para mostrar diferentes tipos de contenido?

Se pueden personalizar los componentes en Jetpack Compose pasando parámetros personalizados, como se hizo con 'MyText' que recibe un título y un cuerpo, permitiendo así mostrar diferentes tipos de contenido.

¿Qué es 'Items' y cómo se utiliza en 'LazyColumn' para iterar sobre una lista de elementos?

Items es una función de Jetpack Compose que se utiliza dentro de 'LazyColumn' para iterar sobre una lista de elementos. Se encarga de renderizar los componentes correspondientes a cada elemento de la lista solo cuando son visibles en la pantalla.

¿Qué se puede hacer para mejorar la interacción con las listas en Jetpack Compose?

Para mejorar la interacción con las listas, se pueden agregar gestos de interacción como clics o toques, lo que permite a los usuarios interactuar con los elementos de la lista y actualizar la interfaz de la aplicación de manera dinámica.

Outlines

00:00

📚 Introducción al uso de scrolls y listas en Jetpack Compose

El primer párrafo presenta una clase de programación sobre cómo trabajar con scrolls e interfaces de usuario en Jetpack Compose para Android. Se enfatiza la importancia de adaptar la aplicación más allá de la pantalla del dispositivo y se menciona la necesidad de integrar componentes que puedan ocupar más espacio. Se describe cómo utilizar el scroll vertical para desplazarse por componentes que se repiten en una columna y cómo esto permite visualizar todos los elementos en la pantalla. Además, se invita a los espectadores a seguir el canal y participar en las sesiones de programación en vivo en Twitch.

05:01

🛠️ Desarrollo de componentes reutilizables y manejo de listas

En el segundo párrafo, se continúa el tutorial enfocado en el desarrollo de interfaces de usuario para aplicaciones Android con Jetpack Compose. Se aborda cómo hacer que el componente 'MyComponent' sea más genérico para mostrar diferentes textos y cómo crear un 'data class' llamado 'MainMessage' para manejar los parámetros de título y cuerpo de texto. Se discute la idea de reutilizar componentes y cómo mostrar listados de mensajes utilizando 'LazyColumn' y 'items', lo que permite una representación eficiente de la interfaz y un uso óptimo de la memoria. Se enfatiza la importancia de trabajar con listas para mostrar elementos que están dentro de los márgenes de la pantalla y se sugiere cómo se podría interactuar con estas listas en futuras clases.

10:01

🎉 Conclusión y llamado a la acción para la comunidad

El tercer párrafo concluye el tutorial agradeciendo el apoyo de la comunidad y animando a los espectadores a suscribirse y activar notificaciones para seguir aprendiendo. Se menciona la presencia en redes sociales y la posibilidad de unirse al programa de miembros del canal en YouTube o de suscriptores en Twitch para colaborar más con la comunidad. Se cierra el video con un mensaje de despedida y se indica que se volverán a ver la siguiente semana.

Keywords

💡Android

Android es un sistema operativo basado en Linux, desarrollado por Google, utilizado principalmente en dispositivos móviles y tabletas. En el video, se refiere al desarrollo de aplicaciones para este sistema operativo, mostrando cómo se trabaja con herramientas como Android Studio para crear interfaces de usuario nativas.

💡Jetpack Compose

Jetpack Compose es un toolkit de UI declarativo para Android, que permite a los desarrolladores crear interfaces de usuario de manera más eficiente y con menos código. En el script, se menciona que se utiliza para construir interfaces de usuario de apps Android nativas, reemplazando viejas prácticas como el uso de XML.

💡Scroll

Scroll se refiere a la capacidad de desplazarse por contenido que excede los límites de la pantalla o componente. En el video, se discute cómo implementar scroll en una columna de componentes para que el usuario pueda ver todo el contenido, incluso aquel que no se muestra inicialmente en la pantalla.

💡LazyColumn

LazyColumn es un componente de Jetpack Compose que se utiliza para renderizar una lista de elementos de manera eficiente. En el script, se menciona para mostrar cómo se pueden dibujar elementos solo cuando están visibles en la pantalla, mejorando el rendimiento y la memoria de la aplicación.

💡Items

Items es una función en Jetpack Compose que se utiliza dentro de LazyColumn para iterar sobre una lista de elementos y renderizar cada uno de ellos en la pantalla. En el video, se utiliza para iterar sobre un listado de mensajes y mostrarlos de manera eficiente.

💡Mensajes

En el contexto del video, los mensajes son elementos de la interfaz de usuario que se representan en la aplicación. Se menciona la creación de un 'data class' llamado 'MainMessage' que agrupa los parámetros de un mensaje, como título y cuerpo, para su representación en la pantalla.

💡MyComponent

MyComponent parece ser un componente personalizado creado en el tutorial, que se utiliza para representar visualmente partes de la interfaz de usuario, como celdas con imágenes y texto. En el script, se trabaja en la adaptación y reutilización de este componente dentro de listados.

💡Estado del Scroll (Scroll State)

El estado del scroll se refiere a la información sobre la posición actual de desplazamiento en una lista o componente que soporta scroll. En el video, se menciona la creación de un 'remember' para el estado del scroll llamado 'scrollState', que es necesario para implementar el comportamiento de scroll vertical.

💡Modificadores (Modifiers)

Los modificadores en Jetpack Compose son funciones que se aplican a los componentes para cambiar su comportamiento o apariencia. En el script, se utiliza el modificador 'verticalScroll' para agregar la funcionalidad de scroll vertical a una columna.

💡Preview

Preview es una característica de Android Studio y Jetpack Compose que permite a los desarrolladores ver una representación visual de los componentes sin necesidad de ejecutar la aplicación completa. En el video, se utiliza para ver y ajustar la apariencia y el comportamiento de los componentes antes de su implementación final.

Highlights

Bienvenidos a la clase de programación móvil, donde aprenderán a trabajar con Jetpack Compose y listas.

Seguidores del canal pueden activar la campanita para recibir actualizaciones de nuevos tutoriales.

Se menciona el uso de un framework que reemplaza las vistas tradicionales en desarrollo de aplicaciones Android nativas.

Se destaca la importancia de entender la clase anterior para comprender los conceptos que se van a explicar.

Se aborda la integración de componentes en una columna para manejar contenido que excede los límites de la pantalla.

Se muestra cómo utilizar la propiedad 'soundSystemWhite' para simular la previsualización de una pantalla completa.

Se aprende a aplicar un scroll a una columna en Jetpack Compose para desplazar elementos que no caben en la pantalla.

Se introduce la creación de un nuevo elemento compuesto llamado 'mainMessage' para representar un listado de mensajes.

Se discute la parametrización del componente 'myText' para que sea más genérico y pueda recibir diferentes textos.

Se crea una 'data class' llamada 'mainMessage' para agrupar los parámetros de título y cuerpo de un mensaje.

Se utiliza 'LazyColumn' en lugar de 'Column' para renderizar de manera eficiente listados de elementos en pantalla.

Se menciona el uso de 'items' para iterar y dibujar cada elemento de una lista dentro de 'LazyColumn'.

Se resalta la ventaja de 'LazyColumn' al consumir menos memoria y proporcionar una navegación más fluida.

Se aprende a crear una constante que referencia un listado de mensajes para su uso en la aplicación.

Se muestra cómo se puede representar visualmente un listado de mensajes en la interfaz de usuario.

Se habla sobre la próxima clase, donde se aprenderá a interactuar con estas listas y responder a eventos de clic.

Se anima a los espectadores a suscribirse y a colaborar con la comunidad a través de las redes sociales y los programas de miembros.

Transcripts

hola carmen qué tal estáis bienvenidos a

murder continuamos con el curso del

compost en esta clase aprenderemos a

trabajar con scrolls iv con listas

básicamente con contenido que no tiene

por qué adaptarse únicamente a la

pantalla del dispositivo así que

continuemos dándole forma a nuestra app

android preparado pues comenzamos a

picar

bienvenidos a moure dead by price mobile

tutoriales de programación y desarrollo

de ios y android

esta es la tercera clase de nuestro

tutorial para aprender para campus desde

cero recuerda que lleva campos es la

manera más actual que tenemos de

construir las interfaces de usuario de

apps android nativas un framework que

viene a sustituir las vistas que antes

crea vamos con xml si te has perdido la

clase anterior te la dejo por aquí y

recuerda que es necesaria entenderla

bien para comprender todo lo que te voy

a explicar antes de comenzar recordarte

como siempre que si te gustan este tipo

de tutoriales la forma más fácil de

apoyarme es suscribiéndote al canal y

activando la campanita y también

recordándote que de lunes a viernes

realizó otras misiones en twitch

hablando sobre programación y tecnología

y por supuesto programando en directo a

nuestra app twitter y tampoco te olvides

de unirte al disco de la comunidad

nuestro servidor de chat donde ya somos

más de 3000 programadores y

programadores ahora sí volvamos a abrir

nuestro proyecto con android studio y

continuamos aprendiendo oye para con

pons si lo recuerdas en los tutoriales

anteriores estuvimos aprendiendo a

construir estas celdas simplemente

vistas reutilizables en las que hemos

aprendido a manejar textos imágenes

colores y estilos también disposiciones

de elementos y previsualizaciones en

modo claro y en modo oscuro como estás

viendo aquí lo que haremos en este

tutorial es integrar estos componentes

dentro de una de forma que ocupe más que

los límites de la misma y por lo tanto

tengamos que recurrir a scroll oa listas

por supuesto dos componentes más que

comunes a la hora de diseñar interfaces

de usuario cuando nosotros trabajamos

con previews lo que vemos es que el

contenido se adapta automáticamente al

tamaño del mismo al tamaño del

componente pero es posible que ya que

ramos siempre visualizando cómo queda en

una pantalla completa sin necesidad de

estar continuamente iniciando el

emulador como acabo de hacer yo ahora

mismo podemos simular también la

previsualización de una pantalla por

ejemplo vamos a modificar la preview del

modo claro llamando a su propiedad sound

sistem wine y pasándole un truco ya

vemos lo que ha pasado la

previsualización del componente ahora la

vemos enmarcada en una pantalla real voy

a reducir el zoom y aquí veremos

perfectamente cómo queda nuestro

componente la propiedad sound sistem

white sólo se la hemos creado en la

preview del modo claro por lo tanto el

modo oscuro lo seguimos viendo como

antes si recuerdas my component hacía

referencia a este elemento en un

elemento fila en el que habíamos pintado

una imagen y dos textos vayamos a la

preview y hagamos lo siguiente vamos a

crear una columna ya sabes que una

columna coloca uno encima de otro y

vamos a replicar muchas veces el

elemento my componente y refrescar la

preview al visto lo que pasa el elemento

my component empieza a repetirse una

serie de veces llegando hasta el final

de la pantalla voy a repetir la alguna

vez más para que estemos seguro del

efecto que te quiero mostrar lo que te

quiero enseñar es que aunque sigamos

repitiendo parece que se salen de la

pantalla y si iniciamos de forma

interactiva esta preview veremos el

siguiente como en nuestro emulador

parece que aunque intentemos hacer

scroll no pasa nada la última fila se ha

intentado adaptar al tamaño de la

pantalla pero no podemos desplazarla por

lo tanto nos está visualizando en este

dispositivo todos los componentes que

hemos pintado como lo podríamos

solucionar pues simplemente aplicando un

scroll a la columna así nos podríamos

desplazar por la pantalla y ver la

totalidad de componentes como añadimos

un scroll a un componente en jetpack

compose es muy fácil con algo que vimos

en la clase anterior con los llamados

modificadores diremos que queremos

añadir un modificador de tipo mody fire

como siempre y en concreto vertical

scroll el modificador vertical scroll

puede recibir diferentes parámetros

siendo obligatorio el que hace

referencia a su estado así que vamos a

crear una constante con la palabra aval

llamada scroll state y que sea igual a

remember es grande state que hace

referencia a una función perteneciente a

ye para campos que ya nos proporciona el

sistema una implementación por defecto

del estado del scroll necesaria para

nosotros implementar cualquier scroll

vertical iniciamos de nuevo la preview

volveremos a ver el emulador pero ahora

si hacemos clic en la pantalla y nos

desplazamos vemos que existe un scroll

que ya nos permite ver todas las filas

que habíamos pintado dentro de la

columna así nos aseguramos que todos los

componentes se van a visualizar y que

ninguno queda oculto fuera de los

márgenes de la pantalla entendido el

concepto de scroll y como repetimos

estos elementos pasemos al siguiente

concepto el que de verdad nos va a

resultar útil para el tipo de elemento

que estamos dibujando ya que básicamente

lo que estamos pintando aquí es una

lista en el que sólo estábamos

representando a by componente dentro de

la premium y creemos un nuevo elemento

compositivo un elemento que va a hacer

referencia a un supuesto listado de

mensajes así que vamos a crear una

función que se llame en maine celtics

una función que deberá ser con possible

para pintarse como elemento gráfico y

que dentro va a llamar alma y compañía

si ahora tanto en nuestro on kate como

en la preview llamamos a nuestro nuevo

elemento y recarga la preview veremos

que en realidad no ha cambiado nada ya

que simplemente es un nuevo elemento que

en global que ya teníamos pero que en

realidad no implementa una funcionalidad

extra vamos a hacer diferentes

modificaciones sobre nuestro código el

texto que ahora mismo teníamos escrito

dentro de estos elementos vamos a hacer

que llegue como parámetro para que el

componente my text sea aún más genérico

y podamos indicarle por fuera cuál es el

texto que queremos mostrar tanto en el

título como en el detalle así que a la

función my text le van a llegar los

parámetros por ejemplo un título de tipo

string y otro parámetro que vamos a

llamar body también de tipo string y

estos son los elementos que vamos a

pintar en my text en este momento

aparece un error porque cuando llamamos

a my text necesita este título y este

body así que deberían llegarle estos dos

parámetros también hay componentes estos

dos parámetros representan un mensaje

así que por qué no creamos un objeto que

engloba a estos dos parámetros podríamos

crear un data class que se llame main

message y que tenga dentro los dos

parámetros que le pasábamos a my text

con este data class esta función podría

quedar de una forma más elegante le

llegaría a un mensaje de tipo main

message y ya no podríamos acceder

directamente a título a body tendríamos

que acceder a nuestro mensaje

edad title y de nuevo a nuestro mensaje

y a su propiedad body así ya únicamente

le pasamos un parámetro el error que

teníamos en my text si no desaparece ya

que sigue necesitando que le llegue una

propiedad de tipo main st así que vamos

a modificar my component para poder

enviarle también un mensaje ahora ya sí

lo podemos enviar a my texto corregido

esto tenemos nuevo error y es que my

component también necesita que le llegue

un mensaje como he repetido varias veces

a lo largo de estas clases ya para

compose se basa en la composición en la

recomposición y en la reutilización de

componentes nuestro componente main

mesallés no se va a encargar de pintar

únicamente un componente sino de pintar

un listado de ellos algo parecido a lo

que vimos al principio de esta clase

como repetíamos dentro de una columna

varias veces my componente así que lo

que queremos es que ama y me seguís no

le llegue un único mensaje sino que le

llegue una lista de mensajes un

parámetro que vamos a llamar mes y links

y que en vez de ser de tipo main message

va a ser una lista una lista es

simplemente una colección que tenemos

dentro de coaching que va a contener

mensajes como hacíamos al principio de

la clase para repetir varias veces un

mismo componente y pintarlo en pantalla

los añadimos todos dentro de una columna

cómo funciona la columna en hierba

compost una columna siempre va a pintar

todos los elementos que tengamos dentro

pero quizás esto una lista no tiene

sentido ya que si hacemos referencia a

las listas podemos estar dibujando en

pantalla elementos que no tienen por qué

verse ya que pueden quedar fuera de los

márgenes de la misma para eso en vez del

elemento de hierba compost collum

deberemos utilizar el elemento lights

incólume place y colom se va a encargar

únicamente de dibujar y de renderizar

elementos que de verdad sí que se están

mostrando dentro de la pantalla los que

quedan fuera no se pintarán de esta

forma nuestra app estará consumiendo

menos memoria y nos desplazaremos por la

interfaz de forma más fluida ya que sólo

en el momento de visualizarse en los

márgenes de la pantalla se va a pintar

el componente muy bien ya vemos álex

txikón y dentro de este lazy con un

tendremos que pintar cada uno de los

mensajes para ello podremos sincerarnos

utilizando items y pasándole en la lista

de mensajes recuerde importar leis ítems

para poder trabajar con este elemento

dentro de lacy colom tendremos la opción

de trabajar con esta operación ítem se

va a ejecutar una vez por cada elemento

de la lista y de forma inteligente sólo

cuando estos elementos se van a acabar

viendo la pantalla dentro de nuestra

columna dentro d la lista con scroll así

que llamemos dentro de esta operación a

my component pasando el mensaje que nos

está retornando items en cada momento

sin necesidad de que nosotros

controlemos que se está viendo o que no

hecho esto solo tendremos un último

error y es que el contenido principal de

nuestra aplicación main message necesita

que le llegue un listado de mensajes

pues simplemente creemos una constante

que haga referencia a un listado de

mensajes para ello creamos una constante

privada que se llame mensajes de tipo

list que contiene my message y con listo

vamos a ir añadiendo diferentes

elementos diferentes elementos de tipo

main message que ya sabes que tenían que

incluir un título y un cuerpo vamos a

cerrar la preview y voy a crear un

listado de mensajes básicamente voy a

repetir el mismo texto que teníamos

inicialmente que era la hierba compose y

voy a añadirle un número al final para

representar que de verdad es un texto

diferente como estás viendo por aquí

ahora ya podríamos pasar en la constante

en meses jaime sets tanto en el long

create de la pantalla como en la preview

ya que estamos representando lo mismo si

refrescamos la preview veremos lo

siguiente como tenemos algo muy parecido

a lo que veíamos cuando repetimos el

mismo elemento dentro de una columna

pero por supuesto con una implementación

más ya que si estamos haciendo

referencia al mismo elemento lo lógico

es emplear un lazy cold haciendo uso de

su operación items si iniciamos la

preview veremos como nuestra app

volvemos a tener scroll un scroll

inteligente que solo está pintando estos

elementos y que en el momento que nos

desplazamos se encarga de pintar los

nuevos elementos y de eliminar los que

ya no aparecen en pantalla de esta forma

ya podremos trabajar con interfaces más

complejas y podremos hacer uso de un

elemento tan común como son los listados

y los scripts imagina que desde base de

datos recuperamos un listado de usuarios

y con nuestro componente reutilizable

seríamos capaces de enviarle ese listado

y que se pintara de forma inteligente en

la próxima clase vamos a aprender a

interactuar con estas listas como

podremos hacer clic en cada una de las

celdas interpretar ese clic y repintar

nuestra interfaz de una forma diferente

si de verdad te ha gustado este tutorial

ya sabes darle al botón de suscribir y

activar la campanita que lleva unos

segundos si a mí me ayudas enormemente

recuerda que también puedes seguirme en

mis redes sociales como arroba moure dev

en twitter en instagram y sobre todo en

tweets y si aún quieres colaborar más

con la comunidad puedes unirte al

programa de miembros del canal en

youtube o de suscriptores en twitch

muchísimas gracias por el apoyo mostrado

la semana nos vemos en el vídeo del

próximo domingo hasta otra carmen

[Música]

[Música]