如何在现有ConstraintLayout Activity中添加Navigation Drawer

架构老林

2026-5-29

没问题！要在保留现有布局的同时添加Navigation Drawer，核心思路是把你的现有布局嵌套在DrawerLayout（根布局）里，再添加上侧边栏的NavigationView组件。下面是具体的实现步骤和修改后的代码：

步骤1：修改主Activity的XML布局

把原来的ConstraintLayout作为DrawerLayout的第一个子布局（主内容区域），然后添加NavigationView作为侧边栏。注意要引入正确的命名空间，同时确保你的项目已经依赖了对应的UI库（AndroidX的com.google.android.material:material或者旧版的support库）。

修改后的完整XML代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 
    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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:openDrawer="start">

    <!-- 你的原有主内容布局 -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <EditText
            android:id="@+id/editText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:ems="10"
            android:hint="@string/edit_message"
            android:inputType="textPersonName"
            app:layout_constraintEnd_toStartOf="@+id/button2"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:onClick="sendMessage"
            android:text="@string/button_send"
            app:layout_constraintBaseline_toBaselineOf="@+id/editText"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/editText" />

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="0dp"
            android:layout_height="146dp"
            android:layout_marginBottom="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/button2"
            app:layout_constraintVertical_bias="0.0">

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="204dp"
                android:layout_height="139dp"
                android:baselineAlignBottom="false"
                android:src="@drawable/monetwaterloo" />

        </LinearLayout>

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:onClick="sendPhoto"
            android:text="@string/button_photo_send"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/linearLayout"
            app:layout_constraintVertical_bias="0.04000002" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:onClick="checkDatabase"
            android:text="@string/check_database_items"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/button4" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- Navigation Drawer 侧边栏 -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header_main" <!-- 可选：侧边栏头部布局 -->
        app:menu="@menu/activity_main_drawer" /> <!-- 侧边栏菜单 -->

</androidx.drawerlayout.widget.DrawerLayout>

步骤2：准备必要的资源文件

侧边栏菜单：在res/menu目录下创建activity_main_drawer.xml，定义侧边栏的菜单项：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_home"
            android:title="首页" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_gallery"
            android:title="相册" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_slideshow"
            android:title="幻灯片" />
    </group>

    <item android:title="其他">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_share"
                android:title="分享" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_send"
                android:title="发送" />
        </menu>
    </item>
</menu>

侧边栏头部（可选）：在res/layout目录下创建nav_header_main.xml，定义侧边栏顶部的头部区域：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="8dp"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="8dp"
        android:text="用户名"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="user@example.com" />

</LinearLayout>

步骤3：修改MainActivity代码

在MainActivity.java中设置ActionBar的抽屉开关，处理侧边栏的交互：

import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.drawerlayout.widget.DrawerLayout;
import com.google.android.material.navigation.NavigationView;
import android.view.MenuItem;
import android.view.Gravity;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    private ActionBarDrawerToggle toggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 初始化DrawerLayout和Toggle
        drawerLayout = findViewById(R.id.drawer_layout);
        toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.navigation_drawer_open, R.string.navigation_drawer_close);

        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();

        // 显示ActionBar的汉堡菜单按钮
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        // 处理NavigationView的菜单点击事件
        NavigationView navigationView = findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(item -> {
            int id = item.getItemId();

            // 根据菜单项ID处理逻辑
            if (id == R.id.nav_home) {
                // 首页逻辑
            } else if (id == R.id.nav_gallery) {
                // 相册逻辑
            } else if (id == R.id.nav_slideshow) {
                // 幻灯片逻辑
            } else if (id == R.id.nav_share) {
                // 分享逻辑
            } else if (id == R.id.nav_send) {
                // 发送逻辑
            }

            // 关闭侧边栏
            drawerLayout.closeDrawer(Gravity.START);
            return true;
        });
    }

    // 处理ActionBar按钮点击，打开/关闭侧边栏
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (toggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

关键注意事项

如果你用的是旧版的Android Support库，需要把布局中的androidx.drawerlayout.widget.DrawerLayout换成android.support.v4.widget.DrawerLayout，com.google.android.material.navigation.NavigationView换成android.support.design.widget.NavigationView，同时代码中的依赖也要对应调整。
确保你的strings.xml中添加了侧边栏的打开/关闭提示文字：

<string name="navigation_drawer_open">打开导航抽屉</string>
<string name="navigation_drawer_close">关闭导航抽屉</string>

如果你的Activity没有使用ActionBar，可以改用Toolbar，并把Toggle绑定到Toolbar上。

这样修改后，你的原有布局会完全保留，同时在标题栏左侧会出现汉堡菜单按钮，点击即可打开Navigation Drawer侧边栏啦！

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