徽章BottomNavigationView

Question

我想添加一个徽章，到BottomNavigationView项目不使用任何库，但不知何故BottomNavigationView没有显示徽章（custom_view）

main_view.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="com.hrskrs.test.MainActivity"> 

    <FrameLayout 
    android:id="@+id/container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

    <android.support.design.widget.BottomNavigationView 
    android:id="@+id/bottom_navigation" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    app:itemBackground="@color/colorPrimary" 
    app:itemIconTint="@color/colorAccent" 
    app:itemTextColor="@color/colorPrimaryDark" 
    app:menu="@menu/bottom_navigation_main" /> 
</RelativeLayout> 

bottom_navigation_menu .XML：

<menu xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto"> 
    <item 
    android:id="@+id/item_test" 
    android:icon="@mipmap/ic_launcher" 
    android:title="action1" 
    app:showAsAction="always" /> 

    <item 
    android:enabled="true" 
    android:icon="@mipmap/ic_launcher" 
    android:title="action2" 
    app:showAsAction="ifRoom" /> 

    <item 
    android:enabled="true" 
    android:icon="@mipmap/ic_launcher" 
    android:title="action3" 
    app:showAsAction="ifRoom" /> 
</menu> 

活动从AppCompatActivity扩展：

@Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
    menu = bottomNavigationView.getMenu(); 
    menu.clear(); 
    getMenuInflater().inflate(R.menu.bottom_navigation_main, menu); 
    MenuItem item = menu.findItem(R.id.item_test); 
    item = MenuItemCompat.setActionView(item, R.layout.custom_view); 
    RelativeLayout badgeWrapper = (RelativeLayout) MenuItemCompat.getActionView(item); 

    TextView textView = (TextView) badgeWrapper.findViewById(R.id.txtCount); 
    textView.setText("99+"); 

    return super.onCreateOptionsMenu(menu); 
    } 

custom_view.xml：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    style="@android:style/Widget.ActionButton" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@android:color/transparent" 
    android:clickable="true" 
    android:gravity="center" 
    android:orientation="vertical"> 

    <ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:contentDescription="Notification Icon" 
    android:gravity="center" 
    android:src="@mipmap/ic_launcher" /> 

    <TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/txtCount" 
    android:gravity="right" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/ic_badge" 
    android:text="55" 
    android:textColor="#ffffffff" 
    android:textSize="12sp" /> 
</RelativeLayout> 

显示(badge) custom_view的Istead它只显示了项目本身：

下面你可以从调试模式访问的view是看正确的一个，它被正确设置。然而不知何故BottomNavigationView没有被无效：

Answer 1

@hrskrs尝试在您txtCount或badgeWrapper本身增加了更高的海拔。 BottomNavigationView似乎比屏幕上的视图有更高的高度。

我努力在BottomNavigationView项目上显示徽章。当用户点击其他项目或成为色调中定义的相同颜色（如果未定义colorPrimary），我的徽章（没有任何文本值）作为绘图本身的一部分变成灰色。 我认为你会遇到同样的问题，我遇到了BottomNavigationView菜单项上的徽章/计数器着色问题，因为色彩颜色将应用于物品本身，并且作为MenuItem的一部分的徽章包装将采用色调（变为灰色当你点击任何你不想要的东西时，我猜）。

看看我的答案在这里：Is there a way to display notification badge on Google's official BottomNavigationView menu items introduced in API 25?

我用了一个ImageView的徽章，但你可以有你的badgeWrapper RelativeView，而不是ImageView的。

Answer 2

我设法使BottomNavigationView带有徽章。这是我的代码（Kotlin）。

这是面板（来自BottomNavigationView继承）

/** Bottom menu with badge */ 
class AdvancedBottomNavigationView(context: Context, attrs: AttributeSet) : BottomNavigationView(context, attrs) { 

    private companion object { 
     const val BADGE_MIN_WIDTH = 16   // [dp] 
     const val BADGE_MARGIN_TOP = 5   // [dp] 
     const val BADGE_MARGIN_LEFT = 15  // [dp] 
    } 

    @Inject internal lateinit var uiCalculator: UICalculatorInterface 

    private val bottomMenuView: BottomNavigationMenuView 

    init { 
     // Get access to internal menu 
     val field = BottomNavigationView::class.java.getDeclaredField("mMenuView") 
     field.isAccessible = true 
     bottomMenuView = field.get(this) as BottomNavigationMenuView 

     App.injections.presentationLayerComponent!!.inject(this) 

     @SuppressLint("CustomViewStyleable") 
     val a = context.obtainStyledAttributes(attrs, R.styleable.advanced_bottom_navigation_bar) 
     val badgeLayoutId = a.getResourceId(R.styleable.advanced_bottom_navigation_bar_badge_layout, -1) 
     a.recycle() 

     initBadges(badgeLayoutId) 
    } 

    /** 
    * [position] index of menu item */ 
    fun setBadgeValue(position: Int, count: Int) { 
     val menuView = bottomMenuView 
     val menuItem = menuView.getChildAt(position) as BottomNavigationItemView 

     val badge = menuItem.findViewById(R.id.bottom_bar_badge) 
     val badgeText = menuItem.findViewById(R.id.bottom_bar_badge_text) as TextView 

     if (count > 0) { 
      badgeText.text = count.toString() 
      badge.visibility = View.VISIBLE 
     } else { 
      badge.visibility = View.GONE 
     } 
    } 

    /** 
    * Select menu item 
    * [position] index of menu item to select 
    */ 
    fun setSelected(position: Int) = bottomMenuView.getChildAt(position).performClick() 

    private fun initBadges(badgeLayoutId: Int) { 
     // Adding badges to each Item 
     val menuView = bottomMenuView 
     val totalItems = menuView.childCount 

     val oneItemAreaWidth = uiCalculator.getScreenSize(context).first/totalItems 

     val marginTop = uiCalculator.dpToPixels(context, BADGE_MARGIN_TOP) 
     val marginLeft = uiCalculator.dpToPixels(context, BADGE_MARGIN_LEFT) 

     for (i in 0 until totalItems) { 
      val menuItem = menuView.getChildAt(i) as BottomNavigationItemView 

      // Add badge to every item 
      val badge = View.inflate(context, badgeLayoutId, null) as FrameLayout 
      badge.visibility = View.GONE 
      badge.minimumWidth = uiCalculator.dpToPixels(context, BADGE_MIN_WIDTH) 

      val layoutParam = FrameLayout.LayoutParams(
       FrameLayout.LayoutParams.WRAP_CONTENT, 
       FrameLayout.LayoutParams.WRAP_CONTENT) 
      layoutParam.gravity = Gravity.START 

      layoutParam.setMargins(oneItemAreaWidth/2 + marginLeft, marginTop, 0, 0) 
      menuItem.addView(badge, layoutParam) 
     } 
    } 
} 

这是ATTR。

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <declare-styleable name="advanced_bottom_navigation_bar"> 
     <attr name="badge_layout" format="reference|integer" /> 
    </declare-styleable> 
</resources> 

背景从绘制文件夹徽章：

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <shape> 
      <solid android:color="#ff0000" /> 
      <corners android:radius="10dp" /> 
     </shape> 
    </item> 
</selector> 

徽章本身：与此组件选项xml文件

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 
    android:id="@+id/bottom_bar_badge" 
    android:layout_height="20dp" 
    android:layout_width="20dp" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:background="@drawable/bcg_badge" 
    > 
<TextView 
    android:id="@+id/bottom_bar_badge_text" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="1" 
    android:textSize="10sp" 
    android:textColor="@android:color/white" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:textAlignment="center" 
    android:layout_gravity="center"/> 
</FrameLayout> 

，这是一个例子如何使用您的代码：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 
    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="su.ivcs.ucim.presentationLayer.userStories.mainScreen.view.MainActivity"> 

    <su.ivcs.ucim.presentationLayer.common.advancedBottomNavigationView.AdvancedBottomNavigationView 
     android:id="@+id/bottom_navigation" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     app:itemBackground="@android:color/white" 
     app:itemIconTint="@color/main_screen_tabs_menu_items" 
     app:itemTextColor="@color/main_screen_tabs_menu_items" 
     app:menu="@menu/main_screen_tabs_menu" 
     app:badge_layout = "@layout/common_badge" 

     app:layout_constraintTop_toBottomOf="@+id/fragmentsContainer" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" 
     /> 

</android.support.constraint.ConstraintLayout> 

我希望这可以帮助你。