Bottom navigation，为顶级视图（top-level views）提供快速导航，可以快速的访问和刷新顶级视图
1、样式
Bottom navigation，Android官方文档，推荐的样式
- 底部导航的action通常是3-5个，小于3个推荐使用tab，大于三个推荐使用navigation drawer
- 高度: 56dp， Icon大小: 24 x 24dp
- active状态下，推荐
- icon、字体颜色是primary color（Fixed）
- icon、字体颜色是白色或黑色（Shifting），这种状态下，整个Bottom navigation Bar的颜色是primary color
- ** 在切换的时候，使用cross-fade动画，避免视图间的横向移动 **
2、Fixed、Shifting
Bottom navigation，有两种Mode：分别是Fixed、Shifting
- Fixed：
- 宽度=总宽度/action个数
- 最大宽度: 168dp
- 最小宽度: 80dp
- Padding：6dp（8dp）、10dp、12dp
- 字体大小：12sp、14sp
Fixed bottom navigation bar
- Shifting：
- Active view ：Maximum: 168dp 、Minimum: 96dp
- Inactive view：Maximum: 96dp、Minimum: 56dp
- Padding：6dp above icon (active view), 16dp above and below icon (inactive view)
10dp under text
Shifting bottom navigation bar
3、代码实现
1、依赖
compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0'
2、布局文件
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottomNavigationBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"/>
3、Activity中的实现
注意这两个参数
Mode：
BottomNavigationBar.MODE_SHIFTING：不固定大小
BottomNavigationBar.MODE_FIXED：固定大小
BackgroundStyle：
BottomNavigationBar.BACKGROUND_STYLE_RIPPLE：Bottom navigation的背景色是设置的颜色（ActiveColor）
BottomNavigationBar.BACKGROUND_STYLE_STATIC：Bottom navigation的背景色是白色
区别如下图
</br>
shifting_ripple
shifting_static
shifting_ripple
shifting_static
fixed_ripple
fixed_static
代码如下
BadgeItem badgeItem=new BadgeItem().setBorderWidth(1).setBackgroundColorResource(R.color.colorAccent).setText("2").setHideOnSelect(true);
BottomNavigationBar bottomNavigationBar= (BottomNavigationBar) findViewById(R.id.bottomNavigationBar);
bottomNavigationBar.setFab(floatingActionButton);
bottomNavigationBar.clearAll();
bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_favorite_white_24dp,"喜欢").setActiveColorResource(R.color.colorPrimary).setBadgeItem(badgeItem))
.addItem(new BottomNavigationItem(R.drawable.ic_find_replace_white_24dp,"发现").setActiveColorResource(R.color.colorPrimary))
.addItem(new BottomNavigationItem(R.drawable.ic_location_on_white_24dp, "位置").setActiveColorResource(R.color.colorPrimary))
.setFirstSelectedPosition(0)
.initialise();
bottomNavigationBar.setTabSelectedListener(this);
</br>
3、修改图片和文字的距离？
可以修改BottomNavigationBar的initialise() 方法里的FixedBottomNavigationTab或者ShiftingBottomNavigationTab的fixed_bottom_navigation_item（shifting_bottom_navigation_item）的布局文件。
每个item
addItem()方法
通过addItem()，可以看到item被添加到mBottomNavigationItems里了，
initialise()方法如下
public void initialise() {
...
if (mMode == MODE_FIXED) {
...
for (BottomNavigationItem currentItem : mBottomNavigationItems) {
FixedBottomNavigationTab bottomNavigationTab = new FixedBottomNavigationTab(getContext());
setUpTab(bottomNavigationTab, currentItem, itemWidth, itemWidth);
}
}
...
}
FixedBottomNavigationTab 方法
class FixedBottomNavigationTab extends BottomNavigationTab {
...
@Override
void init() {
...
LayoutInflater inflater = LayoutInflater.from(getContext());
View view = inflater.inflate(R.layout.fixed_bottom_navigation_item, this, true);
...
}
...
}
fixed_bottom_navigation_item
fixed_bottom_navigation_item
修改图片和文字的距离
在副一张图
Elevation
</br>
代码 下载
</br>
