底部导航思路

底部导航是每个 app 必备的，有的 app 底部导航做的很精美，很有诱人，于是我去特意看看底部导航都有那些玩法

目前大家做 底部导航 一般都是如下这几种方法：

• 传统做法

1. 对 TextView 做状态切换
2. RadioGroup 单选按钮组
3. FragmentTabHost

• Material Design 时代开始

4. 官方的 BottomNavigatioinBar
5. 最新的 BottomNavigatioinView
6. N 多基于 BottomNavigatioinBar 扩展的绚丽的库

其实用的话都可以，但是个人觉得还是 NavigationBar 更多强大些

本文涉及内容：

• 开源库： BottomNavigation
  常规布局的底部导航实现
• 开源库： EasyNavigation
  中间 item 特殊需求的底部导航实现
• 使用 clipChildren 自己画 item 超出 底部导航 view

---

著名的开源库： BottomNavigation

github： BottomNavigation

用过这个库的都说好，尤其是动画效果设计，衔接很优秀，没用过的朋友至少应该过来看看，说不准以后用的上

先看一下 BottomNavigation 的3种效果：

标准 加了item切换动画 加了背景切换动画

大家仔细看，这个 BottomNavigation 在 item 切换时提供了背景颜色和 item 样式切换的动画，图2和图3分别就是，2个效果也可以叠加

item 样式切换样式：

/**
* 共有5个类型
* 1. 默认带 item 动画 -> MODE_DEFAULT 
* 2. 不带 item 动画 -> MODE_FIXED 
* 3. 只有选中的 item 显示文字，其他的不显示 -> MODE_SHIFTING
* 4. 所有的 item  都不显示文字，不带动画 -> MODE_FIXED_NO_TITLE
* 5. 所有的 item  都不显示文字，带动画 -> MODE_SHIFTING_NO_TITLE 
*/
 bottomNavigationBar.setMode()

背景颜色切换样式：

/**
* 共有3个类型
* 1. 默认带 背景颜色 动画 -> BACKGROUND_STYLE_DEFAULT 
* 2. 不带 背景颜色 动画 -> BACKGROUND_STYLE_STATIC 
* 3. 带 背景颜色 动画 -> BACKGROUND_STYLE_RIPPLE 
*/
bottomNavigationBar.setBackgroundStyle(bgSpinner.selectedItemPosition)

样式设置基本上就是这2个了，下面我们来看看怎么用

1. 添加依赖

compile 'com.ashokvarma.android:bottom-navigation-bar:2.1.0'

2. 添加 item

                bottomNavigationBar
                        .addItem(BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(numberBadgeItem))
                        .addItem(BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books").setActiveColorResource(R.color.teal))
                        .addItem(BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music").setActiveColorResource(R.color.blue).setBadgeItem(shapeBadgeItem))
                        .addItem(BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV").setActiveColorResource(R.color.brown))
                        .addItem(BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games").setActiveColorResource(R.color.grey))
                        .initialise()
                bottomNavigationBar.selectTab(lastSelectedPosition, true)

BottomNavigationItem 就是每个 item 的 view 类型了，setActiveColorResource 是设置背景切换动画时要切换到的颜色，initialise 刷新 UI

3. 添加角标

BottomNavigation 这个库很 nice 的，添加角标功能已经给我们实现好了，setBadgeItem 方法把角标对象传进去

BottomNavigation 内置2种角标：numberBadgeItem 数字 、 ShapeBadgeItem 图形

numberBadgeItem 支持设置 文字，外边框大小颜色，背景颜色，还是很贴心的

numberBadgeItem.setText() 可以直接更新数字

ShapeBadgeItem 支持设置 shape 样式，大小，位置，

numberBadgeItem 、 ShapeBadgeItem 设置 setHideOnSelect 可以在 item 被选中时决定要不是显示角标

若是有其他需求，请参考 ShapeBadgeItem 自己写一个，ShapeBadgeItem 也是继承 BadgeItem 实现的

4. 添加监听

.setTabSelectedListener(object:BottomNavigationBar.OnTabSelectedListener{
                    override fun onTabReselected(position: Int) {
                        //重复选择的item
                    }
                    override fun onTabUnselected(position: Int) {
                       //上一次选中的item
                    }
                    override fun onTabSelected(position: Int) {
                        //当前选中的item
                    }
                })

基本就是这些，大家要是还有疑问请看官方 demo

下面这篇文章是自己动手给 BottomNavigation 添加角标

• Android 给BottomNavigationView添加未读消息红点提示

---

著名的开源库： EasyNavigation

可以实现下面的效果：

中间的 item 可以突出来的，EasyNavigation 库也可以设置角标的，EasyNavigation 具体使用请看：

• Android底部导航栏，几行代码实现

---

使用 clipChildren 自己画 item 超出 底部导航 view

图中是现在大多外卖app都会有的一个购物车效果。其中红框中的部分高度略高于旁边的View。那么这时就可以使用clipChildren来实现。首先在布局根节点设置android:clipChildren="false"，在使用android:layout_gravity="xxx"控制超出部分。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"> <!--这里-->

    <LinearLayout
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_gravity="bottom" <--这里
            android:layout_marginLeft="10dp"
            android:layout_width="48dp"
            android:layout_height="60dp">

            <ImageView
                android:src="@drawable/icon_cart"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <TextView
                android:layout_marginTop="6dp"
                android:layout_alignParentRight="true"
                android:background="@drawable/icon_spot"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                tools:text="1"
                android:textSize="12sp"
                android:gravity="center"
                android:textColor="#ffffff"/>

        </RelativeLayout>

        <TextView
            android:layout_marginLeft="10dp"
            android:textColor="#9bd435"
            tools:text="￥5.00"
            android:textStyle="bold"
            android:textSize="18sp"
            android:gravity="center_vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" />

        <TextView
            android:layout_width="110dp"
            android:textColor="#ffffff"
            android:gravity="center"
            android:textSize="16sp"
            android:text="去购物车"
            android:background="#9bd435"
            android:layout_height="match_parent" />

    </LinearLayout>

</RelativeLayout>