Jetpack Compose에서 Navigation 구현하기: compose-destinations와 AnimatedBottomBarCompose 사용

Jetpack Compose에서 Navigation 구현하기: compose-destinations와 AnimatedBottomBarCompose 사용

DALL-3 가 그려준 그림.. 오타가 많네

 

소개

이번 포스트에서는 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를 조합하여 스타일리시한 하단 네비게이션 바를 구현할 수 있습니다. 이 방법을 통해 네비게이션을 보다 쉽게 관리하고, 사용자 경험을 향상시킬 수 있습니다.