上一篇《仿微信底部Tab欄》中粗略的講了下底部Tab欄的封裝，不少同學(xué)在實(shí)際運(yùn)用中發(fā)現(xiàn)了一些問題，比如我demo中的title用了actionbar，所以如果新建的Activity的Theme不包含actionbar就回出現(xiàn)空指針；再比如假如底部的Tab對(duì)應(yīng)的并不全都是Fragment，而是一部分Fragment，一部分Activity，就不適用了，但辦法總比困難多，這個(gè)也是可以解決的；還有一個(gè)很常見的需求，就是底部有些Tab可能會(huì)有個(gè)小紅點(diǎn)，之前的Demo并沒有把這些問題包含進(jìn)去，后續(xù)有時(shí)間再優(yōu)化，今天來介紹下Google官方的Bottom navigation bars。

首先官方并沒有一個(gè)叫Bottom navigation bars的控件，但是卻出了一套關(guān)于Bottom navigation的標(biāo)準(zhǔn)，可見官方并不推薦把APP設(shè)計(jì)成這個(gè)樣子。如果你非要設(shè)計(jì)成底部Tab欄的方式，我們也不橫加干涉，我出一套標(biāo)準(zhǔn)，參照我的標(biāo)準(zhǔn)來，但官方不提供控件支持，這大概就是Google的內(nèi)心獨(dú)白了。

下面我們看看Bottom navigation bars的設(shè)計(jì)標(biāo)準(zhǔn)吧。

位置
可以放在底部，也可以放在側(cè)邊欄。一般是APP的首頁。

1.png

2.png

Tab個(gè)數(shù)
（√）推薦底部可以放置3到5個(gè)。

3.png

4.png

（×）下面這種2個(gè)或者6個(gè)是不推薦使用的。

5.png

6.png

Icons and text

When theview is in focus, display that view’s icon and text label
When there are onlythree actions, display both icons and text labels at all times
If there arefour or five actions, display inactive views as icons only
選中的Tab同時(shí)顯示icon和text。
如果只有三個(gè)Tab，無論選中未選中，一直顯示icon和文字。
如果有四到五個(gè)Tab，選中的Tab顯示文字和icon，未選中的Tab只顯示icon。

顏色

（√）推薦選中的圖標(biāo)或者文字為APP的主色調(diào)，如果Tab欄本身就是彩色，推薦黑色和白色作為圖標(biāo)或者文字。

7.png

8.png

（×）彩色圖標(biāo)不推薦使用

9.png

10.png

文字
（√）文字要求言簡意賅

11.png

（×）這樣都是不推薦的

12.png

13.png

14.png

尺寸
Bottom navigation bars的高度推薦為56dp，icon的尺寸為24*24，這種Google一般推薦使用8的倍數(shù)。選中tab的字體大小為14sp,未選中為12sp。

15.png

16.png

以上就是相關(guān)的規(guī)范，具體的詳細(xì)內(nèi)容大家可以看這里，但說了這么多，這么炫酷高顏值的Bottom navigation bars哪里有呢，官方又沒有控件，但是github上有啊。
先上幾張圖，大家隨意感受下。

v0.3.1.gif

v0.2.gif

v0.3.gif

有沒有很高顏值，很炫酷。

使用方法也很簡單：

Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}

Step 2.Add the dependency
dependencies { compile 'com.github.RoyWallace:BottomNavigationBar:v0.1'}

Step 3.use it in your layout xml
<etong.bottomnavigation.lib.BottomNavigationBar
android:id="@+id/bottomLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"/>

Step 4.add tab and tabSelected listener
bottomLayout = (BottomNavigationBar) findViewById(R.id.bottomLayout);
//params: int icon,String text,int color
bottomLayout.addTab(R.mipmap.ic_local_movies_white_48dp, "Movies & Tv", 0xff4a5965);
bottomLayout.setOnTabListener(new BottomNavigationBar.TabListener() {
@Override
public void onSelected(int position) {
//...
}
});

具體大家可以看這里。。。

本文首發(fā)：CSDN，次發(fā)：簡書。