android.support.design.widget.BottomNavigationView菜单项触摸区域过大求助

嘿，我来帮你搞定这个选中项空间溢出的问题！结合你给出的XML代码，我整理了几个实用的解决方向：

• 检查自定义文字样式的参数
  你设置了itemTextAppearanceActive和itemTextAppearanceInactive两个自定义样式，很可能是选中状态下的文字尺寸、内边距设置过大导致溢出。打开你的styles.xml，调整这两个样式的参数：

  <style name="BottomNavigationView.Active" parent="TextAppearance.Design.BottomNavigation">
      <!-- 缩小文字尺寸，移除不必要的内边距 -->
      <item name="android:textSize">12sp</item>
      <item name="android:padding">0dp</item>
      <item name="android:ellipsize">end</item> <!-- 文字过长时自动省略 -->
  </style>
  <style name="BottomNavigationView" parent="TextAppearance.Design.BottomNavigation">
      <item name="android:textSize">10sp</item>
      <item name="android:padding">0dp</item>
  </style>
  

• 限制每个菜单项的最大宽度
  如果是菜单项整体宽度超出，可以通过代码强制限制每个item的最大宽度，确保它们均匀分配BottomNavigationView的宽度：

  val navView = findViewById<BottomNavigationView>(R.id.navigation)
  val screenWidth = resources.displayMetrics.widthPixels
  val itemCount = navView.menu.size()
  // 给每个item分配均等的最大宽度，可根据需求调整预留边距
  val maxItemWidth = (screenWidth / itemCount) - 16 
  
  val menuContainer = navView.getChildAt(0) as ViewGroup
  for (i in 0 until itemCount) {
      val itemView = menuContainer.getChildAt(i)
      itemView.maxWidth = maxItemWidth
      itemView.layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT
  }
  

• 优化labelVisibilityMode和菜单项内容

  • 如果你不需要所有项都显示文字，可以把app:labelVisibilityMode改成selected_labeled，只有选中项显示文字，这样能减少横向空间占用；
  • 检查@menu/navigation里的菜单项，确保文字不要过长，图标尺寸不要过大（建议用24x24dp的图标）。

• 调整BottomNavigationView的整体内边距
  给BottomNavigationView添加左右内边距，避免边缘项溢出屏幕：

  <android.support.design.widget.BottomNavigationView
      android:id="@+id/navigation"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:paddingLeft="8dp"
      android:paddingRight="8dp"
      app:labelVisibilityMode="labeled"
      app:itemTextAppearanceActive="@style/BottomNavigationView.Active"
      app:itemTextAppearanceInactive="@style/BottomNavigationView"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:menu="@menu/navigation" />
  

建议先从检查文字样式开始，这是最常见的原因，不行再尝试其他方法！

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