上一篇《仿微信底部Tab欄》中粗略的講了下底部Tab欄的封裝,不少同學在實際運用中發現了一些問題,比如我demo中的title用了actionbar,所以如果新建的Activity的Theme不包含actionbar就回出現空指針;再比如假如底部的Tab對應的并不全都是Fragment,而是一部分Fragment,一部分Activity,就不適用了,但辦法總比困難多,這個也是可以解決的;還有一個很常見的需求,就是底部有些Tab可能會有個小紅點,之前的Demo并沒有把這些問題包含進去,后續有時間再優化,今天來介紹下Google官方的Bottom navigation bars。
首先官方并沒有一個叫Bottom navigation bars的控件,但是卻出了一套關于Bottom navigation的標準,可見官方并不推薦把APP設計成這個樣子。如果你非要設計成底部Tab欄的方式,我們也不橫加干涉,我出一套標準,參照我的標準來,但官方不提供控件支持,這大概就是Google的內心獨白了。
下面我們看看Bottom navigation bars的設計標準吧。
位置
可以放在底部,也可以放在側邊欄。一般是APP的首頁。
Tab個數
(√)推薦底部可以放置3到5個。
(×)下面這種2個或者6個是不推薦使用的。
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同時顯示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.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) {
//...
}
});
具體大家可以看這里。。。
本文首發:CSDN,次發:簡書。