Android官方底部Tab欄設計規範

標籤：

上一篇《仿底部Tab欄》中粗略的講了下底部Tab欄的封裝，不少同學在實際運用中發現了一些問題，比如我demo中的title用了actionbar，所以如果建立的Activity的Theme不包含actionbar就回出現null 指標；再比如假如底部的Tab對應的並不全都是Fragment，而是一部分Fragment，一部分Activity，就不適用了，但辦法總比困難多，這個也是可以解決的；還有一個很常見的需求，就是底部有些Tab可能會有個小紅點，之前的Demo並沒有把這些問題包含進去，後續有時間再最佳化，今天來介紹下Google官方的Bottom navigation bars。

首先官方並沒有一個叫Bottom navigation bars的控制項，但是卻出了一套關於Bottom navigation bars的標準，可見官方並不推薦把APP設計成這個樣子。如果你非要設計成底部Tab欄的方式，我們也不橫加幹涉，我出一套標準，參照我的標準來，但官方不提供控制項支援，這大概就是Google的內心獨白了。

下面我們看看Bottom navigation bars的設計標準吧。

位置

可以放在底部，也可以放在側邊欄。一般是APP的首頁。

Tab個數

（√）推薦底部可以放置3到5個。

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

Icons and text

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

顏色

（√）推薦選中的表徵圖或者文字為APP的主色調，如果Tab欄本身就是彩色，推薦黑色和白色作為表徵圖或者文字。

（×）彩色表徵圖不推薦使用

文字

文字要求言簡意賅

（×）這樣都是不推薦的

尺寸

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

以上就是相關的規範，具體的詳細內容大家可以看這裡，但說了這麼多，這麼炫酷高顏值的Bottom navigation bars哪裡有呢，官方又沒有控制項，但是github上有啊。

先上幾張圖，大家隨意感受下。

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

使用方法也很簡單：

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
include 布局

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

Android官方底部Tab欄設計規範