Android 使用Bottom Navigation

現在的App設計中，很多都會使用我們的底部導航，也就是我們經常說的底部Tab導航，稱為Bottom

Navigation，在iOS中，這是一種自帶的默認導航結構，而在Android中，以前是沒有這種導航的，而在

今年，Android的開發者網站中，Google官方已經給出了官方的底部導航的設計。然而，我們卻沒有找到

Google官方的Demo和其他的介紹，在我們的支持庫里面也沒有相關的組件出來。也就是說，Google只是

給出了一個設計的指導，而沒有給出相關的組件。我們今天就來看看這個到底如何做？

Bottom Navigation是什么樣子的

根據官方的介紹，我們的地步導航應該是這個樣子的（其實如果做過iOS的話，你就應該比較了解了），如下圖：

另外，還有一點，我們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);
    }
}

最終，我們的效果就是如下:

這些只是最基本的功能，此外，你還可以添加動態的隱藏，客戶化動畫效果等等。更多功能呢請參照第三方文檔。

來自：http://www.jianshu.com/p/0b9e3db06c31