Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android官方底部Tab欄設計規范

Android官方底部Tab欄設計規范

編輯:關於Android編程

上一篇《仿微信底部Tab欄》中粗略的講了下底部Tab欄的封裝,不少同學在實際運用中發現了一些問題,比如我demo中的title用了actionbar,所以如果新建的Activity的Theme不包含actionbar就回出現空指針;再比如假如底部的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個。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxpbWcgYWx0PQ=="這裡寫圖片描述" src="/uploadfile/Collfiles/20160421/20160421091630633.png" title="\" />
這裡寫圖片描述
(×)下面這種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 布局

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

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved