Introducción a Jetpack Compose.Por Sehrish Shoaib, Agile… | Por TribalScale Inc. | Tribal Scale | Marzo de 2022
Por Sehrish Shoaib, ingeniero de software ágil, TribalScale
La interfaz de usuario (UI) siempre ha sido la esencia de cualquier producto. En una aplicación móvil de Android, la importancia del diseño y la interacción de la interfaz de usuario tiene implicaciones importantes para crear una aplicación increíble que atraiga a una base de usuarios más grande.
Jetpack Compose es el nuevo conjunto de herramientas moderno de Google para escribir interfaces de usuario. Esta es la próxima evolución en el desarrollo de Android, lo que nos permite crear interfaces de usuario atractivas con mucho menos código que antes. Además, es intuitivo, potente y declarativo.
Como desarrollador de Android, siempre ha habido dos partes para desarrollar una aplicación de Android. En primer lugar, la interfaz de usuario desarrollada en formato XML utilizando la jerarquía de vista y, en segundo lugar, la lógica detrás de la interfaz de usuario, que incluye el enlace de datos, la base de datos, las llamadas de red, etc. Jetpack Compose se trata de la implementación de la capa de diseño en la interfaz de usuario y las aplicaciones de Android, al tiempo que simplifica la comunicación con el lado de la lógica de la aplicación.
Una de las características fundamentales de Jetpack Compose es que está escrito en Kotlin, lo que en última instancia permite a los desarrolladores escribir aplicaciones de Android completamente en un idioma, sin necesidad de un diseño XML. Migrar a Kotlin tiene muchas ventajas. El uso de la misma biblioteca de idiomas facilita que los desarrolladores sigan el principio de separación de preocupaciones. Un estilo de programación declarativo introducido en Compose que cambia el enfoque de cómo funciona un programa a lo que el programa pretende hacer. Esto hace que traducir la lógica en código sea más intuitivo. También presenta la reorganización, uno de los beneficios más importantes de Compose, mediante el cual se puede recuperar cualquier función componible para que cuando cambie el estado de la IU, todos los componibles se recompongan y actualicen la IU en función de ese estado.
En Jetpack Compose, usamos funciones componibles para crear IU. Son similares a las funciones normales que pueden pasar y devolver argumentos.A continuación se muestra una instantánea de una función de composición simple @Composable Luego @Preview Como sugiere el nombre, nos permite ver la interfaz de usuario mientras escribimos el código.
@Composable
fun LandingPage(title: String) {
Text(text = "$title")
}@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
LandingPage("Tribalscale Blogs")
}
}
Scaffold Se implementó la estructura de diseño visual de diseño de material básico. Este componente proporciona una API para combinar varios componentes de materiales para construir su pantalla al garantizar la estrategia de diseño correcta para los componentes y recopilar los datos necesarios para que funcionen juntos correctamente.
Implementemos una pantalla simple en Jetpack Compose para ver qué tan fácil y eficiente es.un ejemplo sencillo Scaffold y TopAppBar, FloatingActionButton y Content Como se muestra abajo.
por topBar Simplemente podemos definir backgroundColor y titulo y navigationIcon Abre el cajón de navegación. Esto se implementa en el código que se muestra a continuación:
@Composable
fun LandingPage() {Scaffold(
modifier = Modifier.fillMaxHeight(),
topBar = {
TopAppBar(
backgroundColor = MaterialTheme.colors.background,
title = { Text("Title") },
navigationIcon = {
IconButton(onClick = { /* Open Nav drawer */ }) {
Icon(Icons.Filled.Menu, contentDescription = null)
}
},
entonces en actions Se están definiendo dos botones de acción, uno tiene un valor predeterminado Search Iconos y otros usos con imágenes personalizadas painterResource.
actions = {
IconButton(onClick = { /* Navigate to Search fragment */ }) {
Icon (Icons.Filled.Search, contentDescription = null)
}
IconButton(onClick = { /* Navigate to About fragment */ }) {
Image(
painter = painterResource(R.drawable.tribalscale),
"icon description"
)
}
}
Un botón de acción flotante puede ser de dos tipos: uno con un ícono y otro con un FAB extendido que contiene texto y un ícono opcional.
floatingActionButtonPosition = FabPosition.End,
floatingActionButton = {
FloatingActionButton(onClick = { /* fab click handler */ }) {
Icon(Icons.Filled.Notifications, contentDescription = "fab description")
}
}
Ven ahora ContentAhora definiremos el diseño según Column Esto nos permitirá crear nuestro diseño en un formato dispuesto verticalmente. Podemos pensar en él como una pila, pero la forma en que se definen sus elementos será de arriba hacia abajo. Es importante recordar que al escribir código, el orden de los componentes se define de la misma forma en que se colocan en el código.Entonces, si imaginamos una pila para comenzar a escribir desde el elemento superior primero, en nuestro ejemplo tenemos un Text pon el titulo entonces Box Podemos repetir elementos. Spacer Nos permite añadir relleno en formato vertical u horizontal. El código se ve así:
content = {
Column(
modifier = Modifier
.fillMaxWidth()
) { Text(
text = "Tribalscale Blogs",
color = colors.secondary,
style = MaterialTheme.typography.h2 )Spacer(Modifier.padding(vertical = 10.dp))
La ventaja adicional de los componibles es que podemos definir componibles separados para diferentes partes de la pantalla y reutilizarlos para cambiar su contenido como cualquier otra función al pasar diferentes valores de parámetros. Incluso podemos usarlos en diferentes proyectos de Android.
Agreguemos una animación para que cuando el usuario haga clic en él, el color de fondo del cuadro cambie mientras se expande su contenido.
Jetpack Compose nos da la funcionalidad remember y mutableStateOf Realiza un seguimiento de si el texto se ha ampliado. Estas funciones nos permiten rastrear este cambio de estado. Vea el código a continuación:
var isExpanded by remember { mutableStateOf(false) }val boxColor: Color by animateColorAsState(
if (isExpanded) Green else Yellow)
Se pueden usar funciones componibles remember Almacene el estado local en la memoria y realice un seguimiento de los pares mutableStateOf valor. Todos los componibles que usen este estado se volverán a dibujar automáticamente cuando se modifique el valor. Esto se llama reorganización.Al usar la API de estado de Compose, cualquier cambio en el estado se actualiza automáticamente en la interfaz de usuario, p. remember y mutableStateOf.
Cuando hacemos clic en un mensaje, ahora podemos cambiar el fondo del mensaje y su contenido en función de isExpandedcomo se define en la siguiente línea de código:
maxLines = if (isExpanded) Int.MAX_VALUE else 2
Para manejar eventos de clic componibles, usaremos el modificador de clics. Como resultado, al hacer clic, nuestra pantalla de salida se verá como la imagen a continuación:
Por último, si bien no menos importante ModifiersPermiten a los desarrolladores agregar varias personalizaciones al componible, como:
- Cambie la apariencia, como ancho, alto, estilo de forma, color de fondo y más.
- Cambie el comportamiento, como agregar contenido en el que se pueda hacer clic o hacer que se pueda desplazar.
Puede encadenar cualquier cantidad de modificadores como se muestra en el código a continuación.
En el interior Box elemento y después de definir los modificadores, estamos en un Row contiene una Image Entonces un Column Hay dos textos. Como ves, visualizar elementos y conectarlos con código es muy sencillo e intuitivo. El resto del código, incluido el modificador, se ve así:
Box(
Modifier
.padding(horizontal = 10.dp)
.width(360.dp)
.height(130.dp)
.clip(RoundedCornerShape(10.dp))
.background(boxColor)
.clickable { isExpanded = !isExpanded })
{ Row(
Modifier.fillMaxHeight(1f),
verticalAlignment = Alignment.CenterVertically
) {
Image(
modifier = Modifier
.padding(horizontal = 10.dp)
.size(100.dp)
.clip(RoundedCornerShape(10.dp)),
painter = painterResource(R.drawable.image_1),
contentDescription = "Image description"
)
Column(Modifier.padding(end = 5.dp)) {
Text(
text = "Product",
style = MaterialTheme.typography.h4
)
Text(modifier = Modifier.padding(all = 0.dp),
maxLines = if (isExpanded) Int.MAX_VALUE else 2,
text = "Product Blogs that give insight into innovative global products. \n - Blog 1 \n - Blog 2",
style = MaterialTheme.typography.body2,
)
}
}
}
