[Android] Compose Bottom NavigationBar

안드로이드 compose에서 Bottom NavigationBar를 사용해보겠습니다.

 

먼저 navigation을 통해 전환할 화면들을 정의했습니다.

sealed class Screen(val route: String, val title: String, val icon: ImageVector) {
    object Home : Screen("home", "Home", Icons.Filled.Home)
    object Add : Screen("add", "Add", Icons.Filled.Add)
    object Settings : Screen("settings", "Settings", Icons.Filled.Settings)
}

 

@Composable
fun currentRoute(navController: NavController): String? {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    return navBackStackEntry?.destination?.route
}
@Composable
fun BottomNavigationBar(navController: NavController){
    val items = listOf(
        Screen.Home,
        Screen.Add,
        Screen.Settings
    )

    NavigationBar(
        modifier = Modifier
            .height(60.dp),
        containerColor = Color.White,
    ) {
        val currentRoute = currentRoute(navController)
        items.forEach { screen ->
            NavigationBarItem(
                icon = { Icon(imageVector = screen.icon, contentDescription = screen.title) },
                selected = currentRoute == screen.route,
                onClick = {
                    navController.navigate(screen.route) {
                        
                        popUpTo(navController.graph.findStartDestination().id) {
                        //현재 화면에서 popUpTo 대상 화면까지의 모든 컴포저블의 상태가 저장
                            saveState = true
                        }
                        //Intent.FLAG_ACTIVITY_SINGLE_TOP과 비슷한 기능
                        launchSingleTop = true
                        
                        //navigate 대상 화면의 ID와 일치하는 저장된 상태가 있는 경우 해당 상태를 복원
                        restoreState = true
                    }
                }
            )
        }
    }
}

BottomNavigationBar를 생성하는 composable 함수입니다.

NavigationBar 컴포저블을 사용하며 icon, onClick, label등을 설정할 수 있습니다.

 

@Composable
fun Navigation(navController: NavHostController, innerPadding: PaddingValues) {

    NavHost(navController, startDestination = Screen.Home.route, modifier = Modifier.padding(innerPadding)) {
        composable(Screen.Home.route) {
            HomeScreen()
        }
        composable(Screen.Add.route) {
            AddScreen()
        }
        composable(Screen.Settings.route) { 
            SettingsScreen() 
        }
    }
}

실제 화면전환 로직을 수행하는 부분입니다.

초기화면과 각 목적지별 실행할 컴포저블을 정의합니다.

 

setContent {
    val navController = rememberNavController()
    FoodTruckTheme {
        Scaffold(modifier = Modifier.fillMaxSize(),
            bottomBar = {
                BottomNavigationBar(navController = navController)
            }
        ) {
            Navigation(navController,it)
        }
    }
}

Scaffold의 bottomBar 속성으로 NavigationBar를 설정할 수 있습니다.