Jetpack Compose에서 Navigation 구현하기: compose-destinations와 AnimatedBottomBarCompose 사용
소개
이번 포스트에서는 Jetpack Compose에서 네비게이션을 구현하는 방법을 다룹니다. 특히, compose-destinations와 AnimatedBottomBarCompose 라이브러리를 사용하여 스타일리시한 하단 네비게이션 바를 만드는 방법을 설명합니다.
1. 의존성 추가
먼저, build.gradle 파일에 필요한 의존성을 추가합니다.
Kotlin
dependencies {
implementation("io.github.raamcosta.compose-destinations:core:1.7.0-beta")
ksp("io.github.raamcosta.compose-destinations:ksp:1.7.0-beta")
implementation("com.canopas.compose-animated-navigationbar:bottombar:1.0.1")
implementation("androidx.compose.material3:material3:1.1.0")
}
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
2. KSP 설정
compose-destinations는 KSP를 사용하므로, 프로젝트의 build.gradle 파일에 KSP 플러그인을 추가해야 합니다.
Kotlin
plugins {
id("com.google.devtools.ksp") version "1.7.10-1.0.6"
}
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
3. 화면 컴포저블 정의
각 화면을 @Destination 어노테이션을 사용하여 정의합니다.
Kotlin
@Destination
@Composable
fun HomeScreen(navigator: DestinationsNavigator) {
Column {
Text("Home Screen")
Button(onClick = { navigator.navigate(DetailsScreenDestination) }) {
Text("Go to Details")
}
}
}
@Destination
@Composable
fun DetailsScreen(navigator: DestinationsNavigator) {
Column {
Text("Details Screen")
Button(onClick = { navigator.navigateUp() }) {
Text("Back to Home")
}
}
}
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
4. NavHost 설정
NavHost를 설정하여 네비게이션 그래프를 정의합니다.
Kotlin
@Composable
fun MainScreen() {
val navController = rememberNavController()
Scaffold(
bottomBar = { BottomNavigationBar(navController) }
) {
NavHost(
navController = navController,
startDestination = HomeScreenDestination.route
) {
composable(HomeScreenDestination.route) { HomeScreen(navController.toDestinationsNavigator()) }
composable(DetailsScreenDestination.route) { DetailsScreen(navController.toDestinationsNavigator()) }
}
}
}
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
5. AnimatedBottomBar 구현
AnimatedBottomBarCompose를 사용하여 하단 네비게이션 바를 구현합니다.
Kotlin
@Composable
fun BottomNavigationBar(navController: NavController) {
val navigator = navController.toDestinationsNavigator()
val items = listOf(
NavigationItem(HomeScreenDestination, Icons.Default.Home, "Home"),
NavigationItem(DetailsScreenDestination, Icons.Default.Info, "Details")
)
val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
var selectedItem by remember { mutableStateOf(0) }
AnimatedBottomBar(
selectedItem = selectedItem,
itemSize = items.size,
containerColor = Color.White,
contentColor = Color.Blue,
indicatorColor = Color.Blue,
indicatorStyle = IndicatorStyle.LINE
) {
items.forEachIndexed { index, navigationItem ->
BottomBarItem(
selected = currentRoute == navigationItem.dest.route,
onClick = {
if (currentRoute != navigationItem.dest.route) {
selectedItem = index
navigator.navigate(navigationItem.dest)
}
},
imageVector = navigationItem.icon,
label = navigationItem.label,
containerColor = Color.Transparent,
)
}
}
}
data class NavigationItem(val dest: Direction, val icon: ImageVector, val label: String)
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
결론
이렇게 하면 compose-destinations와 AnimatedBottomBarCompose를 조합하여 스타일리시한 하단 네비게이션 바를 구현할 수 있습니다. 이 방법을 통해 네비게이션을 보다 쉽게 관리하고, 사용자 경험을 향상시킬 수 있습니다.
