《Jetpack Compose系列学习》-16 Compose底部导航栏：APP必备神器

2024-02-19 08:39:14

在Android应用程序中，底部导航栏是一种非常常见的控件，它允许用户在应用程序的不同部分之间轻松导航。在Android View中，实现底部导航栏来一般用TabLayout+ViewPager来实现，在Android 5.0之后，Google推出了新的控件BottomNavigationView，这个控件更美观，而且更容易使用。

Jetpack Compose是谷歌推出的新一代安卓UI库，它使用Kotlin语言编写，具有更现代、更简洁的语法，让我们可以更轻松地构建用户界面。使用Jetpack Compose，我们可以轻松地创建底部导航栏，下面是实现步骤：

在布局文件中添加一个底部导航栏

BottomNavigation {
    val items = listOf(
        BottomNavigationItem(
            icon = { Icon(painter = painterResource(id = R.drawable.ic_home), contentDescription = null) },
            label = { Text("Home") },
            selected = true,
            onClick = {}
        ),
        BottomNavigationItem(
            icon = { Icon(painter = painterResource(id = R.drawable.ic_search), contentDescription = null) },
            label = { Text("Search") },
            selected = false,
            onClick = {}
        ),
        BottomNavigationItem(
            icon = { Icon(painter = painterResource(id = R.drawable.ic_profile), contentDescription = null) },
            label = { Text("Profile") },
            selected = false,
            onClick = {}
        )
    )

    items.forEach { item ->
        BottomNavigationItem(
            icon = { item.icon() },
            label = { item.label() },
            selected = item.selected,
            onClick = item.onClick
        )
    }
}

在代码中处理底部导航栏的点击事件

val bottomNavigationState = rememberBottomNavigationState()
BottomNavigation {
    val items = listOf(
        BottomNavigationItem(
            icon = { Icon(painter = painterResource(id = R.drawable.ic_home), contentDescription = null) },
            label = { Text("Home") },
            selected = bottomNavigationState.selectedIndex == 0,
            onClick = {
                bottomNavigationState.selectedIndex = 0
            }
        ),
        BottomNavigationItem(
            icon = { Icon(painter = painterResource(id = R.drawable.ic_search), contentDescription = null) },
            label = { Text("Search") },
            selected = bottomNavigationState.selectedIndex == 1,
            onClick = {
                bottomNavigationState.selectedIndex = 1
            }
        ),
        BottomNavigationItem(
            icon = { Icon(painter = painterResource(id = R.drawable.ic_profile), contentDescription = null) },
            label = { Text("Profile") },
            selected = bottomNavigationState.selectedIndex == 2,
            onClick = {
                bottomNavigationState.selectedIndex = 2
            }
        )
    )

    items.forEach { item ->
        BottomNavigationItem(
            icon = { item.icon() },
            label = { item.label() },
            selected = item.selected,
            onClick = item.onClick
        )
    }
}