如何修改androidx DrawerLayout控件菜单字体大小颜色及添加自定义页脚

核心说明 #

官方原生NavigationView没有提供类似app:headerLayout的直接配置页脚布局的XML属性，以下两种方案可以满足你的需求：

方案1：自定义侧滑栏布局（推荐，实现类headerLayout的页脚挂载效果） #

该方案将侧滑栏的内容改为垂直线性布局，上层放菜单区域的NavigationView，下层放自定义的页脚布局，完全灵活控制页脚的样式和交互，不需要修改menu的逻辑。

步骤1：修改主XML布局 #

将原来DrawerLayout内的NavigationView替换为如下结构：

<?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"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 侧滑栏整体布局 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:orientation="vertical"
        android:background="@color/colorBlack">

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:fitsSystemWindows="true"
            android:theme="@style/menuTextStyle"
            android:background="@color/colorBlack"
            app:itemTextColor="@color/colorWhite"
            app:itemIconTint="@color/colorWhite"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />

        <!-- 自定义页脚布局，使用体验和headerLayout完全一致 -->
        <include
            android:id="@+id/nav_footer"
            layout="@layout/nav_footer_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>
</androidx.drawerlayout.widget.DrawerLayout>

步骤2：新建自定义页脚布局nav_footer_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="wrap_content"
    android:orientation="vertical"
    android:paddingHorizontal="16dp"
    android:paddingVertical="12dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="by:"
        android:textColor="#99FFFFFF"
        android:textSize="12sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="afterdarkgrafx.com"
        android:textColor="#66FFFFFF"
        android:textSize="10sp"
        android:layout_marginTop="2dp"/>

</LinearLayout>

步骤3：清理menu冗余配置 #

删除activity_main_drawer.xml中最后那个包含nav_footer1、nav_footer2的group节点，页脚内容已经移到自定义布局中。

方案2：轻量修改现有menu页脚样式 #

如果不想改动现有布局结构，可以通过动态设置SpannableString的方式修改页脚item的字体大小和颜色，代码示例如下（Kotlin）：

val navView = findViewById<NavigationView>(R.id.nav_view)
val menu = navView.menu
// 找到页脚两个item
val footerItem1 = menu.findItem(R.id.nav_footer1)
val footerItem2 = menu.findItem(R.id.nav_footer2)

// 修改第一个页脚item的样式
val span1 = SpannableString(footerItem1.title.toString())
// 设置字体颜色
span1.setSpan(ForegroundColorSpan(ContextCompat.getColor(this, R.color.your_custom_color)), 0, span1.length, 0)
// 设置字体大小，第二个参数true代表单位为sp
span1.setSpan(AbsoluteSizeSpan(12, true), 0, span1.length, 0)
footerItem1.title = span1

// 修改第二个页脚item的样式
val span2 = SpannableString(footerItem2.title.toString())
span2.setSpan(ForegroundColorSpan(ContextCompat.getColor(this, R.color.your_custom_color2)), 0, span2.length, 0)
span2.setSpan(AbsoluteSizeSpan(10, true), 0, span2.length, 0)
footerItem2.title = span2

Java实现逻辑完全一致，仅语法不同。

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