在一個(gè) app 中，tabs 使在不同的視圖和功能間探索和切換以及瀏覽不同類別的數(shù)據(jù)集合起來變得簡單。

用法

tab 用來顯示有關(guān)聯(lián)的分組內(nèi)容。tab標(biāo)簽用來簡要的描述內(nèi)容。

移動(dòng)設(shè)備的 tabs

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-02_large_mdpi.png" alt="" />
擴(kuò)展的 app bar + tab bar

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-03_large_mdpi.png" alt="" />
加入檢索 + app bar + tab bar

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-06_large_mdpi.png" alt="" />
默認(rèn)的 app bar + tab bar

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-08_large_mdpi.png" alt="" />
默認(rèn)的 app bar + 可滾動(dòng)的 tab bar

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-07_large_mdpi.png" alt="" />
和 tab 指示器一樣的字體顏色

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-17_large_mdpi.png" alt="" />
被鎖定滾動(dòng)的 tab bar

桌面環(huán)境的 tabs

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-09_large_mdpi.png" alt="" />
默認(rèn)的 app bar + tab bar

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-15_large_mdpi.png" alt="" />
附加“更多”溢出下拉菜單

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-12_large_mdpi.png" alt="" />
Tab 溢出標(biāo)識(shí)碼，第一步

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-13_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-16_large_mdpi.png" alt="" />
展開的菜單

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-14_large_mdpi.png" alt="" />
居中的 tab bar

何時(shí)使用

使用 tabs 將大量關(guān)聯(lián)的數(shù)據(jù)或者選項(xiàng)劃分成更易理解的分組，可以在不需要切換出當(dāng)先上下文的情況下，有效的進(jìn)行內(nèi)容導(dǎo)航和內(nèi)容組織。

僅管 tab 的內(nèi)容讓人自然的聯(lián)想到導(dǎo)航（例如：道路選項(xiàng)可以切換地圖的視圖，搜索結(jié)果引導(dǎo)到其他網(wǎng)站），但 tabs 本身并不是用來導(dǎo)航的。

Tabs 也不是用于內(nèi)容切換或是內(nèi)容分頁的（例如：應(yīng)用中頁面之間的切換）。

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_do_10_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_dont_10_large_mdpi.png" alt="" />

(上圖)不可取

Tab 特性

Tabs 應(yīng)該顯示在一行內(nèi)。

Tabs 不應(yīng)該被嵌套。也就是說，一個(gè) tab 里的內(nèi)容不應(yīng)包含另一組 tabs。

一組 tabs 至少包含 2 個(gè) tab 并且不多于 6 個(gè) tab。

Tabs 控制的顯示內(nèi)容的定位要一致。

Tab 中當(dāng)前可見內(nèi)容要高亮顯示。

Tabs 應(yīng)該歸類并且每組 tabs 中內(nèi)容順序相連。

保持 tabs 和他們的內(nèi)容相鄰，可以明確兩者間的關(guān)系，距離太遠(yuǎn)會(huì)讓人誤解。

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_do_06_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_dont_06_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_do_08_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs_dont_08_large_mdpi.png" alt="" />

(上圖)不可取

內(nèi)容

Tab 的內(nèi)容

即使是兩個(gè) tabs 之間，tab 中呈現(xiàn)的內(nèi)容可以有很大的差別。比如，不同年份的 tab 組合或者是不同類型的設(shè)置。

一組 tabs 中的所有內(nèi)容應(yīng)該互相關(guān)聯(lián)并且在同一個(gè)主題下（例如：設(shè)置、指南），但是每個(gè) tab 又是相互獨(dú)立的。

Tab 標(biāo)簽應(yīng)該邏輯的組織相關(guān)內(nèi)容，并提供有意義的區(qū)分。

Tab 標(biāo)簽可能是圖標(biāo)或者文字并且不能省略。

避免進(jìn)行跨 tab 的內(nèi)容比較。如果一個(gè)跨 tab 的內(nèi)容比較是有必要的，那么也許應(yīng)該換一種內(nèi)容的組織和呈現(xiàn)方式。

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-content-tabs_15_large_mdpi.png" alt="" />

Tabs 的類型

根據(jù)平臺(tái)和使用環(huán)境，tab 的內(nèi)容可以表現(xiàn)為固定的 tabs 或者是滾動(dòng)（滑動(dòng)）的 tabs。

固定的 tabs

固定的 tabs 同時(shí)顯示所有 tabs，最適合用于快速相互切換的 tabs （例如，在地圖中切換線路的交通方式）。

視圖的寬度限制了 tabs 的最大數(shù)量。在固定的 tabs 中每個(gè) tab 寬度相等，都是最寬的 tab 標(biāo)簽的寬度?？梢酝ㄟ^點(diǎn)擊 tab 或者是在內(nèi)容區(qū)域中左右滑動(dòng)來在固定的 tabs 間進(jìn)行導(dǎo)航。

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-typesoftabs-tabs-spec-06_large_mdpi.png" alt="" />

滾動(dòng)的 tabs

滾動(dòng)的 tabs 用于顯示 tabs 的子集，可以在任何時(shí)候使用，并且可以包含更長的 tab 標(biāo)簽和更多的 tabs 數(shù)量，最適合用于觸摸操作的瀏覽環(huán)境并且用戶不需要直接比較 tab 標(biāo)簽。

可以通過點(diǎn)擊 tab 、在 tab 上左右滑動(dòng)或者在內(nèi)容區(qū)域中左右滑動(dòng)來在滾動(dòng)的 tabs 間進(jìn)行導(dǎo)航。

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-12_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-usage-tabs-spec-13_large_mdpi.png" alt="" />

規(guī)格

固定并且全屏寬度

• Tab 寬度：屏幕的 1/3
• 激活的Tab的指示器高度：2 dp
• 文本：14 sp Roboto Medium
• 文本在 tab 中居中
• 激活的文字顏色：#fff 或顏色選擇中的次要顏色（詳情可見Color）
• 不可用的文字顏色：#fff 60%

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-typesoftabs-tabs-spec-04_large_mdpi.png" alt="" />

可滾動(dòng)的

• Tab 寬度：12 dp + 文本寬度 + 12 dp
• 激活的Tab的指示器高度：2 dp
• 文本：14 sp Roboto Medium
• 激活的文字顏色：#fff 或顏色選擇中的次要顏色（詳情可見Color）
• 不可用的文字顏色：#fff 60%

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-typesoftabs-tabs-spec-05_large_mdpi.png" alt="" />

桌面/平板

• Tab 寬度：24 dp + 文本寬度 + 24 dp
• 激活的Tab的指示器高度：2 dp
• 文本：平板 14 sp 桌面 13 sp Roboto Medium
• 激活的文字顏色：#fff 或顏色選擇中的次要顏色（詳情可見Color）
• 不可用的文字顏色：#fff 60%

http://wiki.jikexueyuan.com/project/material-design/images/components-tabs-typesoftabs-tabs-spec-10_large_mdpi.png" alt="" />

按下 tab 時(shí)的動(dòng)畫

原文：Tabs 翻譯：vincent4j 校對(duì)：PoppinLp