Android开发：如何实现点击展开的底部导航效果？

刚接触Android开发碰到这种导航需求很正常，你一开始想到Bottom Navigation View + Fragments的方向是对的，这是基础框架，但要实现点击「工具」展开更多按钮的效果，需要额外做一些扩展。下面给你两种比较常用的最佳实现方案，还有一些参考方向：

方案一：利用BottomSheetBehavior实现展开式面板 #

这是比较推荐的官方风格实现方式，完全符合Material Design规范：

• 核心思路：把需要展开的额外工具按钮放在一个BottomSheet（底部面板）中，默认处于完全隐藏状态；点击BottomNavigationView里的「工具」项时，触发BottomSheet向上滑出显示所有按钮，再次点击则收起。
• 具体步骤：
  1. 在布局文件中添加BottomSheet，设置app:behavior_peekHeight="0dp"（默认完全隐藏），并关联BottomSheetBehavior：

     <LinearLayout
         android:id="@+id/bottom_sheet_tools"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:background="@color/white"
         android:padding="16dp"
         app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
         
         <!-- 这里放你需要的额外工具按钮，比如扫码、设置等 -->
         <ImageView
             android:id="@+id/btn_scan"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/ic_scan"
             android:layout_marginHorizontal="12dp"/>
         <ImageView
             android:id="@+id/btn_settings"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/ic_settings"
             android:layout_marginHorizontal="12dp"/>
         <!-- 更多按钮... -->
     </LinearLayout>
     

  2. 在代码中获取BottomSheetBehavior实例，给「工具」菜单项设置点击事件，控制面板的展开/收起：

     val bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.bottom_sheet_tools))
     val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav)
     
     bottomNav.setOnItemSelectedListener { menuItem ->
         if (menuItem.itemId == R.id.nav_tools) {
             // 切换面板状态：展开则收起，收起则展开
             if (bottomSheetBehavior.state == BottomSheetBehavior.STATE_EXPANDED) {
                 bottomSheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN
             } else {
                 bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
             }
             true
         } else {
             // 处理其他导航项的Fragment切换逻辑
             // 比如根据itemId切换对应的Fragment
             true
         }
     }
     

  3. 可以自定义BottomSheet的样式，比如添加顶部圆角、阴影，让它和BottomNavigationView衔接更自然。

方案二：自定义可展开的BottomNavigationView #

如果希望额外按钮直接集成在BottomNavigationView内部，而不是弹出独立面板，可以选择自定义扩展：

• 核心思路：继承BottomNavigationView，添加展开/折叠的逻辑，动态切换不同的菜单资源，或者控制菜单项的显示/隐藏。
• 具体步骤：
  1. 创建自定义View类：

     class ExpandableBottomNavView @JvmOverloads constructor(
         context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
     ) : BottomNavigationView(context, attrs, defStyleAttr) {
         
         private var isExpanded = false
         // 定义正常状态和展开状态的菜单资源
         private val normalMenuId = R.menu.bottom_nav_normal
         private val expandedMenuId = R.menu.bottom_nav_expanded
         
         init {
             // 默认加载正常状态的菜单
             menuInflater.inflate(normalMenuId, menu)
         }
         
         fun toggleExpand() {
             isExpanded = !isExpanded
             menu.clear()
             // 切换加载对应的菜单
             menuInflater.inflate(if (isExpanded) expandedMenuId else normalMenuId, menu)
             // 添加过渡动画，提升用户体验
             startAnimation(AnimationUtils.loadAnimation(context, if (isExpanded) R.anim.fade_in else R.anim.fade_out))
         }
     }
     

  2. 在布局中使用这个自定义View，然后给「工具」项设置点击事件调用toggleExpand()：

     val expandableBottomNav = findViewById<ExpandableBottomNavView>(R.id.expandable_bottom_nav)
     expandableBottomNav.setOnItemSelectedListener { menuItem ->
         if (menuItem.itemId == R.id.nav_tools) {
             expandableBottomNav.toggleExpand()
             true
         } else {
             // 处理其他导航项的Fragment切换逻辑
             true
         }
     }
     

• Android Developers官方文档里的BottomSheetBehavior章节，详细讲解了底部面板的各种状态、自定义配置和事件监听；
• Material Design官方指南中的「Bottom Navigation」部分，有关于扩展导航的设计规范和交互建议；
• 可以参考GitHub上的开源Expandable Bottom Navigation控件的实现逻辑，学习他们的动画处理、状态管理和适配细节（不用直接依赖库，看源码理解思路更适合新手打基础）。

• 不管用哪种方案，都要保证过渡动画流畅，避免出现卡顿或跳帧；
• 适配不同屏幕尺寸，尤其是小屏手机，展开后的按钮不要超出可视区域；
• 处理折叠状态时的菜单选中状态，避免用户混淆当前所在页面；
• 如果用BottomSheet方案，记得处理面板展开时的返回键事件，让用户可以通过返回键收起面板。

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