将顶部栏添加到底部导航视图项答案

【问题标题】：Add a top bar to a bottom navigation view item将顶部栏添加到底部导航视图项
【发布时间】：2019-07-23 09:33:06
【问题描述】：

当它被选中时，我想在每个底部导航视图项目的顶部放置一个栏。如下图，但我没有找到方法。

我不知道该怎么做

【问题讨论】：

您可以创建一个选择器并将线条添加到您选择的drawable中
您必须创建自定义可绘制对象并将选项卡指示器用作免费场景
一个不太正确的答案：您想要实现的目标看起来像是一个颠倒的 TabLayout。使用 app:tabIndicatorGravity="top" 属性将 TabLayout 放在屏幕底部。

标签： android kotlin bottomnavigationview

【解决方案1】：

你可以通过在底部导航上添加一个视图来实现，查看下面的代码，你也可以使用这个在底部导航项上添加任何视图，例如徽章、小图标等。

布局栏的xml

<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="2dp"
    android:layout_gravity="center_horizontal"
    android:background="@color/red"
    android:gravity="center"/>

控制器（显示/隐藏）

class BottomNavigationHelper {

    fun showBadge(context: Context, bottomNavigationView: BottomNavigationView, @IdRes itemId: Int) {
        removeBadge(bottomNavigationView, itemId)
        val itemView = bottomNavigationView.findViewById<BottomNavigationItemView>(itemId)
        val badge = LayoutInflater.from(context).inflate(R.layout.layout_red_badge, bottomNavigationView, false)
        itemView.addView(badge)
    }

    fun removeBadge(bottomNavigationView: BottomNavigationView, @IdRes itemId: Int) {
        val itemView = bottomNavigationView.findViewById<BottomNavigationItemView>(itemId)
        if (itemView.childCount == 3) {
            itemView.removeViewAt(2)
        }
    }
}

示例调用

BottomNavigationHelper().showBadge(mContext, bottomNavigationView, R.id.navigation_home)

【讨论】：

【解决方案2】：

根据 Payam Kokabi 的建议，您可以使用 selector 来确定要显示的背景可绘制对象。以下几行应该可以工作，

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bottom_item_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/bottom_item" android:state_checked="false"/>
</selector>

P.S - 您可以使用，将选择器设置为项目背景，

app:itemBackground="@drawable/bottom_item_selector"

【讨论】：

请您详细说明“@drawable/bottom_item_selected”。在我的底部导航栏中，未选中时，项目将显示为灰色，选中时显示为橙色，我还需要像 Amanda 所问的那样在顶部添加额外的笔划。

【解决方案3】：

使用 Farouq Afghani 的回答解决移除徽章的问题。

class BottomNavigationHelper {

companion object {
    var previousItemId: Int = 0
}

fun showBadge(
    context: Context,
    bottomNavigationView: BottomNavigationView,
    @IdRes itemId: Int
) {
    if (previousItemId != 0) {
        removeBadge(bottomNavigationView, previousItemId)
    }
    previousItemId = itemId
    val itemView = bottomNavigationView.findViewById<BottomNavigationItemView>(itemId)
    val badge = LayoutInflater.from(context)
        .inflate(R.layout.layout_nav_top_line, bottomNavigationView, false)
    itemView.addView(badge)
}

fun removeBadge(bottomNavigationView: BottomNavigationView, @IdRes itemId: Int) {
    val itemView = bottomNavigationView.findViewById<BottomNavigationItemView>(itemId)
    if (itemView.childCount == 3) {
        itemView.removeViewAt(2)
    }
  }
}

【讨论】：