Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Workshop Jetpack Compose - Class 2

Workshop Jetpack Compose - Class 2

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

2a31aa30e3f9eeb22493a01a52833883?s=128

Juan Guillermo Gómez Torres

November 27, 2020
Tweet

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