Android Jetpack Compose Navigation

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.