[Android]Compose BottomNavigation 만들기

Compose로 BottomNavigationBar 커스터마이징

Compose로 BottomNavigation을 만들고 커스텀하는 방법을 정리한다.

1. BottomBar에 Compose 연결

• BottomBar를 선언하기 위해서는 Scaffold를 사용해야 한다.

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

Scaffold(bottomBar = {
    if (currentRoute in listOf(route1.route, route2.route)) {
        BottomNavigationBar(navController)
    }
})

• 아래 코드는 route1, route2일 때만 BottomNavigationBar가 표시되게 한다

if (currentRoute in listOf(route1, route2))

2. BottomNavigationBar 만들기

val items = listOf(route1, route2) // 바텀 네비게이션의 기준이 될 item들
val itemTexts = stringArrayResource(R.array.Tab) // item들의 이름

val screenHeightDp = LocalConfiguration.current.screenHeightDp.dp
val height = screenHeightDp / 15
// 전체 화면의 1/15 크기로 하기 위한 수치 계산

• items와 itemTexts는 각각 네비게이션 항목과 해당 텍스트가 된다.
• 화면 높이의 1/15 크기로 NavigationBar의 높이를 설정한다.

NavigationBar(
    modifier = Modifier
        .fillMaxWidth()
        .height(height),
    containerColor = Color.White // NavigationBar의 배경색 설정
) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route

    items.forEachIndexed { index, screen ->
        NavigationBarItem(
            icon = {
                Icon(...) // 각 Item들의 icon을 설정 (빈공간을 만들고 싶다면 Icon을 지워주면 된다)
            },
            label = { Text(itemTexts[index]) }, // 표시할 텍스트
            selected = currentRoute == screen.route, // 선택 여부 판단
            colors = NavigationBarItemDefaults.colors(
                indicatorColor = Color.Transparent, // Icon의 백그라운드 색
                selectedTextColor = Color.Black, // 선택된 텍스트 색
                unselectedTextColor = Color.Red // 선택되지 않은 텍스트 색
            ),
            onClick = {
                // 클릭 시 작동할 코드
                navController.navigate(screen.route) {
                    popUpTo(navController.graph.startDestinationId) {
                        inclusive = true
                    }
                }
            }
        )
    }
}

• NavigationBarItem: 각 항목에 대한 아이콘, 텍스트, 선택 상태 및 클릭 동작을 정의한다.
• colors: 선택된 항목과 선택되지 않은 항목의 텍스트 색상과 아이콘의 배경색을 커스터마이징한다.

주석을 통한 코드 설명

• 주석을 통해 각 코드의 역할을 설명한다. 아이콘 설정, 텍스트 처리, 선택 여부 판단, 클릭 시의 동작 등을 명확하게 정리했다.