一. 引言

在 Android 开发中，很多 App 都会有底部导航栏（Bottom Navigation），用于在不同模块之间快速切换。今天我们就用 BottomNavigationView 来搭建一个简单的 App 框架，包含 首页、书架、发现、我的 四个模块。

二. 项目结构设计

在这个示例中，我们采用最基础的结构：

MainActivity
├─ FrameLayout(fragment_container)
└─ BottomNavigationView(bottom_navigation)

• FrameLayout：用于承载各个 Fragment 的内容
• BottomNavigationView：底部导航栏，控制不同模块切换

四个模块对应四个 Fragment：

1. HomeFragment（首页）
2. LibraryFragment（书架）
3. DiscoverFragment（发现）
4. MineFragment（我的）

这种结构清晰明了，适合大部分 App 框架。

三. 布局文件

我们首先在 activity_main.xml 中定义布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_menu"
        app:itemIconTint="@color/bottom_nav_icon_color"
        app:itemTextColor="@color/bottom_nav_text_color"
        app:labelVisibilityMode="labeled"/>
</LinearLayout>

• itemIconTint 和 itemTextColor 使用 ColorStateList，实现选中和未选中状态的颜色切换
• labelVisibilityMode="labeled" 保证文字始终可见

1️⃣ 菜单文件 bottom_nav_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/tab_home"
        android:title="首页" />
    <item
        android:id="@+id/nav_library"
        android:icon="@drawable/tab_library"
        android:title="书架" />
    <item
        android:id="@+id/nav_discover"
        android:icon="@drawable/tab_discover"
        android:title="发现" />
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/tab_profile"
        android:title="我的" />
</menu>

2️⃣ ColorStateList 资源

图标颜色 res/color/bottom_nav_icon_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#A0D8EF" android:state_checked="true"/>
    <item android:color="#999999"/>
</selector>

文字颜色 res/color/bottom_nav_text_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#A0D8EF" android:state_checked="true"/>
    <item android:color="#999999"/>
</selector>

这样 BottomNavigationView 就能在选中时显示主题色，未选中显示灰色。

四. MainActivity 代码实现

class MainActivity : AppCompatActivity() {

    private val homeFragment = HomeFragment()
    private val libraryFragment = LibraryFragment()
    private val discoverFragment = DiscoverFragment()
    private val profileFragment = ProfileFragment()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge() // 让布局延伸到屏幕底部
        supportActionBar?.hide()
        setContentView(R.layout.activity_main)
        setFragment(homeFragment)

        val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_navigation)
        bottomNav.setOnItemSelectedListener { item ->
            when (item.itemId) {
                R.id.nav_home -> setFragment(homeFragment)
                R.id.nav_library -> setFragment(libraryFragment)
                R.id.nav_discover -> setFragment(discoverFragment)
                R.id.nav_profile -> setFragment(profileFragment)
            }
            true
        }
    }

    private fun setFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commit()
    }
}

• enableEdgeToEdge() 用于处理底部导航栏和安全区域
• setOnItemSelectedListener 切换不同 Fragment，实现底部导航栏的点击逻辑

五. 结语

通过这篇博客，我们完成了一个最基础的 App 框架：

• 四个 Fragment + BottomNavigationView
• ColorStateList 控制图标和文字的选中状态
• labelVisibilityMode 保证文字始终显示
• 布局简洁明了，方便在后续项目中扩展

这种结构非常适合快速搭建一个可用的 Android App，后续可以在 Fragment 里添加具体业务逻辑。