Android Jetpack Compose 下方導覽列 NavigationBar 示範

在 Android Studio 中建立的 Empty Activity 專案是依賴於 androidx.compose.material3:material3 ，使用的是 NavigationBar，而現在大多的教學是依賴 androidx.compose.material:material ，使用 BottomNavigation 。本篇示範的是最新的 material3 中的 NavigationBar。

依賴

在 build.gradle (Module: app) 中應該預設有此依賴，筆者當下最新的版本是 1.1.1

    
dependencies {
    implementation 'androidx.compose.material3:material3:1.1.1'
}
    

最基本導覽列

    
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.vector.ImageVector


data class MyNavigationBarItem(
    val icon: ImageVector,
    val label: String,
    val route: String
)

@Composable
fun MyBottomNavigation() {
    var selectedItem by remember { mutableStateOf(0) }

    var items = listOf(
        MyNavigationBarItem(
            icon = Icons.Filled.Home,
            label = "Home",
            route = "home"
        ),
        MyNavigationBarItem(
            icon = Icons.Filled.Favorite,
            label = "Favorite",
            route = "favorite"
        ),
        MyNavigationBarItem(
            icon = Icons.Filled.Settings,
            label = "Settings",
            route = "settings"
        ),
    )

    NavigationBar(
    ) {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(item.icon, contentDescription = item.label) },
                label = { Text(item.label) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}
    

進階選項

如果不想要下方的文字(Label)一直顯示，只有點擊時才顯示該怎麼做？ alwaysShowLabel = false

    NavigationBar(
    ) {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(item.icon, contentDescription = item.label) },
                label = { Text(item.label) },
                selected = selectedItem == index,
                onClick = { selectedItem = index },
                alwaysShowLabel = false, // 一直顯示 label
            )
        }
    }
    

那如果完全不想要讓下方顯示文字呢？那就更簡單了，不要設定就好了:

    NavigationBar(
    ) {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(item.icon, contentDescription = item.label) },
                // label = { Text(item.label) }, // 刪掉這行
                selected = selectedItem == index,
                onClick = { selectedItem = index },
            )
        }
    }
    

顯示徽章

假設該頁籤有訊息提示該怎麼做? 我們可以在 NavigationBarItem 的 icon 中加入 BadgedBox，使用 Badge 達成:

NavigationBar(
) {
    items.forEachIndexed { index, item ->
        NavigationBarItem(
            icon = {
//              Icon(item.icon, contentDescription = item.label) // 移除
                BadgedBox(
                    badge = {
                        Badge {
                            val badgeNumber = "8"
                            Text(badgeNumber)
                        }
                    }) {
                    Icon(
                        item.icon,
                        contentDescription = item.label,
                    )
                }
            },
            label = { Text(item.label) },
            selected = selectedItem == index,
            onClick = { selectedItem = index },
        )
    }
}
    

參考資料：
Android developers - Compose Material 3
Android developers - androidx.compose.material3 #NavigationBar
Material Design 3 - Navigation bar