バッジ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ファイル：AppCompatActivityから延長

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

活動：

@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：(badge) custom_viewを示すの

<?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> 

Isteadそれは項目自体だけを示しています。あなたはviewがアクセスし、デバッグモードから見ることができます下

です正しいものであり、正しく設定されています。しかし、どういうわけかBottomNavigationViewは無効化されていません。

Answer 1

@hrskrsはあなたのtxtCountまたはbadgeWrapper自体に高い標高を追加してみてください。 BottomNavigationViewは、画面上のビューよりも高度が高いようです。

BottomNavigationViewの商品にバッジを表示するのに苦労しました。ユーザーが他のアイテムをクリックしたとき、または色合いで定義された同じ色になったとき（色値が定義されていない場合はcolorPrimary）、私自身のバッジ（テキスト値なし）がドロアブル自体の一部になっていました。 BottomNavigationViewの上にあるバッジ/カウンターの色付けに直面したのと同じ問題に遭遇すると思いますが、色合いはアイテム自体に適用され、badgeWrapperは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）があります。

これは、ATTRです（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) 
     } 
    } 
} 

です。XMLのこのコンポーネントのオプションを使用してファイル：描画可能なフォルダからバッジため

<?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 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> 

これがあなたに役立つことを願っています。