[TIL] 🌼24/04/24🌼#Navigation in Jetpack Compose

[TIL] 🌼24/04/24🌼#Navigation in Jetpack Compose

• [LeetCode] 199. Binary Tree Right Side View(Kotlin)

Navigation in Jetpack Compose

• 오늘은 BMI 계산기 navigation 관련 코드 리팩토링을 진행했다.
• 먼저, Jetpack Compose에서의 Navigation에 대해 알아보았다.

📌참고자료

• Navigation in Jetpack compose. Full guide Beginner to Advanced.
• Pass Arguments to Destinations : Jetpack Compose Navigation
• How to use popUpTo and popUpToInclusive in Navigation Framework?

Navigation Component

• Navigation Graph
  • resource that collects all navigation-related data in one place
• NavHost
  • unique composable
  • shows various composable destinations for Navigation Graph
  • each composable destination is associated with a route
  • content of the NavHost is recomposed when navigated between composables
• NavController
  • central API for the Navigation component
  • stateful
  • keeps track of the back stack of composables

BMI 계산기 리팩토링

리팩토링 전

• MainActivity.kt

class MainActivity : AppCompatActivity() {
    private val mainViewModel by viewModels<MainViewModel>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BMIApp(mainViewModel = mainViewModel)
        }
    }
}

• BMIApp.kt
  • screen 사이 데이터 전달을 위해 ViewModel 객체 전달

@Composable
fun BMIApp (mainViewModel:MainViewModel){
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "first_screen"
    ){
        composable("first_screen"){
            FirstScreen(navController = navController, mainViewModel = mainViewModel)
        }
        composable("result_screen"){
            ResultScreen(navController = navController, mainViewModel = mainViewModel)
        }
    }

리팩토링 후

• BMIActivity.kt (rename MainActivity.kt -> BMIActivity.kt)

class BMIActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BMINavGraph()
        }
    }
}

• BMINavGraph.kt
  • screen 사이 데이터 전달을 위해 argument 사용

@Composable
fun BMINavGraph(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
    startDestination: String = BMIDestinations.FIRST_ROUTE,
    navActions: BMINavigationActions = remember(navController) {
        BMINavigationActions(navController)
    }
) {
    NavHost(
        navController = navController,
        startDestination = startDestination,
        modifier = modifier
    ) {
        composable(BMIDestinations.FIRST_ROUTE) {
            FirstScreen(
                navToResult = { height:Float, weight:Float ->
                    navActions.navigateToResult(height, weight)
                }
            )
        }
        composable(
            BMIDestinations.RESULT_ROUTE,
            arguments = listOf(
                navArgument(HEIGHT_ARG) {
                    type = NavType.FloatType; defaultValue = 0.0
                },
                navArgument(WEIGHT_ARG) {
                    type = NavType.FloatType; defaultValue = 0.0
                },
            )
        ) {
            ResultScreen(
                navToFirst = { navActions.navigateToFirst() },
                height = it.arguments?.getFloat(HEIGHT_ARG)?:0.0F,
                weight = it.arguments?.getFloat(WEIGHT_ARG)?:0.0F
            )
        }
    }
}

• BMINavigation.kt

private object BMIScreens{
    const val FIRST_SCREEN = "first_screen"
    const val RESULT_SCREEN = "result_screen"
}

object BMIDestinationArgs{
    const val HEIGHT_ARG = "height"
    const val WEIGHT_ARG = "weight"
}

object BMIDestinations{
    const val FIRST_ROUTE = FIRST_SCREEN
    const val RESULT_ROUTE = "$RESULT_SCREEN/{$HEIGHT_ARG}/{$WEIGHT_ARG}"
}

class BMINavigationActions(private val navController: NavHostController) {
    fun navigateToFirst(){
        navController.navigate(FIRST_SCREEN){
            popUpTo(navController.graph.findStartDestination().id){
                inclusive = true
            }
        }
    }

    fun navigateToResult(height:Float, weight:Float){
        navController.navigate("$RESULT_SCREEN/${height.toString()}/${weight.toString()}")
    }
}