[Compose] BottomNavigation 사용방법

안드로이드 Compose에서 BottomNavigation은 앱의 주요 내비게이션을 제공하는 중요한 UI 컴포넌트입니다.

이 글에서는 BottomNavigation의 사용 방법, 커스터마이징 방법, 그리고 BottomNavigationRail에 대해 알아보겠습니다.

 

BottomNavigation은 화면 하단에 위치하여 사용자가 앱 내에서 다른 화면으로 쉽게 이동할 수 있도록 도와주는 UI 요소입니다. 일반적으로 여러 아이콘과 텍스트 레이블로 구성되어 있으며, 각 아이콘은 특정 기능이나 화면으로 연결됩니다.

 

BottomNavigation 사용 방법 🛠️

@Composable
fun MyBottomNavigation() {
    val items = listOf("Home", "Search", "Profile")
    var selectedItem by remember { mutableStateOf(items[0]) }

    BottomNavigation {
        items.forEach { item ->
            BottomNavigationItem(
                icon = { Icon(Icons.Filled.Home, contentDescription = null) },
                label = { Text(item) },
                selected = item == selectedItem,
                onClick = { selectedItem = item }
            )
        }
    }
}

• BottomNavigation: 하단 네비게이션 바를 생성합니다.
• BottomNavigationItem: 개별 네비게이션 아이템을 정의합니다.
• selectedItem: 현재 선택된 아이템을 상태로 관리합니다.

 

 

BottomNavigation 커스터마이징 🎨

BottomNavigation의 디자인을 변경하고 싶다면, 스타일을 수정할 수 있습니다.

예를 들어, 배경색이나 선택된 아이템의 색상을 변경할 수 있습니다.

@Composable
fun CustomBottomNavigation() {
    val items = listOf("Home", "Search", "Profile")
    var selectedItem by remember { mutableStateOf(items[0]) }

    BottomNavigation(
        backgroundColor = Color.Blue,
        contentColor = Color.White
    ) {
        items.forEach { item ->
            BottomNavigationItem(
                icon = { Icon(Icons.Filled.Home, contentDescription = null) },
                label = { Text(item) },
                selected = item == selectedItem,
                selectedContentColor = Color.Yellow,
                unselectedContentColor = Color.Gray,
                onClick = { selectedItem = item }
            )
        }
    }
}

• backgroundColor: 네비게이션 바의 배경색을 설정합니다.
• selectedContentColor와 unselectedContentColor: 선택된 아이템과 선택되지 않은 아이템의 색상을 설정합니다.

 

 

BottomNavigationRail 사용 방법 🚆

BottomNavigationRail은 수직으로 배치된 내비게이션 바를 제공합니다.

이 컴포넌트는 특히 큰 화면에서 유용합니다.

@Composable
fun MyBottomNavigationRail() {
    val items = listOf("Home", "Search", "Profile")
    var selectedItem by remember { mutableStateOf(items[0]) }

    BottomNavigationRail {
        items.forEach { item ->
            NavigationRailItem(
                icon = { Icon(Icons.Filled.Home, contentDescription = null) },
                label = { Text(item) },
                selected = item == selectedItem,
                onClick = { selectedItem = item }
            )
        }
    }
}

• BottomNavigationRail: 수직 네비게이션 바를 생성합니다.
• NavigationRailItem: 개별 네비게이션 아이템을 정의합니다.

 

Window Size Class 📱

Dependency

androidx-material3-window-size = { group = "androidx.compose.material3", name = "material3-window-size-class-android", version.ref = "material3WindowSizeClassAndroid" }

• 최신 버전: 1.3.0 (24.09.06 기준)

분기 처리

val windowSizeClass = calculateWindowSizeClass(this)
MyApp(windowSize = windowSizeClass)

창 크기 클래스 너비에는 Compact, Medium, Expanded 세 가지가 있습니다.

앱이 세로 모드인 경우 Compact 너비이고, 가로 모드인 경우 Expanded 너비입니다. 

@Composable
fun MyApp(windowSize: WindowSizeClass){
    when(windowSize.widthSizeClass){
        WindowWidthSizeClass.Compact -> {
            MyAppCompact() // Portrait
        }
        WindowSizeClass.Medium -> {
            MyAppMedium()
        }
        WindowWidthSizeClass.Expanded -> {
            MyeAppExpanded() // Landscape
        }
    }
}

 

Size가 Compact인 경우 BottomNavigation을 사용하고, Expanded인 경우 BottomNavigationRail를 사용하도록 하면 사용자 경험을 최적화할 수 있습니다.