Jetpack compose Navigation

 

들어가기 전에

Jetpack Compose 에서 Navigation 구현에 필요한 내용을 정리해보려고 한다.

 

Navigation Compose

Navigation 라이브러리 버전정보를 보려면 여기를 확인하자.

// Jetpack Compose Integration
implementation("androidx.navigation:navigation-compose:$navVersion")

 

모듈 레벨에 build.gradle 파일의 선언하면 androidx.navigation.compose 라이브러리를 사용할 수 있게된다.

화면 전환을 지원하는 객체는 rememberNavController() 사용해야한다.

 

val navController = rememberNavController()

NavHost(
    navController = navController,
    startDestination = "first",
) {
    composable("first") {
        FirstScreen(navController)
    }
    composable("second") {
        SecondScree(navController)
    }
    composable("third/{value}") { backStackEntry ->
        ThirdScreen(
            navController = navController,
			value = backStackEntry.arguments?.getString("value") ?: "", // backStackEntry 에서 넘겨져오는 값을 얻을 수 있다
        )
    }
}

 

Compose 에서 제공하는 NavHost 메서드 파라미터 값으로, 변수로 선언해놓은 NavController 와 시작 지점을 작성한다.

 

Coposable 어노테이션 함수로 작성할 첫번째 화면, 두번째 화면, 세번째 화면을 만들어준다.

세번째 Composable 함수는 URL의 붙어오는 파라미터값이라고 생각하면된다.

 

아래의 작성된 전체코드를 보면 navController.navigateUp() 함수는 탐색 계층 구조에서 사용자가 앱 UI의 위로 버튼을 누를 때와 같은 상황에 사용할 수 있다. 이 구성에서는 이전화면으로 돌아가는 것이다.

 

navController.popBackStack() 함수는 컨트롤러의 백스택을 팝업한다. 사용자가 시스템 뒤로 버튼을 누를 때와 유사하다.

navController.navigate() 함수는 여러 인자를 사용할 수 있지만 내가 사용한 방법은 *route 해주는 것이다.

 

navController.navigate("third/$value") 는 세번째 화면으로 넘어갈 때 TextField 의 입력된 value 값을 넘기는 것이다.

 

route: 출발지점과 목적지를 연결하는 길

 

전체 코드

package com.example.navigation

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@ExperimentalMaterial3Api
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()

            NavHost(
                navController = navController,
                startDestination = "first",
            ) {
                composable("first") {
                    FirstScreen(navController)
                }
                composable("second") {
                    SecondScree(navController)
                }
                composable("third/{value}") { backStackEntry ->
                    ThirdScreen(
                        navController = navController,
                        value = backStackEntry.arguments?.getString("value") ?: "", // backStackEntry 에서 넘겨져오는 값을 얻을 수 있다
                    )
                }
            }
        }
    }
}

@ExperimentalMaterial3Api
@Composable
fun FirstScreen(navController: NavController) {
    val (value, setValue) = remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text = "첫 화면.")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            navController.navigate("second")
        }) {
            Text(text = "두 번째.")
        }
        Spacer(modifier = Modifier.height(16.dp))
        TextField(value = value, onValueChange = setValue)
        Button(onClick = {
            if (value.isNotEmpty()) {
                navController.navigate("third/$value")
            }
        }) {
            Text(text = "세 번째.")
        }
    }
}

@Composable
fun SecondScree(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text = "두번째 화면.")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            navController.navigateUp()
            /*navController.popBackStack()*/
        }) {
            Text(text = "뒤로 가기.")
        }
    }
}

@Composable
fun ThirdScreen(navController: NavController, value: String) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text = "세 번째 화면.")
        Spacer(modifier = Modifier.height(16.dp))
        Text(text = value)
        Button(onClick = {
            navController.navigateUp()
        }) {
            Text(text = "뒤로 가기!")
        }
    }
}

 

완성된 화면