93. 1. Jetpack Compose¶

Algunas características:
Características:
* Programación Declarativa: Jetpack Compose utiliza el paradigma de programación declarativa. En lugar de describir los pasos para alcanzar un cierto estado en la UI (como se hace en la programación imperativa), simplemente describes cómo debería ser la UI en términos del estado actual de la aplicación. De esta forma, el framework se encarga de actualizar la UI cuando cambia el estado de la aplicación
* Funciones Composables: Las funciones "composables" son el bloque de construcción básico en Jetpack Compose. Estas funciones, marcadas con el modificador @Composable, pueden invocar a otras funciones composables para crear y componer una interfaz de usuario. Cuando el estado de los datos cambia, estas funciones se vuelven a ejecutar para reflejar los cambios en la UI.
* State: Jetpack Compose proporciona un sistema de manejo de estados para poder reaccionar a los cambios en el estado de la aplicación. Cuando un valor de estado cambia, el sistema de Compose "recompone" o vuelve a ejecutar todas las funciones que dependen de ese estado, actualizando la UI para reflejar los cambios.
* Modificadores: Los modificadores en Compose son funciones que configuran o ajustan la apariencia y el comportamiento de los elementos de la UI. Permiten añadir estilo, clics, scrolling, padding, etc.
* Interoperabilidad: Jetpack Compose puede coexistir con el sistema de UI de Android existente, lo que permite a los desarrolladores adoptarlo gradualmente en sus aplicaciones existentes sin tener que reescribir todo desde cero.

Otra:
* Se regeneran las pantallas solamente en los componentes que cambian. * Widgets sin estados

Las UI se declaran en funciones con anotación @Composable:

@Composable
fun Greeting(name: String){
        Text("Hola")
}

Aspectos de las funciones Compose:
* La función lleva la notación @Composable * La función C puede aceptar parámtros * La función es idempotente, y no tiene efectos secundarios * Se comporta igual cuando se llama varias veces * Sin efectos secundarios: No cambia variables globales, propiedades, etc.

93.1 1.1. Arquitectura¶

Los elementos de la IU son jerárquicos: se contienen unos a otros formando un árbol

[todo] Seguir aquí: https://developer.android.com/jetpack/compose/mental-model?hl=es-419

93.1.1 1.1.1. Recomposición¶

93.2 1.2. Navegación¶

https://developer.android.com/jetpack/compose/navigation?hl=es-419

el video: https://youtu.be/nwdc1ct06TI

93.3 1.3. Material Design¶

Compose incluye implementaciones de Material Design, listos para usar. Material Design se basa en tres pilares: * Color * Typography * Shape

En el siguiente ejemplo se cambia el estilo del título y el borde de la imagen usando Material Design:

// ...
import androidx.compose.foundation.border
import androidx.compose.material.MaterialTheme

@Composable
fun MessageCard(msg: Message) {
   Row(modifier = Modifier.padding(all = 8.dp)) {
       Image(
           painter = painterResource(R.drawable.profile_picture),
           contentDescription = null,
           modifier = Modifier
               .size(40.dp)
               .clip(CircleShape)
               .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
       )

       Spacer(modifier = Modifier.width(8.dp))

       Column {
           Text(
               text = msg.author,
               color = MaterialTheme.colors.secondaryVariant
           )

           Spacer(modifier = Modifier.height(4.dp))
           Text(text = msg.body)
       }
   }
}

93.4 1.4. Modificadores (para los componentes)¶

Permiten establecer cualquier propiedad de los componentes.
Además permite hacer "pulsable" cualquier componente.
Usamos la clase estática Modifier
Podemos encadenar métodos de Modifier:

Qué podemos modificar:

93.4.1 1.4.1. Pading¶

Espacios entre el comopente y el borde

93.5 1.5. Personalizar componentes ("customize")¶

93.5.1 1.5.1. TextStyle¶

Para cualquier componente de texto.: * Color * fontWeight * fontSize * ...

Y estilos de Material Design, Ejemplo:

Text(text="hola",
    style= MaterialTheme.typography.button
)

94. 2. Componentes.¶

Seguir en este documento local

94.1 2.1. Reutilizar Componentes¶

Utilizamos funciones Composable con o sin parámetros e incluirlas en Surface o cualquier contenedor

94.2 2.2. Estados (State)¶

En la recomposición se repinta la pantalla de los componentes con configuración de "state".
State es un componente Composable. Diagrama como se actualiza los estados.

State (los datos) desacoplados de la vista.

ver https://openwebinars.net/academia/aprende/crear-interfaz-usuario-jetpack-compose/13442/

94.2.1 2.2.1. Patrón State Hoisting¶

Se mueven todos los estados de los componentes hijos a los padres. Sólo el patrón padre maneja los estados.

Para conseguir esto sustituimos los estados en los hijos por dos parámetros en cada función hija: 1. value: T Valor para mostrar. 2. onValueschande: (T) -> Unit : lambda, evento que dispara la modificación del estado.

Ejemplo: Esta primera función es el componente padre. Gestiona el estado studenState y recibe en la función lambda final con que se llama a StudentList ()

@Composable  
fun MainScreen() {  
    val studentsState = remember { mutableStateListOf("Esther", "Jaime") }  
    Surface(  
        color = Color.LightGray,  
        modifier = Modifier.fillMaxSize()  
    ) {  
        StudentList(studentsState) {  
            studentsState.add("Miguel")  
        }  
 }}

@Composable  
fun StudentList(students: List<String>, onButtonClick: () -> Unit) {  
    Column(  
        modifier = Modifier.fillMaxSize(),  
        horizontalAlignment = Alignment.CenterHorizontally  
    ) {  
        for (student in students) {  
            StudentText(name = student)  
        }  
        Button(  
            onClick = onButtonClick,  
        ) {  
            Text(text = "Add new student")  
        }
    }
}

94.3 Apendice¶

Enlaces

Videos: * Android Kotlin desde cero parte I. * Lista de ejemplos de proyectos en github con compose * Multiples ejemplos composeacademy

ver 0.8 3-11-23