度娘了一圈发现基本上都是TabLayout或者其他的导航栏添加角标，所以写这篇博客记录下来。
先来看下实现的效果图：


代码也是很简单的
BottomNavigationMenuView中的每一个Tab就是一个FrameLayout，所以我们可以在上面随意添加View、这样也就可以实现我们的角标了。

//获取整个的NavigationView
BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);

//这里就是获取所添加的每一个Tab(或者叫menu)，
View tab = menuView.getChildAt(3);
BottomNavigationItemView itemView = (BottomNavigationItemView) tab;

//加载我们的角标View，新创建的一个布局
View badge = LayoutInflater.from(this).inflate(R.layout.menu_badge, menuView, false);

//添加到Tab上
itemView.addView(badge);

menu_badge.xml file:
这里这个布局的大小，其实也就是每一个Tab的大小了。把显示数量的TextView水平居中，这样也就刚好在Tab的中间了(剩下就看你自己想怎么放了….)

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”>

<TextView
android:id=”@+id/tv_msg_count”
android:layout_width=”15dp”
android:layout_height=”15dp”
android:layout_gravity=”center”
android:layout_marginLeft=”@dimen/dp_10″
android:layout_marginTop=”@dimen/dp_3″
android:background=”@drawable/bg_red_circle_10″
android:gravity=”center”
android:textColor=”@color/white”
android:textSize=”@dimen/sp_12″
android:visibility=”gone” />

设置角标的数量
TextView count = (TextView) badge.findViewById(R.id.tv_msg_count);
count.setText(String.valueOf(1));

//如果没有消息，不需要显示的时候那只需要将它隐藏即可
count.setVisibility(View.GONE);

 

  - 在点击事件中完成各个menu的点击事件，实现Fragment的替换，另外三个点击事件内容类似
  


<div class="top-box hide">
  <div class="alert-info">
  </div>
</div>

```

`<span class=“hljs-comment”>// 去掉menu大于3个后的动画</span> BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

<span class=“hljs-comment”>// 导航 menu 点击事件</span> bottomNavigationView.setOnNavigationItemSelectedListener(<span class=“hljs-keyword”>new</span> BottomNavigationView.OnNavigationItemSelectedListener() { <span class=“hljs-meta”>@Override</span> <span class=“hljs-function”><span class=“hljs-keyword”>public</span> <span class=“hljs-keyword”>boolean</span> <span class=“hljs-title”>onNavigationItemSelected</span><span class=“hljs-params”>(@NonNull MenuItem item)</span> </span>{ <span class=“hljs-keyword”>switch</span> (item.getItemId()){ <span class=“hljs-keyword”>case</span> R.id.download: <span class=“hljs-keyword”>if</span>(lastShowFragment!=<span class=“hljs-number”>0</span>){ replaceFragment(lastShowFragment,<span class=“hljs-number”>0</span>); lastShowFragment=<span class=“hljs-number”>0</span>; } <span class=“hljs-keyword”>break</span>; <span class=“hljs-keyword”>case</span> R.id.game: <span class=“hljs-keyword”>break</span>; <span class=“hljs-keyword”>case</span> R.id.search: <span class=“hljs-keyword”>break</span>; <span class=“hljs-keyword”>case</span> R.id.shopping: <span class=“hljs-keyword”>break</span>; }

          &lt;span class="hljs-comment">// 默认 false &lt;/span>
          &lt;span class="hljs-comment">// false 的话 下面颜色不会变化&lt;/span>
           &lt;span class="hljs-keyword">return&lt;/span> &lt;span class="hljs-keyword">true&lt;/span>;
        }
    });

`

    
    
      - 在 Activity 中 的 onCreate 中完成 Fragment 数组的装填，并在 Activity 中显示第一个 Fragment
      
    
    
    <div class="top-box hide">
      <div class="alert-info">
      </div>
    </div>
    
    ```
();

        for(int i=0;i<4;i++){
            fragments.add(FruitFragment.
newFragment());
        }

        lastShowFragment=0;

        /**
         * 在 Activity 中加载第一个 Fragment
         */
        getSupportFragmentManager()
                .beginTransaction()
                .add(R.id.relative_layout,fragments.get(0))
                .show(fragments.get(0))
                .commit();

        Log.d(TAG,&quot;initFragment over&quot;);
    }
" data-snippet-id="ext.c7cfe07c5cc0181afa3ec78bde2dd5c6" data-snippet-saved="false" data-codota-status="done">`&lt;span class="hljs-comment">/**
     * 初始化 Fragment 并在 Activity 中显示第一个 Fragment
     */&lt;/span>
    &lt;span class="hljs-function">&lt;span class="hljs-keyword">private&lt;/span> &lt;span class="hljs-keyword">void&lt;/span> &lt;span class="hljs-title">initFragment&lt;/span>&lt;span class="hljs-params">()&lt;/span>&lt;/span>{

        fragments=&lt;span class="hljs-keyword">new&lt;/span> ArrayList&lt;&gt;();

        &lt;span class="hljs-keyword">for&lt;/span>(&lt;span class="hljs-keyword">int&lt;/span> i=&lt;span class="hljs-number">0&lt;/span>;i&lt;&lt;span class="hljs-number">4&lt;/span>;i++){
            fragments.add(FruitFragment.
newFragment());
        }

        lastShowFragment=&lt;span class="hljs-number">0&lt;/span>;

        &lt;span class="hljs-comment">/**
         * 在 Activity 中加载第一个 Fragment
         */&lt;/span>
        getSupportFragmentManager()
                .beginTransaction()
                .add(R.id.relative_layout,fragments.get(&lt;span class="hljs-number">0&lt;/span>))
                .show(fragments.get(&lt;span class="hljs-number">0&lt;/span>))
                .commit();

        Log.d(TAG,&lt;span class="hljs-string">"initFragment over"&lt;/span>);
    }
`

  - 根据记录最后在 Activity 中显示的 Fragment 的变量 lastShowFragment ，和 menu 需要的 Fragment 完成替换
  


<div class="top-box hide">
  <div class="alert-info">
  </div>
</div>

```

` <span class=“hljs-comment”>/** * 替换 Activity 中的 Fragment * <span class=“hljs-doctag”>@param</span> lastShowFragment * <span class=“hljs-doctag”>@param</span> index */</span> <span class=“hljs-function”><span class=“hljs-keyword”>private</span> <span class=“hljs-keyword”>void</span> <span class=“hljs-title”>replaceFragment</span><span class=“hljs-params”>(<span class=“hljs-keyword”>int</span> lastShowFragment,<span class=“hljs-keyword”>int</span> index)</span></span>{ FragmentTransaction transaction=getSupportFragmentManager().beginTransaction(); transaction.hide(fragments.get(lastShowFragment));

    &lt;span class="hljs-comment">// 确认需要的 Fragment 是否已添加&lt;/span>
    &lt;span class="hljs-keyword">if&lt;/span>(!fragments.get(index).isAdded()){
        transaction.add(R.id.relative_layout, fragments.get(index));
    }
    transaction.show(fragments.get(index)).commitAllowingStateLoss();

    Log.d(TAG,&lt;span class="hljs-string">"replaceFragment  lastShowFragment : "&lt;/span>+lastShowFragment+&lt;span class="hljs-string">" index : "&lt;/span>+index);
}

`

    
    
      - 效果 <div class="image-package">
          <div class="image-container">
            <div class="image-container-fill">
            </div>
            
            <div class="image-view" data-width="1440" data-height="2560">
              ![](//upload-images.jianshu.io/upload_images/10671242-47f3a38801caf349.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
            </div>
          </div>
          
          <div class="image-caption">
            Screenshot_1519977714.png
          </div>
        </div>
      
    
    
    <div class="image-package">
      <div class="image-container">
        <div class="image-container-fill">
        </div>
        
        <div class="image-view" data-width="1440" data-height="2560">
          ![](//upload-images.jianshu.io/upload_images/10671242-39f2d3916b5158ac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
        </div>
      </div>
      
      <div class="image-caption">
        Screenshot_1519977720.png
      </div>
    </div>
    
    <div class="image-package">
      <div class="image-container">
        <div class="image-container-fill">
        </div>
        
        <div class="image-view" data-width="1440" data-height="2560">
          ![](//upload-images.jianshu.io/upload_images/10671242-454d7c2a6953af6a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
        </div>
      </div>
      
      <div class="image-caption">
        Screenshot_1519977726.png
      </div>
    </div>
    
    <div class="image-package">
      <div class="image-container">
        <div class="image-container-fill">
        </div>
        
        <div class="image-view" data-width="1440" data-height="2560">
          ![](//upload-images.jianshu.io/upload_images/10671242-aa014eb5d55a09bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
        </div>
      </div>
      
      <div class="image-caption">
        Screenshot_1519977732.png
      </div>
    </div>
    
    <hr />
    
    #### 小结
    
    

      [BottomBarLayout 第三方 可实现角标](https://link.jianshu.com?t=http%3A%2F%2Fblog.csdn.net%2Fchay_chan%2Farticle%2Fdetails%2F73715607)
    

    
    

      BottomNavigationViewHelper [参考博客](https://www.jianshu.com/p/e2a8791e80d6)
    

    
    

      BottomNavigationView + Fragment [参考博客](https://link.jianshu.com?t=http%3A%2F%2Fblog.csdn.net%2Fqq_35366908%2Farticle%2Fdetails%2F72457909)
    

    
    

      转自：https://www.jianshu.com/p/0bdcd16c4d68
    

    
    

      转自：https://blog.csdn.net/a_zhon/article/details/78334515
    

    
    

      参考: https://www.jianshu.com/p/e2a8791e80d6
    

  </div>
</div>

💬 评论