底部导航 Bottom navigation

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>

参考：
GitHub BottomNavigation