Conceptos básicos de Jetpack Compose: parte 2. Jetpack Compose es un moderno conjunto de herramientas de interfaz de usuario… | de Alankrita Shah | octubre 2022

Componer jet pack es un conjunto de herramientas de interfaz de usuario moderno que tiene como objetivo simplificar el desarrollo de la interfaz de usuario en Android.Foto de Elena Mozhvilo en UnsplashEsta es la segunda parte de una serie de 2 partes sobre Jetpack Compose Basics.

1. Conceptos básicos de Jetpack Compose – Parte 1
2. Conceptos básicos de Jetpack Compose – Parte 2 (Ejemplos de código de diseño)

En la primera parte tratamos de responder algunas preguntas que plantea Compose. Hemos entendido la funcionalidad básica en Compose y las reglas y anotaciones utilizadas para ello. En este blog, intentaremos usarlos y diseñar una interfaz de usuario simple con Jetpack Compose. Vamos a referirnos a los temas utilizados en el Curso para desarrolladores de Google sobre Redactar Unidad 1 – Vía 3 e intentar construirlos.En el primer diseño, dibujaremos una tarjeta de felicitación de cumpleaños como la de arriba. Para las cadenas «message» y «from», usamos Text Composable. Vamos a crear una función componible SaludoDeCumpleañosConTexto() y pase dos parámetros, uno para el «mensaje» y otro para el texto «de». Para alinearlo en una matriz vertical usamos la función Columna. Para especificar el tamaño del texto del texto, Text Composable toma un parámetro: fontSize. Podemos especificar el tamaño del texto con la extensión sp disponible en la clase TextUnit. También podemos establecer el color del texto especificándolo en el parámetro de color en Text Composable. También hay un parámetro modificador que podemos usar para especificar la alineación, el relleno, el ancho, la altura, etc. Para agregar color de fondo, podemos poner esta columna en una superficie y darle color, intentemos eso.¿Cómo vemos esto en la vista previa?Para obtener una vista previa de esto, necesitamos crear una función componible con la anotación @Preview para poder ver la interfaz de usuario en la pestaña Diseño. Cree y actualice y verá algo como esto en la vista previa del tema. Se trata de una superficie de color magenta con dos textos componibles dispuestos verticalmente, alineados en el medio horizontalmente en color blanco y unos rellenos con algún tamaño de letra.Para agregar una imagen a la tarjeta de felicitación, usaremos Image Composable. PainterResource Composable toma la identificación del parámetro del dibujable y devuelve Painter que se puede usar en Image Composable. Siéntase libre de elegir cualquier imagen dibujable que se sienta atractiva en su tarjeta de felicitación. Vamos a crear otra función componible SaludoDeCumpleañosConImagen() con 3 parámetros — Mensaje, De e Imagen. Usemos un diseño de caja para esto. El diseño de la caja se utiliza para apilar elementos uno encima del otro. El diseño de la caja también le permite configurar la alineación específica de los elementos en el interior. Veamos una vista previa de la tarjeta de felicitación con imagen y texto. ¡Hurra! La tarjeta de felicitación de cumpleaños está lista. Veamos otro ejemplo de diseño.En este tema, vamos a crear una interfaz de usuario para redactar artículos. Esto contiene una imagen de ancho de pantalla completa. Tiene 3 elementos de texto con algún tamaño de fuente y relleno. Los elementos de texto segundo y tercero están en alineación de texto completo. Tenga en cuenta que todos los elementos están dispuestos en orden vertical. Entonces podemos usar Column Composable para organizar los elementos. Escribamos una función componible — ComponerArtículo() que acepta una imagen y 3 valores de texto. Para alinear texto en Justify, podemos configurar el parámetro textAlign en Text Composable como TextAlign.Justify. Para obtener una vista previa de esto, agreguemos otra característica: ComponerArtículoPreview()Crea y actualiza para ver los cambios. El diseño para crear artículos está listo.En este tema, crearemos un tema que parece un administrador de tareas que mostrará la interfaz de usuario como se muestra arriba cuando haya terminado todas sus tareas. Tiene una imagen y 2 elementos de texto. Todos los elementos están centrados horizontal y verticalmente. Escribamos una función componible — administrador de tareas() Por lo tanto. En Column Composable, para colocar los elementos en el centro vertical, asignamos el valor Arrangement.Center al parámetro verticalArrangement. Y para colocar elementos en el centro horizontal, usamos Alignment.CenterHorizontally en horizontalAlignment param en Column Composable. Echemos un vistazo a esto escribiendo otra función Composable de vista previa: Vista previa del administrador de tareas ()El tema del administrador de tareas está listo.En este diseño, la pantalla se divide en 4 cuadrantes. Cada cuadrante tiene 2 elementos de texto en el centro de ese cuadrante. Todos los cuadrantes tienen diferentes colores. Primero, dibujemos cómo se ve un mapa (cuadrante). Cada tarjeta tiene 2 elementos de texto. El segundo texto usa Justificar como alineación de texto. El primero es gordo. Y ambos textos juntos se colocan horizontal y verticalmente en el medio. Cuando obtenemos una vista previa de esto, se muestra una vista previa de un cuadrante.Ahora necesitamos mostrar 4 cuadrantes. Para esto podemos usar 2 filas en una columna. Para dar a cada cuadrante compuesto el mismo ancho, establezca el peso del modificador en 1f en cada mapa compuesto. Y para configurar cada cuadrante a la misma altura, configure el peso del modificador como 1f en cada fila de la columna. Veamos el código. Veámoslo en la vista previa. ¡Hurra! El ComposeQuadrants Composable está completo.En este diseño crearemos una tarjeta de presentación componible. Hay dos secciones en él. Una es la capa superior donde tenemos una imagen y dos elementos de texto. Se coloca horizontalmente en el centro. Vamos a crear un componible para la parte superior – BusinessCardTop() Vamos a obtener una vista previa y ver cómo se ve,¡Grande! Ahora echemos un vistazo a la sección inferior. La sección inferior tiene 3 filas dispuestas en una columna. Cada fila tiene una imagen y texto. También agreguemos algo de relleno para que se vean bien. Hagamos una vista previa y veamos cómo se ve.¡Brillante! El elemento de fila está listo. Agreguemos 3 filas en una columna. Agregue sus diversos datos de contacto aquí. Hagamos una vista previa.Va bien hasta ahora. Hemos terminado la parte superior y hemos terminado la parte inferior. Ahora hagamos algunos cambios y agreguemos más peso a la interfaz de usuario. La tarjeta de presentación está lista. ¡Felicidades! Con los 5 diseños que creamos en este blog, aprendimos sobre tres diseños: fila, columna y cuadro. También aprendimos sobre Modifier.weight. También encontramos la funcionalidad de verticalArrangement y horizontalAlignment. Aprendimos a agregar una imagen componible y texto usando fontWeight, fontSize, textAlign y modificador. Aquí está el enlace de github con todos los códigos de temas que implementamos en este blog. No dude en consultarlo.Espero que este blog le resulte útil para empezar a utilizar Jetpack Compose. Si te gusta esto, no olvides presionar el 👏.