JETPACK COMPOSE desde CERO: Listas | #3
Summary
TLDREste 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
📚 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.
🛠️ 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.
🎉 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.
Mindmap
Keywords
💡Android
💡Jetpack Compose
💡Scroll
💡LazyColumn
💡Items
💡Mensajes
💡MyComponent
💡Estado del Scroll (Scroll State)
💡Modificadores (Modifiers)
💡Preview
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]
Посмотреть больше похожих видео
JETPACK COMPOSE desde CERO: Modificadores | #2
Curso de Android con Java: Control RecycleView
Curso de Android con Java: TableLayout
Curso de Android con Java: Control Spinner con una lista de String
Curso de Android con Java: LinearLayout verticales y horizontales
✅ ANDROID STUDIO APLICACIÓN CALCULADORA DESDE CERO BIEN EXPLICADO 📱
5.0 / 5 (0 votes)