Generalidades

Pantalla de inicio de sesión de Android usando jetpack componer

En esta parte, agregaremos más pantallas y crearemos algunos componentes comunes para reutilizarlos en toda la aplicación.

paso 1: creemos juntos barra de aplicaciones superior El primero son los componentes.Crear un nuevo paquete llamado Componentes\ Cree un nuevo archivo en este paquete y asígnele un nombre Componentes\CustomTopAppBar.kt Pegue el siguiente fragmento de código en este archivo

@Composable
fun CustomTopAppBar(navController: NavHostController, title: String, showBackIcon : Boolean) {
TopAppBar(
title = {
Text(text = title)
},
navigationIcon = if (showBackIcon && navController.previousBackStackEntry != null) {
{
IconButton(onClick = { navController.navigateUp() }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Back"
)
}
}
} else {
null
}
)
}

Paso 2: Crear nuevo archivo Pantalla\Registrarse.kt y agregue el siguiente código en él

@Composable
fun SignUp(navController: NavHostController) {
Box(modifier = Modifier.fillMaxSize()) {
ScaffoldWithTopBar(navController)
}
}

@Composable
fun ScaffoldWithTopBar(navController: NavHostController) {
Scaffold(
topBar = {
CustomTopAppBar(navController, "Signup", true)
}, content = {
Column(
modifier = Modifier
.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Sign up",
fontSize = 30.sp,
color = Color.Black
)
}

})
}

Paso 3: Crear nuevo archivo pantalla\Olvidé mi contraseña.kt y agregue el siguiente código en él

@Composable
fun ForgotPassword(navController: NavHostController) {
Box(modifier = Modifier.fillMaxSize()) {
ScaffoldWithTopBarForgotPass(navController)
}
}

@Composable
fun ScaffoldWithTopBarForgotPass(navController: NavHostController) {
Scaffold(
topBar = {
CustomTopAppBar(navController, "Forgot Password", true)
}, content = {
Column(
modifier = Modifier
.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Forgot Password",
fontSize = 30.sp,
color = Color.Black
)
}
}
)
}

Paso 4: Ahora agregaremos navegación a la pantalla anterior que acabamos de crear.para actualizar ScreenMain.kt con el siguiente código

@Composable
fun ScreenMain(){
val navController = rememberNavController()

NavHost(navController = navController, startDestination = Routes.Login.route) {

composable(Routes.Login.route) {
LoginPage(navController = navController)
}

composable(Routes.SignUp.route) {
SignUp(navController = navController)
}

composable(Routes.ForgotPassword.route) { navBackStack ->
ForgotPassword(navController = navController)
}
}
}

Paso 5: Para navegar desde la pantalla de inicio de sesión a la pantalla de registro, agregue el siguiente código al onClick del texto de registro iniciar sesión.kt.

ClickableText(
text = AnnotatedString("Sign up here"),
modifier = Modifier
.align(Alignment.BottomCenter)
.padding(20.dp),
onClick = { navController.navigate(Routes.SignUp.route) },
style = TextStyle(
fontSize = 14.sp,
fontFamily = FontFamily.Default,
textDecoration = TextDecoration.Underline,
color = Purple700
)
)

Paso 6: Para navegar desde la pantalla de inicio de sesión a la pantalla de contraseña olvidada, agregue el siguiente código al texto de contraseña olvidada en onClick iniciar sesión.kt.

ClickableText(
text = AnnotatedString("Forgot password?"),
onClick = { navController.navigate(Routes.ForgotPassword.route) },
style = TextStyle(
fontSize = 14.sp,
fontFamily = FontFamily.Default
)
)

completo.

LEER  Introducción a la concurrencia en iOS | Autor: Abhishek Singh | Diciembre de 2021

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba