Android 如何在高于默认BottomNavigationView的视图上添加指示器？ 背景

我正在尝试使用更大的BottomNavigationView（高度更大），同时使每个项目图标都有一个选中的顶部指示器

类似的东西，但高度更高：

在屏幕截图上看到它有点困难，但是指示器显示在BottomNavigationView项的顶部，就在BottomNavigationView阴影的正下方

问题 当我设置一个较大的高度时，我得到的每个项目的高度仍然较小，因此指示器不看顶部：

不仅如此，因为我使用了

itemBackground

来设置每个项目的背景，使其具有指示器，所以它现在没有用于单击效果的背景

我发现了什么 我发现，关于改变高度的高度。唯一的解决方案是替代库的尺寸标注。在这种情况下，仅此而已：

<dimen name="design_bottom_navigation_height" tools:override="true">...</dimen>

dimens.xml

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/container" 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:layout_width="match_parent"
    android:layout_height="match_parent" tools:context=".MainActivity">

    <TextView
        android:id="@+id/message" android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin" android:text="@string/title_home"
        app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view" android:layout_width="0dp"
        android:layout_height="@dimen/tabs_height" android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp" android:background="?android:attr/windowBackground" app:itemBackground="@drawable/activity_main__tab_background"
        app:labelVisibilityMode="unlabeled" app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

<dimen name="tabs_height">64dp</dimen>
<dimen name="design_bottom_navigation_height" tools:override="true">@dimen/tabs_height</dimen>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item android:gravity="top">
                <shape android:shape="rectangle">
                    <size android:height="2dp"/>
                    <solid android:color="#07a5ea"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

64dp
@尺寸/高度

活动\u main\u选项卡\u background.xml

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/container" 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:layout_width="match_parent"
    android:layout_height="match_parent" tools:context=".MainActivity">

    <TextView
        android:id="@+id/message" android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin" android:text="@string/title_home"
        app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view" android:layout_width="0dp"
        android:layout_height="@dimen/tabs_height" android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp" android:background="?android:attr/windowBackground" app:itemBackground="@drawable/activity_main__tab_background"
        app:labelVisibilityMode="unlabeled" app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

<dimen name="tabs_height">64dp</dimen>
<dimen name="design_bottom_navigation_height" tools:override="true">@dimen/tabs_height</dimen>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item android:gravity="top">
                <shape android:shape="rectangle">
                    <size android:height="2dp"/>
                    <solid android:color="#07a5ea"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

问题

---

如何使指示器位于顶部，同时具有更大的底部导航视图且不丢失单击效果？

最佳解决方案是在运行时从kotlin代码更改项目imageView的边距 这是密码

private fun navigationImagesMargin(view: View) {
        if (view is ViewGroup) {
            for (i in 0 until view.childCount) {
                val child = view.getChildAt(i)
                navigationImagesMargin(child)
            }
        } else if (view is ImageView) {
            val param = view.layoutParams as ViewGroup.MarginLayoutParams
            param.topMargin = convertDpToPx(14)
            view.layoutParams = param
        } 
    }
fun convertDpToPx(dp: Int): Int {
    return Math.round(dp * (resources.displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT))
}

在底部导航视图的onCreate函数调用中

navigationImagesMargin(binding.spBottomNavigation)

但此解决方案要求每次视图重新验证时调用

navigationImagesMargin

函数，即在onItemClick侦听器中，这里是该函数的代码

 binding.spBottomNavigation.setOnNavigationItemSelectedListener { it->
            binding.spBottomNavigation.post {
                navigationImagesMargin(binding.spBottomNavigation)
            }
            true
        }

这样，图像将停留在您第一次发射时瞄准的位置

这是一个包含完整代码的微型回购的链接

---

尝试了相同的方法…通过单击事件、顶部指示器和自定义高度按预期运行。我对这个问题有什么误解吗？你们看到点击效应了吗？你看不到额外的空间吗？怎么会？请参阅此处的附加项目：。请试一试。设置一个比我设置的更大的高度。试着点击这些项目。我刚刚从dimens文件中删除了注释…对于这行@dimen/tabs_height，它正在工作…@NaitikSoni，我不明白。什么在起作用？指示器位于顶部，带有点击事件和自定义高度。一切都很顺利。对不起，我忘了这个。如果您有一个微型Github示例要展示给我，我可以测试它并将其标记为已回答。抱歉，我已经编辑了答案，以包含一个微型git repo的链接，这似乎是可行的，但它有一个问题，即它添加了片段，以便将其合并（文本置于文本之上），而存储库没有将链接放在此处。你在这里写的代码是唯一需要的吗？是的。为什么会有这样的问题呢？你是否在片段的顶部添加了片段，并使其透明，或者什么的？嗨@android developer我已经添加了导航组件支持，你可以查看它。。。如果是的话，别忘了把我的答案标为接受答案。。欢迎随时光临，我的朋友！