Workshop Jetpack Compose - Class 2

The presentation used for the compose workshop in DevHack.
Created by @facundomr

Transcript

1. JETPACK - COMPOSE Themes, Material Design & State
2. Facundo Rodríguez Arceri ➢ Organizador en Android Devs Buenos Aires y GDG Buenos Aires ➢ Android Developer en Ring (Amazon) ➢ Docente e instructor ➢ Experiencia con Android desde 2011 ➢ @facundomr
3. ¡Hoy programemos! ❖ Bienvenidos al día 2 del workshop. ❖ Vamos con manos a la obra. ❖ Repasemos algunos @Composables usados hasta ahora. ➢ Surface ➢ Scaffold ➢ TopAppBar ➢ Text ➢ IconButton ➢ Icon ➢ Column ➢ Divider ➢ Card ➢ Row ➢ Image ➢ ...
4. Otro repaso: Modifiers ❖ Se utilizan en casi todos los @Composables como forma de establecer una manera estándar de darles “estilo”. ❖ Por convención, debe ser el primer parámetro no-obligatorio de las @Composable, y tener por default el valor del object Modifier. ❖ El orden es importante: las llamadas encadenadas son aplicadas en el mismo orden en el que se llaman, y pueden modificar el resultado final.
5. ❖ Todo nuevo proyecto creado con Compose ya tiene un Theme. En nuestro caso SouthAmericanQualifiersTheme. ❖ Jetpack Compose implementa Material Design a través de MaterialTheme, el cual es una librería “extra” a las mínimas e indispensables para utilizar Compose. ❖ MaterialTheme es un @Composable, y recibe colores, tipografías y formas. ❖ ¿Cómo agregar colores? Con extension propertys a Colors ❖ Para utilizar y modificar las tipografías del proyecto lo haremos a través de las clases Typography y TextSyle. Nuevo tema: ¡Themes!
6. ❖ La anotación @Preview tiene algunos superpoderes… veamos su definición. ❖ name, group ❖ showBackground, backgroundColor ❖ widthDp, heightDp ❖ uiMode ❖ showDecoration, device @Preview
7. ❖ @Composables que vienen en el paquete androidx.compose.material.* ❖ Resulta muy interesante, por ejemplo Scaffold. ❖ De manera sencilla nos permite, por ejemplo, definir bottomBar, topBar, floatingActionButtons, drawers, etc. @Composables de Material Design
8. ❖ ¿Preguntas? ❖ ¿Dudas? ❖ ¿Algo que quieran profundizar de lo visto hasta acá? ¡Hagamos una pausa!
9. ❖ ¿De qué hablamos cuando hablamos del Estado de la aplicación? ❖ Flujo de datos unidireccional ➢ Simplifican la arquitectura. ➢ Top-down: Los @Composables reciben los objetos que renderizan. ➢ Bottom-up: Los eventos que ocurren en un @Composable son delegados a quien los invocó. ❖ Single source of truth. ❖ Estos patrones/soluciones atacan problemas complejos: facilidad para probar los componentes, encapsulamiento del estado, consistencia. ❖ ViewModels y LiveData: observeAsState Nuevo tema: ¡State!
10. Referencias ❖ https://developer.android.com/jetpack/compose/themes ❖ https://developer.android.com/jetpack/compose/state ❖ https://joebirch.co/android/exploring-jetpack-compose-preview-annotation/
11. https://www.facebook.com/escueladevhack/ Escuela de Hackers www.devhack.co https://github.com/escueladevhack