如何在CardView布局对应的Activity中添加Navigation Bar

嘿，我来帮你搞定这个问题～ 下面我会分两种常用的方式来教你添加Navigation Bar，一种是官方推荐的Jetpack Navigation组件，另一种是自定义底部导航栏，你可以根据需求选：

方式一：使用Android Jetpack Navigation Component（官方推荐） #

这种方式适合需要页面跳转的场景，能自动管理页面栈，非常省心。

1. 先添加依赖 #

在你的app级别的build.gradle（或build.gradle.kts）里加入Navigation相关依赖：

dependencies {
    // Navigation Component
    implementation "androidx.navigation:navigation-fragment-ktx:2.7.7"
    implementation "androidx.navigation:navigation-ui-ktx:2.7.7"
}

同步一下Gradle，确保依赖生效。

2. 创建导航图 #

在res/navigation目录下创建nav_graph.xml（如果没有navigation目录就新建一个），用来定义页面跳转关系：

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.yourpackage.HomeFragment"
        android:label="Home" />

    <fragment
        android:id="@+id/profileFragment"
        android:name="com.yourpackage.ProfileFragment"
        android:label="Profile" />

    <!-- 可以添加更多Fragment -->
</navigation>

3. 修改你的content_main.xml布局 #

把原来的RelativeLayout调整为包含NavHostFragment和BottomNavigationView的结构，注意让BottomNavigationView固定在底部：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/viewBg">

    <!-- 主内容区域：NavHostFragment用来承载页面 -->
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottom_nav"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <!-- 底部导航栏 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        app:menu="@menu/bottom_nav_menu" />
</RelativeLayout>

4. 创建底部导航菜单 #

在res/menu目录下创建bottom_nav_menu.xml，定义导航项：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/ic_home"
        android:title="首页" />
    <item
        android:id="@+id/profileFragment"
        android:icon="@drawable/ic_profile"
        android:title="我的" />
</menu>

5. 在Activity中关联导航栏和导航图 #

打开你的MainActivity，在onCreate方法里添加关联代码：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.content_main)

        val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        val navController = navHostFragment.navController
        val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav)
        bottomNav.setupWithNavController(navController)
    }
}

方式二：自定义底部导航栏（适合简单场景） #

如果不需要页面跳转，只是几个按钮触发简单操作，就可以用这种方式。

修改你的content_main.xml，直接在底部加一个LinearLayout（或ConstraintLayout）作为导航栏：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/viewBg">

    <!-- 原来的CardView等内容，记得加paddingBottom避免被导航栏遮挡 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/custom_bottom_nav"
        android:orientation="vertical"
        android:paddingBottom="56dp"> <!-- 56dp是标准导航栏高度，可调整 -->

        <!-- 这里放你的CardView等内容 -->
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardElevation="4dp"
            android:layout_margin="16dp">
            <!-- CardView内部内容 -->
        </androidx.cardview.widget.CardView>
    </LinearLayout>

    <!-- 自定义底部导航栏 -->
    <LinearLayout
        android:id="@+id/custom_bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:orientation="horizontal"
        android:gravity="center">

        <ImageView
            android:id="@+id/btn_home"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_home"
            android:scaleType="centerInside"/>

        <ImageView
            android:id="@+id/btn_profile"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_profile"
            android:scaleType="centerInside"/>
    </LinearLayout>
</RelativeLayout>

然后在Activity里给按钮加点击事件：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.content_main)

        findViewById<ImageView>(R.id.btn_home).setOnClickListener {
            // 点击首页按钮的操作
        }

        findViewById<ImageView>(R.id.btn_profile).setOnClickListener {
            // 点击我的按钮的操作
        }
    }
}

注意事项 #

• 不管用哪种方式，都要确保主内容区域不会被导航栏遮挡，可以通过paddingBottom或者layout_above属性来调整。
• 如果使用Material组件的BottomNavigationView，记得在主题里设置Theme.MaterialComponents.DayNight或者相关Material主题，不然可能会出现样式问题。

内容的提问来源于stack exchange，提问作者David Adam