现在的App设计中，很多都会使用我们的底部导航，也就是我们经常说的底部Tab导航，称为Bottom
Navigation，在iOS中，这是一种自带的默认导航结构，而在Android中，以前是没有这种导航的，而在
今年，Android的开发者网站中，Google官方已经给出了官方的底部导航的设计。然而，我们却没有找到
Google官方的Demo和其他的介绍，在我们的支持库里面也没有相关的组件出来。也就是说，Google只是
给出了一个设计的指导，而没有给出相关的组件。我们今天就来看看这个到底如何做？

Bottom Navigation是什么样子的

根据官方的介绍，我们的地步导航应该是这个样子的（其实如果做过iOS的话，你就应该比较了解了），如下图：
!

pic1

pic2

pic3

pic4

另外，还有一点，我们Android的底部导航，在我们滑动上面的内容的时候，会动态隐藏掉的。在向上滑动的时候，需要隐藏掉tab,在向下滑动的时候，显示底部的tab。而且有了我们的底部导航，就不应该在内容区域在使用
滑动手势来操作。
说了这么多，开始开动了。

使用BottomBar来进行计算

通过比较，我们选择第三方库bottomTab 来实现的
底部导航，首先，我们需要在我们的项目里面build.gradle里面增加这么一行

compile 'com.roughike:bottom-bar:1.3.3'

我们的build.gradle看起来就是这个样子的

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"

    defaultConfig {
        applicationId "com.youqiantu.android"
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.roughike:bottom-bar:1.3.3'
}

然后，我们就可以做我们的Layout了。
首先我们准备好我们几个tab的图片，放到我们的res/layout 或者是res/mipmap底下，为了方便起见，
我这里使用的是默认的launcher的icon。
然后创建文件res/menu/mbottombar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/tab_summary"
        android:icon="@mipmap/ic_launcher"
        android:title="@string/tab_summary_title"
        />

    <item
        android:id="@+id/tab_config"
        android:icon="@mipmap/ic_launcher"
        android:title="@string/tab_config_title"
        />

    <item
        android:id="@+id/tab_discover"
        android:icon="@mipmap/ic_launcher"
        android:title="@string/tab_discover_title"
        />

    <item
        android:id="@+id/tab_mine"
        android:icon="@mipmap/ic_launcher"
        android:title="@string/tab_mine_title"
        />
</menu>

然后在我们的mainActivity里面，我们使用我们的BottmBar就行了。

package com.youqiantu.android;

import android.os.Bundle;
import android.support.annotation.IdRes;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;
import android.widget.Toast;

import com.roughike.bottombar.BottomBar;
import com.roughike.bottombar.OnMenuTabClickListener;

public class MainActivity extends AppCompatActivity {
    private BottomBar mBottomBar;
    private TextView mMessageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mMessageView = (TextView) findViewById(R.id.messageView);

        mBottomBar = BottomBar.attach(this, savedInstanceState);
        mBottomBar.setItemsFromMenu(R.menu.bottombar_menu, new OnMenuTabClickListener() {
            @Override
            public void onMenuTabSelected(@IdRes int menuItemId) {
                mMessageView.setText(getMessage(menuItemId, false));
            }

            @Override
            public void onMenuTabReSelected(@IdRes int menuItemId) {
                Toast.makeText(getApplicationContext(), getMessage(menuItemId, true), Toast.LENGTH_SHORT).show();
            }
        });

        // Setting colors for different tabs when there's more than three of them.
        // You can set colors for tabs in three different ways as shown below.
        mBottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));
        mBottomBar.mapColorForTab(1, 0xFF5D4037);
        mBottomBar.mapColorForTab(2, "#7B1FA2");
        mBottomBar.mapColorForTab(3, "#FF5252");
//        mBottomBar.mapColorForTab(4, "#FF9800");
    }

    private String getMessage(int menuItemId, boolean isReselection) {
        String message = "Content for ";

        switch (menuItemId) {
            case R.id.tab_summary:
                message += "盘点";
                break;
            case R.id.tab_config:
                message += "配置";
                break;
            case R.id.tab_discover:
                message += "发现";
                break;
            case R.id.tab_mine:
                message += "我的";
                break;
        }

        if (isReselection) {
            message += " WAS RESELECTED! YAY!";
        }

        return message;
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);

        // Necessary to restore the BottomBar's state, otherwise we would
        // lose the current tab on orientation change.
        mBottomBar.onSaveInstanceState(outState);
    }
}

最终，我们的效果就是如下:

screen

这些只是最基本的功能，此外，你还可以添加动态的隐藏，客户化动画效果等等。更多功能呢请参照第三方
文档。