徽章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> 

我希望這可以幫助你。