BottomNavigationView的安卓库

àì夳堔傛蜴生んèń 2022-06-07 04:50 200阅读 0赞

一个增强BottomNavigationView的安卓库。

## 运行效果： ##

![1501290018126526.gif][]

## 使用说明： ##

![Untitled.gif][1501290018126526.gif]

![Untitled.gif][]

![1501290179191749.png][]

![1501290214506613.png][]

With ViewPager

![with\_view\_pager.gif][with_view_pager.gif]

Add ViewBadger

![view\_badger.gif][view_badger.gif]

### Sdk Version ###

compileSdkVersion >= 25

### 导入本库 ###

#### Gradle例子: ####

步骤 1. 在工程根目录的 `build.gradle` 最后添加如下代码:

allprojects { 
             repositories { 
                 ...
                 maven {  url "https://jitpack.io" }
             }
         }

步骤 2. 添加依赖

compile 'com.github.ittianyu:BottomNavigationViewEx:1.2.2'

#### 手动导入: ####

下载文件 [BottomNavigationViewEx.java][] 并复制到你的工程中。

## 开始使用 ##

在 xml 布局中添加自定义控件:

<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
             android:id="@+id/bnve"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_alignParentBottom="true"
             android:background="@color/colorPrimary"
             app:itemIconTint="@color/selector_item_color"
             app:itemTextColor="@color/selector_item_color"
             app:menu="@menu/menu_navigation_with_view_pager" />

在 `Activity` 中绑定控件:

BottomNavigationViewEx bnve = (BottomNavigationViewEx) findViewById(R.id.bnve);

#### 禁止所有动画效果 ####

bnve.enableAnimation(false);
         bnve.enableShiftingMode(false);
         bnve.enableItemShiftingMode(false);

#### 自定义图标和文本大小 ####

bnve.setIconSize(widthDp, heightDp);
         bnve.setTextSize(sp);

#### 和 ViewPager 绑定\#\#\#\# ####

// set adapter
         adapter = new VpAdapter(getSupportFragmentManager(), fragments);
         bind.vp.setAdapter(adapter);
          
         // binding with ViewPager
         bind.bnve.setupWithViewPager(bind.vp);

#### 添加带数字的小红点 ####

Gradle 中加入 badge 库的依赖

compile 'q.rorbin:badgeview:1.1.0'

和底部控件绑定

// add badge
         addBadgeAt(2, 1);
          
         private Badge addBadgeAt(int position, int number) { 
             // add badge
             return new QBadgeView(this)
                     .setBadgeNumber(number)
                     .setGravityOffset(12, 2, true)
                     .bindTarget(bind.bnve.getBottomNavigationItemView(position))
                     .setOnDragStateChangedListener(new Badge.OnDragStateChangedListener() { 
                         @Override
                         public void onDragStateChanged(int dragState, Badge badge, View targetView) { 
                             if (Badge.OnDragStateChangedListener.STATE_SUCCEED == dragState)
                                 Toast.makeText(BadgeViewActivity.this, R.string.tips_badge_removed, Toast.LENGTH_SHORT).show();
                         }
                     });
         }

## 功能 ##

<table style="border-collapse:collapse; border-spacing:0px; background-color:transparent; border:1px rgb(51,51,51); margin:0px 0px 20px; padding:0px; font-family:verdana,arial,sans-serif; font-size:11px; max-width:100%"> 
 <thead style="border:0px; margin:0px; padding:0px"> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <th style="padding:6px 13px; text-align:left; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(222,222,222)"> methods</th> 
   <th style="padding:6px 13px; text-align:left; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(222,222,222)"> description</th> 
  </tr> 
 </thead> 
 <tbody style="border:0px; margin:0px; padding:0px"> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> enableAnimation</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 开启或关闭点击动画(文字放大效果和图片移动效果)。 默认为 true.</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> enableItemShiftingMode</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 开始或关闭子菜单位移模式。 如果为 true，除了当前选中项，其他项的文本将会隐藏。 当菜单数大于3时，默认为 true。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> enableShiftingMode</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 开始或关闭导航条位移模式。如果为 true，选中项和其他项的宽度不一样。当菜单数大于3时，默认为 true。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> getBottomNavigationItemView</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 获取位于 position 的私有成员变量 mButton。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> getBottomNavigationItemViews</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 获取私有成员变量 mButtons。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> getCurrentItem</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 获取当前选中项的索引。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> getIconAt</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 获取位于 position 的图片。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> getItemCount</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 获取子项个数。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> getItemHeight</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 获取菜单高度。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> getLargeLabelAt</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 获取位于 position 的大标签. 每个子项包含两个标签，一个大的，一个小的。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> getSmallLabelAt</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 获取位于 position 的小标签. 每个子项包含两个标签，一个大的，一个小的。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> getMenuItemPosition</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 获取子菜单的索引。如果找不到，返回 -1。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> getOnNavigationItemSelectedListener</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 获取 OnNavigationItemSelectedListener。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> setCurrentItem</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 设置当前选中项。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> setIconMarginTop</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 设置 icon 的 MarginTop，用于调节图标垂直位置。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> setIconSize</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 设置所有的子项图标大小。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> setIconSizeAt</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 设置位于 position 的图标的大小。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> setIconsMarginTop</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 设置所有 icon 的 MarginTop，用于调节图标垂直位置。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> setIconTintList</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 设置图片的渲染颜色列表(Selector)</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> setIconVisibility</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 设置图片可见性。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> setItemBackground</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 设置子项的背景。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> setItemHeight</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 设置子项高度。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> setLargeTextSize</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 设置所有子项的大标签文本大小。每个子项有两个标签，一个大的，一个小的。当子项未选中时，显示小标签；选中时，显示大标签。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> setSmallTextSize</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 设置所有子项的小标签文本大小。每个子项有两个标签，一个大的，一个小的。当子项未选中时，显示小标签；选中时，显示大标签。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> setTextSize</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 设置所有子项的大和小标签文本大小。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> setTextTintList</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 设置子项 TextView 的颜色。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> setTextVisibility</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> 设置文本可见性。</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px; background-color:rgb(246,248,250)"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> setTypeface</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; background-color:rgb(255,255,255)"> 设置所有子项的 TextView 字体</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-right-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:rgb(198,203,209); border-right-color:initial; border-bottom-color:initial; border-left-color:initial; margin:0px; padding:0px"> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em"> setupWithViewPager</td> 
   <td style="padding:6px 13px; border:1px solid rgb(223,226,229); margin:0px; font-size:1em; word-break:break-all"> 和 ViewPager 绑定，当 任何一个选中项改变时，都会自动改变另一项。</td> 
  </tr> 
 </tbody> 
</table>

*  源码：[https://github.com/ittianyu/BottomNavigationViewEx][https_github.com_ittianyu_BottomNavigationViewEx]

[1501290018126526.gif]: /images/20220607/ad44e7bbfeef434a971d49248ee94d55.png
[Untitled.gif]: /images/20220607/cd21c7c9871c4f759b2c672c5f280f11.png
[1501290179191749.png]: /images/20220607/5da5b6befe014c51adc29b600370e23e.png
[1501290214506613.png]: /images/20220607/e332973d715d425db0708095afadbf0a.png
[with_view_pager.gif]: /images/20220607/5593002cd1d941a2b8a291bd40dda3a2.png
[view_badger.gif]: /images/20220607/6d21071dd4a04d7c9199002a8988b3bb.png
[BottomNavigationViewEx.java]: https://raw.githubusercontent.com/ittianyu/BottomNavigationViewEx/master/widget/src/main/java/com/ittianyu/bottomnavigationviewex/BottomNavigationViewEx.java
[https_github.com_ittianyu_BottomNavigationViewEx]: https://github.com/ittianyu/BottomNavigationViewEx