0

Tengo una aplicación que se compone por un login con su registro, y después el resto de pantallas. Normalmente con XML lo que hacía era tener dos activities (o 3 si tenía splash) con sus respectivos fragments.

Una con lo referente al login con el registro donde a lo mejor compartían el mismo background base colocado en el activity y después tenía otro activity que contenía todo lo referente al dashboard de la aplicación y el resto de pantallas.

La finalidad de Compose, o al menos eso he entendido es tener un activity principal y no tener fragmentos, ya que todas las pantallas se pueden montar en funciones composables.

Entonces, después de todo esto, como puedo imitar el mismo escenario de XML en Compose sin usar más de un activity? Actualmente tengo algo así:

@Composable
fun LoginScreen(navController: NavController) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.BottomCenter
    ) {
        Image(
            painter = painterResource(id = com.isaacdelosreyes.firebaselogincompose.R.drawable.login_background),
            contentDescription = "Background del login",
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize()
        )
        ConstraintLayout() {

            val surface = createRef()

            Surface(
                Modifier
                    .fillMaxWidth()
                    .height(370.dp)
                    .clip(RoundedCornerShape(topStartPercent = 8, topEndPercent = 8))
                    .constrainAs(surface) {
                        bottom.linkTo(parent.bottom)
                    },
                color = Color.White
            ) {
                Column(
                    Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.Center
                ) {
                    Text(
                        text = "Iniciar sesión", style = TextStyle(
                            fontSize = 20.sp,
                            fontWeight = FontWeight.Bold
                        ), modifier = Modifier.padding(start = 30.dp, top = 20.dp)
                    )
                    LoginInput(textLabel = "Usuario", Icons.Default.Email, false)
                    LoginInput(textLabel = "Contraseña", Icons.Rounded.Lock, true)
                    LoginButton(
                        buttonTextValue = "Iniciar sesión",
                        paddingTopValue = 20.dp,
                        buttonColor = Green
                    ) {

                    }
                    LoginButton(
                        buttonTextValue = "Registrarme",
                        paddingTopValue = 5.dp,
                        buttonColor = Violet
                    ) {
                        navController.navigate("register")
                    }
                }
            }
        }
    }
}

Donde esta sería mi pantalla de login, con su background de fondo, y después tengo mi pantalla de registro:

@Composable
fun RegisterScreen(navController: NavController) {

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.BottomCenter
    ) {
        Image(
            painter = painterResource(id = R.drawable.login_background),
            contentDescription = "Background del login",
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize()
        )
        ConstraintLayout() {

            val surface = createRef()

            Surface(
                Modifier
                    .fillMaxWidth()
                    .height(600.dp)
                    .clip(RoundedCornerShape(topStartPercent = 8, topEndPercent = 8))
                    .constrainAs(surface) {
                        bottom.linkTo(parent.bottom)
                    },
                color = Color.White
            ) {
                Column(
                    Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.Center
                ) {
                    Text(
                        text = "Iniciar sesión", style = TextStyle(
                            fontSize = 20.sp,
                            fontWeight = FontWeight.Bold
                        ), modifier = Modifier.padding(start = 30.dp, top = 20.dp)
                    )
                    LoginInput(textLabel = "Usuario", Icons.Default.Email, false)
                    LoginInput(textLabel = "Contraseña", Icons.Rounded.Lock, true)

                    LoginButton(
                        buttonTextValue = "Registrarme",
                        paddingTopValue = 5.dp,
                        buttonColor = Violet
                    ) {
                        navController.navigate("register")
                    }
                }
            }
        }
    }
}

Podría mover el componente de Image que contiene el background al activity principal ya que de esta forma no lo repito en ambas, pero si uso siempre este activity y creo lo que sería el dashboard donde quiero que ya no tenga este background, ¿qué enfoque puedo darle?

1 respuesta 1

0

Lo que realmente quieres hacer es usar el Navigation Component con Compose, de esta forma el framework se encarga de "remeplazar" el contenido que se despliega en la pantalla.

Toda la idea de jetpack-compose es tener una sola Activity

1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 22 sept. 2022 a las 15:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.