[Android] BottomNavigationBar 구현하기

🛠️ Jetpack Compose 하단 탭바 구현 예제

 

 

1. 필요한 의존성 추가

build.gradle에 다음을 추가하세요:

implementation("androidx.navigation:navigation-compose:2.7.0")

2. 화면(Screens) 정의하기

sealed class Screen(

       val route: String,

       val icon: ImageVector,

       val title: String) {

     

      object Home : Screen("home", Icons.Default.Home, "홈")

      object Jangbu : Screen("jangbu", Icons.Default.Jangbu, "간편장부")

      object Settings : Screen("settings", Icons.Default.Settings, "설정") }

3. 하단 탭바 UI 만들기

@Composable fun BottomBar(navController: NavHostController) {

 

    val items = listOf(Screen.Home, Screen.Jangbu, Screen.Settings)

 

     BottomNavigation {

           val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route items.forEach {      

                       screen -> BottomNavigationItem( icon = { Icon(screen.icon, contentDescription = screen.title) },

                       label = { Text(screen.title) },

                       selected = currentRoute == screen.route, onClick = { if (currentRoute != screen.route) {

                             navController.navigate(screen.route) {

 

                                    popUpTo(navController.graph.startDestinationId) { saveState = true }

                                    launchSingleTop = true restoreState = true } } } ) } } }

4. NavHost와 함께 사용하기

@Composable fun MainScreen() {

           val navController = rememberNavController()

 

           Scaffold( bottomBar = { BottomBar(navController) } ) { innerPadding ->

 

                   NavHost( navController, startDestination = Screen.Home.route, Modifier.padding(innerPadding) ) {

                             composable(Screen.Home.route) { Text("홈 화면") }

                             composable(Screen.Search.route) { Text("검색 화면") }

                             composable(Screen.Profile.route) { Text("프로필 화면") } } } }