如何为NavigationView导航抽屉添加可交互的显示隐藏提示箭头

问题根因 #

你第二种方案箭头消失是因为NavigationView默认开启了clipChildren、clipToPadding属性，超出控件边界的内容会被自动裁剪，你给箭头设置的负边距让它位于NavigationView外部，因此被裁剪不可见。同时NavigationView本身是FrameLayout，你给箭头加的ConstraintLayout约束属性不会生效。

实现方案 #

第一步：修改XML布局 #

给NavigationView添加关闭裁剪的属性，同时删除箭头无用的约束属性，修改后代码如下：

<androidx.drawerlayout.widget.DrawerLayout
    <!-- 保留你原来的DrawerLayout其他属性不变 -->
    >

    <!-- 主界面内容布局 保留你原来的代码 -->
    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/drawer_nav"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/black"
        app:menu="@menu/navigation"
        app:itemTextColor="@color/white"
        app:itemIconTint="@color/white"
        android:layout_gravity="start"
        <!-- 新增两个关闭裁剪的属性 -->
        android:clipChildren="false"
        android:clipToPadding="false">

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/arrowopenClose"
            android:layout_width="20dp"
            android:layout_height="30dp"
            android:layout_marginEnd="-20dp"
            android:layout_marginTop="400dp"
            android:layout_gravity="right"
            android:src="@drawable/ic_baseline_keyboard_arrow_right_24"
            android:background="@drawable/customarrow"
            android:clickable="true" />

    </com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

如果担心后续NavigationView菜单内容和箭头冲突，也可以直接把箭头移到NavigationView同级，和NavigationView一起放在一个宽wrap_content的FrameLayout里，同样能实现效果。

第二步：添加交互逻辑 #

在Activity/Fragment中添加抽屉状态监听和点击逻辑，示例代码（Kotlin）如下：

// 箭头点击打开抽屉
arrowopenClose.setOnClickListener {
    drawerLayout.openDrawer(GravityCompat.START)
}

// 监听抽屉状态，展开时隐藏箭头，关闭时显示箭头
drawerLayout.addDrawerListener(object : DrawerLayout.SimpleDrawerListener() {
    override fun onDrawerOpened(drawerView: View) {
        super.onDrawerOpened(drawerView)
        // 如需支持用户永久隐藏，可以在此处加SP存储的判断
        arrowopenClose.visibility = View.GONE
    }

    override fun onDrawerClosed(drawerView: View) {
        super.onDrawerClosed(drawerView)
        // 如需支持用户永久隐藏，可以在此处加SP存储的判断
        arrowopenClose.visibility = View.VISIBLE
    }
})

// 用户主动隐藏箭头的方法示例
fun hideArrowForever() {
    getSharedPreferences("app_config", Context.MODE_PRIVATE)
        .edit()
        .putBoolean("hide_drawer_arrow", true)
        .apply()
    arrowopenClose.visibility = View.GONE
}

实现效果 #

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