하단 탐색
탭이 있는 하단 탐색을 만들어 보세요.
하단 탐색은(는) CoddyKit의 무료 Android Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Android Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
하단 탐색 모음
많은 앱은 최상위 섹션을 하단 탐색 모음에 배치합니다. Compose는 이를 위해 NavigationBar와 NavigationBarItem을 제공합니다.
NavigationBar
NavigationBar는 컨테이너이며, 일반적으로 Scaffold의 bottomBar 슬롯에 배치합니다. 여러 NavigationBarItem을 담습니다.
NavigationBar {
// items go here
}NavigationBarItem
각 탭은 icon, 선택적 label, selected 플래그, onClick이 있는 NavigationBarItem입니다.
NavigationBarItem(
selected = true,
onClick = { },
icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
label = { Text("Home") }
)탭 모델링하기
탭을 데이터로 정의하면 반복문으로 처리할 수 있습니다. 경로, 레이블, 아이콘이 있는 간단한 데이터 클래스가 적합합니다.
data class Tab(val route: String, val label: String, val icon: ImageVector)
val tabs = listOf(
Tab("home", "Home", Icons.Default.Home),
Tab("profile", "Profile", Icons.Default.Person)
)현재 경로 추적하기
활성 탭을 강조 표시하려면 현재 경로가 필요합니다. 컨트롤러의 현재 백 스택 항목에서 읽으세요.
val backStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry?.destination?.route선택 상태 표시하기
각 탭의 경로를 currentRoute와 비교하여 selected 플래그를 설정하면 모음에서 올바른 항목을 강조 표시할 수 있습니다.
NavigationBarItem(
selected = currentRoute == tab.route,
onClick = { navController.navigate(tab.route) },
icon = { Icon(tab.icon, contentDescription = tab.label) },
label = { Text(tab.label) }
)백 스택이 쌓이지 않게 하기
탭을 반복해서 눌러도 목적지가 계속 쌓여서는 안 됩니다. 탭 사이를 이동할 때 시작 목적지에 popUpTo를 적용하고 launchSingleTop을 함께 사용하세요.
navController.navigate(tab.route) {
popUpTo(navController.graph.startDestinationId) { saveState = true }
launchSingleTop = true
restoreState = true
}saveState / restoreState
saveState와 restoreState는 탭을 떠났다가 돌아올 때 각 탭의 스크롤 위치와 상태를 유지합니다. 이는 하단 탭에 기대되는 동작입니다.
Scaffold 통합하기
모든 요소를 Scaffold로 감싸세요. 모음은 bottomBar에, NavHost는 콘텐츠 영역에 배치하고 제공된 패딩을 사용하여 콘텐츠가 모음 뒤에 가려지지 않게 합니다.
Scaffold(
bottomBar = { BottomBar(navController) }
) { padding ->
NavHost(
navController,
startDestination = "home",
modifier = Modifier.padding(padding)
) { /* destinations */ }
}항목 반복하기
탭 목록을 반복하여 모음을 만들면 코드가 간결하고 일관되게 유지됩니다.
NavigationBar {
tabs.forEach { tab ->
NavigationBarItem(
selected = currentRoute == tab.route,
onClick = { navController.navigate(tab.route) },
icon = { Icon(tab.icon, contentDescription = tab.label) },
label = { Text(tab.label) }
)
}
}전체 연결하기
컨트롤러에 연결된 전체 하단 모음으로, 활성 탭을 강조 표시합니다.
@Composable
fun BottomBar(navController: NavController) {
val entry by navController.currentBackStackEntryAsState()
val current = entry?.destination?.route
NavigationBar {
tabs.forEach { tab ->
NavigationBarItem(
selected = current == tab.route,
onClick = { navController.navigate(tab.route) },
icon = { Icon(tab.icon, contentDescription = tab.label) },
label = { Text(tab.label) }
)
}
}
}빠른 확인
어떤 NavigationBarItem을 selected로 표시해야 하는지 어떻게 알 수 있나요?
복습
하단 탐색:
NavigationBar가NavigationBarItem을 담습니다.currentBackStackEntryAsState()를 통해 활성 탭을 추적하고selected를 설정합니다.- 탭을 깔끔하게 전환하려면
popUpTo+launchSingleTop+saveState/restoreState를 사용합니다. Scaffold의bottomBar에 배치합니다.
자주 묻는 질문
“하단 탐색” 강의는 무료인가요?
네 — “하단 탐색” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Android Academy 강의 전체를 잠금 해제할 수 있습니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“하단 탐색”에서 뭘 배우나요?
탭이 있는 하단 탐색을 만들어 보세요. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Android Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Android Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“하단 탐색” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Android Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Android Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.