Android Jetpack Compose Navigation
Tempo de leitura: 4 minutes
Olá pessoal, sou eu, este é o meu artigo sobre Compose Navigation, espero que vocês gostem.
- Ao projetar um aplicativo móvel, a navegação é o recurso que tem menos impacto. Recentemente, o Google apresentou o Jet-pack Compose.
- Embora já estejamos familiarizados com a navegação no Android, esse programa nos ensina a transmitir dados de uma tela para outra enquanto navegamos de uma tela para outra.
- Portanto, vamos começar adicionando a dependência de navegação do Jet-pack Compose antes de sincronizar o projeto.
package com.example.composenavigation sealed class NavigationScreen(var routes:String){ object LoginNavigationScreen:NavigationScreen("login_screen") object SignUpScreen:NavigationScreen("signup_screen") object ForgotNavigationScreen:NavigationScreen("forgot_screen") fun navigateWithData(vararg args:String): String { return buildString { append(routes) args.forEach { arg->append("/$arg") } } } }
- Na classe scaled, também criamos funções como a função de argumento, que usamos para passar dados de uma tela para outra.
- Primeiro, criamos um objeto com o nome de código show e uma classe em escala com o nome screen.
- Depois disso, criamos um arquivo NavHost no qual especificamos o caminho que usaremos para passar de uma tela para outra e gerar objetos de navegação. Você pode ver que, quando o aplicativo é iniciado, criamos um Construtor NavHost com a tela que foi iniciada inicialmente em startDestination.
@Composable fun NavigationHost(){ val navController= rememberNavController() NavHost(navController = navController, startDestination = NavigationScreen.LoginNavigationScreen.routes){ composable(route=NavigationScreen.LoginNavigationScreen.routes){ LoginPage(navController = navController) } composable(route=NavigationScreen.SignUpScreen.routes+"/{name}", arguments = listOf( navArgument("name"){ type= NavType.StringType defaultValue="" nullable=true } )){entry-> entry.arguments?.getString("name")?.let { SignUpPage(navController,name= it) } } composable(route=NavigationScreen.ForgotNavigationScreen.routes){ ForgotPage(navController = navController) } } }
- Depois disso, nosso Main Activity será exibido assim
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeNavigationTheme { NavigationHost() } } } }
- Como você pode ver, passamos o Navigation Host em ComposeNavigationTheme.
- Quando chamamos o NavigationHost, criamos uma instância de navegação usando
rememberNavController() - Em seguida, desenvolvemos as telas Forgot Password, Sign Up e Login.
@Composable fun LoginPage(navController: NavController) { Scaffold( topBar = { TopAppBar(title = { Text("My App") }) }, content = { padding -> Column(verticalArrangement = Arrangement.Top, modifier = Modifier .fillMaxWidth() .fillMaxHeight() .padding(padding)) { Box(modifier = Modifier.size(0.dp,30.dp)) Text("App Name", modifier = Modifier .padding(vertical = 20.dp) .fillMaxWidth() , fontSize = 55.sp) Box(modifier = Modifier.size(0.dp,10.dp)) TextField(value = userName, onValueChange = { userName=it }, textStyle = TextStyle( fontSize = 15.sp, fontWeight = FontWeight.Medium, color = Color.Black ),modifier = Modifier .fillMaxWidth() .padding(horizontal = 10.dp, vertical = 10.dp), placeholder = { Text(text = "Enter User Name")}) TextField(value = passwordName, onValueChange = { passwordName=it }, textStyle = TextStyle( fontSize = 15.sp, fontWeight = FontWeight.Medium, color = Color.Black ),modifier = Modifier .fillMaxWidth() .padding(horizontal = 10.dp, vertical = 10.dp), placeholder = { Text(text = "Enter User Password")}) Box(modifier = Modifier.size(0.dp,100.dp)) Button(onClick = { navController.navigate(NavigationScreen.SignUpScreen.routs) }, modifier = Modifier .size(200.dp, 60.dp) .align(Alignment.CenterHorizontally),) { Text(text = "SignUp") } Box(modifier = Modifier.size(0.dp,10.dp)) Button(onClick = { navController.navigate(NavigationScreen.ForgotNavigationScreen.routes) }, modifier = Modifier .size(200.dp, 60.dp) .align(Alignment.CenterHorizontally),) { Text(text = "Forgot Password?") } } } ) }
- Como você pode ver no código acima, Button Click, direcionamos o usuário para o navController em nossa página. Com o navController, navegamos de uma tela para outra.
- Navigate aceita o caminho de destino, portanto, como a classe Navigation-screen scaled já foi criada, use-a e com o usuário para onde você não vai, como se eu fosse da página de login para a página de inscrição, então simplesmente uso user
ex:- navController.navigate(NavigationScreen.SignUpScreen.routs)
Tela de Sign Up
@Composable fun SignUpPage(navController: NavController,name:String){ Scaffold( topBar = { TopAppBar(title = { Text(name) }, navigationIcon = { IconButton(onClick = { navController.navigateUp() }) { Icon( imageVector = Icons.Filled.ArrowBack, contentDescription = "Back" ) } }) }, content = { padding -> } ) }
e o último é Forgot password (Esqueci minha senha)
@Composable fun ForgotPage(navController: NavController){ Scaffold( topBar = { TopAppBar(title = { Text("Forgot Password") }, navigationIcon = { IconButton(onClick = { navController.navigateUp() }) { Icon( imageVector = Icons.Filled.ArrowBack, contentDescription = "Back" ) } }) }, content = { padding -> } ) }
- Depois disso, a tela de login tem dois botões (inscrever-se e esquecer) e dois campos de texto. TextFields é usado para transferir dados entre as telas de login e de registro.
- Acima de tudo, navegue com uma simples página para outra. Como você pode ver na classe sealed NavigationScreen, também criamos um nome de método como navigateWithData: Agora, passamos os dados de uma tela para outra usando esse método.
Altere LoginPage para o código abaixo.
@Composable fun LoginPage(navController: NavController) { var userName by remember { mutableStateOf("") } var passwordName by remember { mutableStateOf("") } Scaffold( topBar = { TopAppBar(title = { Text("My App") }) }, content = { padding -> Column(verticalArrangement = Arrangement.Top, modifier = Modifier .fillMaxWidth() .fillMaxHeight() .padding(padding)) { Box(modifier = Modifier.size(0.dp,30.dp)) Text("App Name", modifier = Modifier .padding(vertical = 20.dp) .fillMaxWidth() , fontSize = 55.sp) Box(modifier = Modifier.size(0.dp,10.dp)) TextField(value = userName, onValueChange = { userName=it }, textStyle = TextStyle( fontSize = 15.sp, fontWeight = FontWeight.Medium, color = Color.Black ),modifier = Modifier .fillMaxWidth() .padding(horizontal = 10.dp, vertical = 10.dp), placeholder = { Text(text = "Enter User Name")}) TextField(value = passwordName, onValueChange = { passwordName=it }, textStyle = TextStyle( fontSize = 15.sp, fontWeight = FontWeight.Medium, color = Color.Black ),modifier = Modifier .fillMaxWidth() .padding(horizontal = 10.dp, vertical = 10.dp), placeholder = { Text(text = "Enter User Password")}) Box(modifier = Modifier.size(0.dp,100.dp)) Button(onClick = { navController.navigate(NavigationScreen.SignUpScreen.navigateWithData(userName)) }, modifier = Modifier .size(200.dp, 60.dp) .align(Alignment.CenterHorizontally),) { Text(text = "SignUp") } Box(modifier = Modifier.size(0.dp,10.dp)) Button(onClick = { navController.navigate(NavigationScreen.ForgotNavigationScreen.routes) }, modifier = Modifier .size(200.dp, 60.dp) .align(Alignment.CenterHorizontally),) { Text(text = "Forgot Password?") } } } ) }
Como você pode ver no código, usamos navigateWithData e passamos os dados de uma tela para outra.
Obrigado por ler este artigo, comente se você gostou.