La función Checkbox
Similar al conmutador, tenemos la clásica casilla de verificación es un componente muy usado en muchos escenarios. Podemos usar la función componible Checkbox, que nos proveerá la opción de alternar entre dos estados, marcado y no marcado. Para usarlo, deberemos indicar el estado inicial, además de la función que responderá al evento de cambiar de estado.
Checkbox(
checked = true,
onCheckedChange = { /*TODO*/ }
)
La lista de atributos de Checkbox es la que sigue:
La función Switch
La función componible Switch nos proveerá la opción de alternar entre dos estados, encendio y apagado. Para usarlo, deberemos indicar el estado inicial, además de la función que responderá al evento de cambiar de estado.
Switch(
checked = true,
onCheckedChange = { /*TODO*/ }
)
La lista de atributos de Switch es la que sigue:
El texto es una pieza fundamental en cualquier interfaz de usuario, y Compose nos facilita su visualización o escritura. Hoy nos vamos a centrar en la visualización. El componente más básico para ello es BasicText, pero para seguir los principios Material Design, Compose nos proporciona la clase Text y es recomendable su uso.
La función Text
La función componible Text nos provee la funcionalidad de mostrar texto en la pantalla. Este es su constructor principal.
@Composable
fun Text(
text: String,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
Bienvenidos a Compose Series Android
Vamos a comenzar con esta serie de publicaciones para conocer, jugar y experimentar con Jetpack Compose, conocer las posibilidades que nos aporta en el desarrollo Android y cómo integrarlo en nuestras aplicaciones. Empezaremos como no con un Hola Mundo
¿Qué es Jetpack Compose?
Si aún no lo conocéis, Jetpack Compose es el nuevo framework de programación de interfaces de usuario recientemente anunciado por Google para el futuro del desarrollo de aplicaciones nativas Android. Este framework aprovecha todo el potencial del lenguaje Kotlin para cambiar el estándar de programación de interfaces de usuario proporcionando formas de trabajo más modernas, escalables, intuitivas y potentes:
Menos código: Sustituye los archivos de diseño por funciones compositivas que describen la interfaz de usuario y sus componentes.
Intuitivo: Compose sigue los principios de programación declarativa. El objetivo es describir la interfaz de usuario y que a medida que cambie el estado de la aplicación automáticamente actualizarla.
Desarrollo acelerado: Es compatible con el código existente, por lo que es posible adoptarlo en cualquier proyecto. Itera rápidamente con vistas previas en vivo sin tener que compilar el código fuente.
Potencia: Sigue las líneas de diseño de Material Design, soporte a tema oscuro, animaciones, etc.
1. Introducción
En la actualidad nos encontramos con proyectos más complejos que requieren equipos de trabajo más numerosos y heterogéneos, por lo que cada vez ocupa mayor importancia optimizar el proceso de revisiones de código para asegurar con la mayor certeza posible que nuestro código cumple con los estándares de cálidad adecuados, además de cubrir con la necesidad funcional que intenta solventar.
Dada esta naturaleza, el trabajo diario nos depara un número mayor de MRs diarios, y dada la magnitud de las funcionalidades que implementamos, estos MRs son cada vez más complejos.
Con estas pautas que pasamos a enumerar nuestra intención es optimizar este proceso para hacer el día a día más sencillo tanto a los desarrolladores como a los revisores garantizando que nuestro trabajo sea de la mayor calidad posible con dos claros objetivos: reducir la complejidad de cada merge request y mejorar el procedimiento de revisión.
2. Complejidad de un MR
¿Cómo definimos la complejidad de un MR?
Flujo completo del sistema
Solución de sincronización y feedback
Flujo de trabajo entre aplicación de escritorio (SO Windows o Linux) con CouchDB y aplicación móvil (Android) con PouchDB a través de transferecia manual de archivos.
Aplicación de Escritorio genera archivo cifrado PouchDB y mediante transferencia lo ubica en una ruta concreta del directorio de carpetas público del dispositivo Android.
Desde la aplicación móvil, iniciamos el proceso de sincronización de la PouchDB que consiste en:
Mueve el archido desde la ruta del directorio público al privado de la aplicación
El indicador de progreso
Un indicador de progreso nos permite mostrar un estado de carga, avance o progresión de alguna funcionalidad de nuestra aplicación al usuario. Para ello, en los componentes XML de Android teníamos los ProgressBar y dependiendo del estilo a aplicar podíamos tener los circulares o los lineáles. Composesin embargo nos ofrece funciones componentes individuales para cada caso.
La función CircularProgressIndicator
Para mostrar un progreso circular indeterminado, basta con llamar a la función CircularProgressIndicator tal que así:
@Composable
fun BasicCircularProgressExample(){
CircularProgressIndicator()
}
La función Slider
El componente Slider permite al usuario elegir un valor entre una lista predefinida usando el indicador desplazable. Para crear este componente, simplemente llamamos a la función indicando el valor máximo y la función que responderá al cambiar de valor el indicador:
@Composable
fun BasicSlider() {
Slider(value = 3F, onValueChange = {/*TODO*/ })
}
La lista completa de parámetros y su función son los siguientes:
CSA01: Hello @Compose
CSA02: Escríbeme algo con Text
CSA03: Pulsa que te pulsa con Button
CSA04: No nos olvidamos de los FloatingActionButton
CSA0X: Divider y vencerás
CSA0X: Cambia de opinión con Switch
CSA0X: O hazlo con Checkbox
CSA0X: Y si no te has decidido todvía, TriStateCheckbox
CSA0X: Para elegir opciones tenemos los RadioButton
CSA0X: Desliza y elige con Slider
La función TriStateCheckbox
La casilla de verificación con tres estados quiere solucionar el concepto de indiferencia o no determinación de la desición del usuario, por lo que a diferencia del verificador clásico, tenemos tres estados diferentes:
activado: la casilla de verificación está marcada como seleccionada
desactivado: la casilla de verificación está desmarcada
indeterminado: representa el estado de no verificación
Podemos usar la función componible TriStateCheckbox, que nos proveerá la opción de alternar entre estos tres. Para usarlo, deberemos indicar el estado inicial (indeterminado, activo o inactivo), además de la función que responderá al evento de cambiar de estado.
@Composable
La función RadioButton
El botón de opción es un clásico que permite a los usuarios seleccionar de un grupo de opciones requiriendo al menos seleccionar una de dichas opciones. Hablamos de una multiselección si es posible seleccionar más de una de ellas. Para crear un RadioButton simplemente necesitamos indicar su estado (seleccionado o no) y gestionar el evento de pulsación:
RadioButton(
selected = true,
onClick = { /*TODO*/ })
El resto de parámetros configurables en esta función son los siguientes:
La función Divider
Es bastante habitual en los diseños Material la inclusión de líneas que hacen de separadores de secciones de la vista. Para realizar esto en Compose, tenemos la función Divider.
@Composable
fun Divider(
modifier: Modifier = Modifier,
color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
thickness: Dp = 1.dp,
startIndent: Dp = 0.dp
)
La función FloatingActionButton
Un FAB es un componente importante desde hace unos años en las aplicaciones, debido a que es usado habitualmente para mostrar acciones principales que pueden ser llevadas a cabo en la pantalla. Compose nos permite crear de manera más flexible los FABs con respecto a los diseños XML.
@Composable
fun FloatingActionButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
backgroundColor: Color = MaterialTheme.colors.secondary,
La función componible Button es un componente con el que interactuar que nos permite lanzar una acción a través del evento de pulsación.
El botón básico
Esta función crea el botón estandar de Material Design.
@Composable
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
Hablamos sobre nomenclatura y distribución de recursos (colores, strings)
Colores
Francisco Javier Ruiz hace propuesta
Los otros compañeros pensaban los mismo
El resto aceptan como bueno esto
Presentación por parte de Javi Rodríguez de lo que vamos a trabajar en las próximas sesiones sobre programación funcional con Kotlin a raíz del curso de de Kotlin Funcional
Carlos expone de manera resumida los conceptos funcionales.
Phantom Types
Búsqueda de la inmutabilidad
Trabajar sobre el primer punto del curso para dar ejemplos y explicación durante el siguiente Foro.
Lanzar listado de compañeros que quieran preparar un ejemplo para explicar cada concepto.