如何在Navigation Drawer默认图标下方添加标题

嘿，我来帮你搞定这个需求——给Navigation Drawer默认的汉堡图标下方加上标题，就像你提到的红框效果那样～下面分享两种实用的实现方式，其中自定义布局的方法最灵活可控：

方法一：自定义Toolbar布局（推荐） #

这种方式直接自定义Toolbar的左侧区域，把汉堡图标和下方标题整合在一起，完全符合你的需求。

步骤1：创建自定义Toolbar布局文件 #

新建一个layout/custom_toolbar.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <!-- 垂直布局包裹汉堡图标和下方标题 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingHorizontal="16dp">

        <!-- 汉堡图标，可替换成自己的图标 -->
        <ImageView
            android:id="@+id/nav_drawer_icon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/ic_menu_black_24dp" />

        <!-- 图标下方的标题，可修改文字、大小、颜色 -->
        <TextView
            android:id="@+id/nav_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Menu"
            android:textSize="12sp"
            android:textColor="@android:color/white" />
    </LinearLayout>

    <!-- 可选：Toolbar的主标题，不需要可以删掉 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="主页"
        android:textSize="18sp"
        android:textColor="@android:color/white"
        android:layout_marginStart="16dp"/>

</androidx.appcompat.widget.Toolbar>

步骤2：在Activity布局中引入自定义Toolbar #

打开你的主Activity布局文件（比如activity_main.xml），把默认的ActionBar替换成我们的自定义Toolbar：

<?xml version="1.0" encoding="utf-8"?>
<DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- 主内容区域 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- 引入自定义Toolbar -->
        <include layout="@layout/custom_toolbar" />

        <!-- 你的页面内容容器 -->
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <!-- 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"
        android:fitsSystemWindows="true"
        app:menu="@menu/nav_menu" />

</DrawerLayout>

步骤3：在Activity中配置Toolbar和点击事件 #

打开对应的Activity代码（比如MainActivity.kt），设置Toolbar并给汉堡图标添加打开Drawer的逻辑：

class MainActivity : AppCompatActivity() {
    private lateinit var drawerLayout: DrawerLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 初始化自定义Toolbar
        val toolbar = findViewById<Toolbar>(R.id.custom_toolbar)
        setSupportActionBar(toolbar)
        // 隐藏默认的ActionBar标题，避免和自定义内容冲突
        supportActionBar?.setDisplayShowTitleEnabled(false)

        // 初始化DrawerLayout和汉堡图标点击事件
        drawerLayout = findViewById(R.id.drawer_layout)
        val navIcon = findViewById<ImageView>(R.id.nav_drawer_icon)
        navIcon.setOnClickListener {
            drawerLayout.openDrawer(GravityCompat.START)
        }

        // 可选：处理NavigationView的菜单点击事件
        val navView = findViewById<NavigationView>(R.id.nav_view)
        navView.setNavigationItemSelectedListener { menuItem ->
            // 这里添加你的菜单逻辑，比如跳转页面
            drawerLayout.closeDrawer(GravityCompat.START)
            true
        }
    }
}

方法二：通过Toolbar的自定义左侧视图实现 #

如果你不想完全自定义Toolbar，也可以通过代码给Toolbar添加一个垂直的复合视图作为左侧导航图标：

// 在Activity的onCreate方法中
val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)

// 创建垂直布局的导航视图
val navContainer = LinearLayout(this)
navContainer.orientation = LinearLayout.VERTICAL
navContainer.gravity = Gravity.CENTER
navContainer.setPadding(16, 0, 16, 0)

// 添加汉堡图标
val menuIcon = ImageView(this)
menuIcon.setImageResource(R.drawable.ic_menu_black_24dp)
menuIcon.layoutParams = LinearLayout.LayoutParams(24.dpToPx(), 24.dpToPx())
navContainer.addView(menuIcon)

// 添加下方标题
val titleText = TextView(this)
titleText.text = "Menu"
titleText.textSize = 12f
titleText.setTextColor(Color.WHITE)
titleText.layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
navContainer.addView(titleText)

// 设置为Toolbar的导航视图
toolbar.navigationIcon = null
toolbar.addView(navContainer, 0)

// 添加点击事件
navContainer.setOnClickListener {
    drawerLayout.openDrawer(GravityCompat.START)
}

// 扩展函数：dp转px
fun Int.dpToPx(): Int {
    return (this * resources.displayMetrics.density).toInt()
}

注意事项 #

• 你可以替换汉堡图标为自己的资源文件，只需要修改android:src或者setImageResource的参数
• 标题的文字、大小、颜色都可以根据你的UI需求调整
• 如果使用Java，只需要把Kotlin代码转换成对应的Java语法即可

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